前端小练-产品宣传页面

前言

经过一个月的爆肝，花费了一个月（期间还花费了将近半个月的时间打比赛，还要备研）算是把数二高数的内容强化了一遍，接下来刷熟练度即可，可惜的是我现在要改数1。但是值得庆幸的是，线代和概率论可以洒洒水~，只是高数部分还有头疼的无穷级数和曲面积分。其实曲面积分，二重积分，微分方程，多元微分其实除了运算量大并没有什么难度（包括应用部分）。但是级数的话和前面的极限还有证明联系比较紧密，这个在思路上我觉得反而麻烦，至于中值定理核心大部分的题型是凑F，然后用罗尔定理。

所以说，如果继续坚持开发算法平台的话，我肯定是无法赶上第一波答辩了。考研和毕设我都要，我是真不想明年大四下学期还要回学校，我又没有女朋友，需要回来陪女朋友~

那么废话不多说，昨天也是干到1点多，把这个新的毕设方案的首页写出来了。先看看看效果吧：

实在是想不到文案了，不然的话，直接继续套。这次的话，没有办法不适合暗黑风格，只能这样干。

页面结构

老规矩，我们先来分析一下这个页面的结构，这个结构：

<template>

    <!-- 左边的固定钉 -->
    <el-affix :offset="150">
      <div class="affix-left">
        <div class="affix-item heartbeat">
          <img class="affix-img" src="~@/assets/image/download.png">
          <div class="affix-p">下载</div>
        </div>
        <div class="affix-item heartbeat">
          <img class="affix-img" src="~@/assets/image/document.png">
          <div class="affix-p">文档</div>
        </div>
        <div class="affix-item heartbeat">
          <img class="affix-img" src="~@/assets/image/assert.png">
          <div class="affix-p">解析</div>
        </div>
      </div>
    </el-affix>
    
    <!-- 接下来是我们的首页主体部分 -->
    <div class="main">
      <!-- 文字背景介绍部分 -->
        <div class="show-part color-change-2x">
          <!-- 第一部分 -->
          <div class="show-p1">
            FREE AND EASY TO LEARN 
          </div>
          <div class="show-p2">
            Hlang
          </div>
          <div class="show-p3">
            开源中文教学编程语言 BY Huterox
          </div>
        </div>

        <!-- 简介轮播图 -->
        <div class="content-canv">
          <div class="container">
            <div class="clip clip-1">
              <div class="content">
                <h1 class="title">开源</h1>
                <h3 class="paragraph">基于Python编写的教学中文编程语言，完全开源，并附带开发教程。</h3>
              </div>
            </div>
            <div class="clip clip-2">
              <div class="content">
                <h1 class="title">中文</h1>
                <h3 class="paragraph">中文编程，快速上手，培养编程思维。</h3>
              </div>
            </div>
            <div class="clip clip-3">
              <div class="content">
                <h1 class="title">易学</h1>
                <h3 class="paragraph">充分发挥母语优势，适合小学生教学。且生态将不断完善，兼容Python。</h3>
              </div>
            </div>
          </div>
        </div>

        <!-- 具体的文字宣传 -->
        <div class="show-centent-text">

            <div class="s-c-text" ref="box1">
                
            </div>

            <div class="s-c-text" ref="box2">
              我们的中文编程语言致力于打破语言壁垒，让编程更加亲切和易于学习。
              无论你是否具备编程经验，我们的中文编程语言都能够以你熟悉和理解的方式呈现，
              使你能够快速上手并掌握编程技能。
            </div>

            <div class="s-c-text" ref="box3">
              
            </div>
        </div>

        <!-- 尾部图片 -->

        <div class="buttom zoom">
          <div class="title-bu tracking-in-contract" ref="box4">
         
          </div>
          <div class="content-bu"  ref="box5">
            未来可期，创造无限可能
          </div>
        </div>

        <!-- 尾部特效，文字 -->

        <div class="bu-show">
            <div class="svg-bu-show">
               <!--特效 -->
              <div id="svgAttributes"> 
                <svg width="512" height="512" viewBox="0 0 128 128">
                  <polygon points="64 68.8628077439766 8.574 99.98498600107975 63.240037962811925 67.54607512963132 64 3.984986001079744 64.75996203718807 67.54607512963132 119.426 99.98498600107975 " fill="currentColor">
                  </polygon>
                </svg> 
              </div>
            </div>
            
            <div class="but-show-cent glitch-wrapper">
              <div class="glitch" data-text="JOIN US FUTURE IS BEST">
                JOIN US FUTURE IS BEST
              </div>
            </div>

        </div>

        <!-- footer -->
        <div class="footer">
        <!-- 特效 -->
        <div class="footershow">
          <div id="penner">
          <div class="line">
            <div class="small color-change-2x stretched square linear" style="transform: translateX(8.32375px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InQuad" style="transform: translateX(1.41935px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InCubic" style="transform: translateX(0.872133px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InQuart" style="transform: translateX(0.302639px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InQuint" style="transform: translateX(0.552566px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InSine" style="transform: translateX(0.301091px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InExpo" style="transform: translateX(0.437774px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InCirc" style="transform: translateX(0.625275px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InBack" style="transform: translateX(-3.78142px);"></div>
          </div>
          <div class="line">
            <div class="small  color-change-2x stretched square OutQuad" style="transform: translateX(15.4575px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square OutCubic" style="transform: translateX(23.5359px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square OutQuart" style="transform: translateX(38.4933px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square OutQuint" style="transform: translateX(35.4011px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square OutSine" style="transform: translateX(12.371px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square OutExpo" style="transform: translateX(43.1485px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square OutCirc" style="transform: translateX(75.0978px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square OutBack" style="transform: translateX(40.8483px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InOutQuad" style="transform: translateX(0.970785px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InOutCubic" style="transform: translateX(0.805919px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InOutQuart" style="transform: translateX(0.162609px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InOutQuint" style="transform: translateX(0.130278px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InOutSine" style="transform: translateX(1.35859px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InOutExpo" style="transform: translateX(0.0959568px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InOutCirc" style="transform: translateX(1.56201px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InOutBack" style="transform: translateX(-6.36447px);"></div>
          </div>
        </div>
        </div>
        <div class="footText">
          Huterox is Awesome
        </div>
      </div>

    </div>
</template>

结构的话其实就是这几大块，首先是固定的，然后是头部，中间，底部，和footer

固定钉

这个固定钉的话，怎么说呢，实际上是自己写的，只是外面套了一个el-affix，实际上你换成div是一样的效果，因为样式都是自己做的。 只是用了它的 offset。没啥用。

    <el-affix :offset="150">
      <div class="affix-left">
        <div class="affix-item heartbeat">
          <img class="affix-img" src="~@/assets/image/download.png">
          <div class="affix-p">下载</div>
        </div>
        <div class="affix-item heartbeat">
          <img class="affix-img" src="~@/assets/image/document.png">
          <div class="affix-p">文档</div>
        </div>
        <div class="affix-item heartbeat">
          <img class="affix-img" src="~@/assets/image/assert.png">
          <div class="affix-p">解析</div>
        </div>
      </div>
    </el-affix>

结构的话很清晰，大概就是这样：

这里的话主要是还有一个特效，心脏的特效。

@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}



.heartbeat:hover {
  -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
          animation: heartbeat 1.5s ease-in-out infinite both;
}
  .affix-img{
    margin-top: 10px;
    width: 30px;
    height: 30px;
  }

  .affix-p{
    height: 20px;
    font-size: 10px;
  }
  .affix-item{
    cursor: pointer;
    width: 100%;
    height: 70px;
    border-radius: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    text-align: center;
    background-color: whitesmoke;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(40,163,235,1);
    -moz-box-shadow: 0px 0px 10px 0px rgba(40,163,235,1);
    box-shadow: 0px 0px 10px 0px rgba(40,163,235,1);

  }
  .affix-left{
    position: fixed;
    width: 70px;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    gap: 25px;
    z-index: 100;
    opacity: 0.5

  }

头部

之后是我们的头部。 这部分的结构也很明显。一个flex,然后是列作为主轴。

 <!-- 文字背景介绍部分 -->
        <div class="show-part color-change-2x">
          <!-- 第一部分 -->
          <div class="show-p1">
            FREE AND EASY TO LEARN 
          </div>
          <div class="show-p2">
            Hlang
          </div>
          <div class="show-p3">
            开源中文教学编程语言 BY Huterox
          </div>
        </div>

然后这里的话，就主要是一个渐变，就没了。

.show-p3{
  font-family: cursive;
  margin-top: 10px;
  color: whitesmoke;
  font-size: 50px;
  display: flex;
  justify-items: center;
  align-items: center;
}
.show-p2{
  font-family: 'Courier New', Courier, monospace;
  margin-top: 10px;
  color: whitesmoke;
  font-size: 80px;
  display: flex;
  font-weight:bolder;
  justify-items: center;
  align-items: center;
}
.show-p1{

  font: 10em sans-serif;
  font-weight:bolder;
  font-family: system-ui;
  margin-top: 100px;
  color: rgba(9, 101, 239, 0.26);
  font-size: 60px;
  display: flex;
  justify-items: center;
  align-items: center;
}
.show-part{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  width: 100%;
  height: 450px;
  background-color: rgb(6, 223, 151);
}

.color-change-2x {
	-webkit-animation: color-change-2x 2s linear infinite alternate both;
	        animation: color-change-2x 2s linear infinite alternate both;
}

@-webkit-keyframes color-change-2x {
  0% {
    background: rgb(178, 194, 195);
  }
  100% {
    background: #75aabb;
  }
}
@keyframes color-change-2x {
  0% {
    background: #8db0bd;
  }
  100% {
    background: #6eb4cb;
  }
}

轮播

这个效果的话，叫啥我不是很清楚，反正但是是要做轮播的，但是太丑了，就做成这样的。

    <!-- 简介轮播图 -->
        <div class="content-canv">
          <div class="container">
            <div class="clip clip-1">
              <div class="content">
                <h1 class="title">开源</h1>
                <h3 class="paragraph">基于Python编写的教学中文编程语言，完全开源，并附带开发教程。</h3>
              </div>
            </div>
            <div class="clip clip-2">
              <div class="content">
                <h1 class="title">中文</h1>
                <h3 class="paragraph">中文编程，快速上手，培养编程思维。</h3>
              </div>
            </div>
            <div class="clip clip-3">
              <div class="content">
                <h1 class="title">易学</h1>
                <h3 class="paragraph">充分发挥母语优势，适合小学生教学。且生态将不断完善，兼容Python。</h3>
              </div>
            </div>
          </div>
        </div>

然后是对应的CSS

.content-canv{
  width: 100%;
  height: 600px;
  background-color: whitesmoke;
  display: flex;
  justify-items: center;
  align-items: center;

}


.container {
  border-radius: 30px;
  background-color: whitesmoke;
  height: 600px;
  max-width: 100%;
  position: relative;
  width: 1000px;
  margin: 0 auto;

}

.clip {
  border-radius: 30px;
  background: var(--white)
  url('https://images.unsplash.com/photo-1599694927440-e321028bc146?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80')
  100% / cover no-repeat;
  border: 0.1rem solid var(--cod-gray);
  bottom: 0rem;
  left: -0.2rem;
  position: absolute;
  right: 0rem;
  top: 0rem;
  transition: clip-path 330ms var(--transform-function);
}

.clip-1 {
  background-size:cover;
  border-radius: 30px;
  clip-path: polygon(0 0, 47% 0, 21% 100%, 0% 100%);
  background-image: url('../../src/assets/image/card1.png');
}

.clip-2 {
  background-size:cover;
  border-radius: 30px;
  background-image: url('../../src/assets/image/card2.png');
  clip-path: polygon(43% 0, 100% 0, 38% 100%, 13% 100%);
}

.clip-3 {
  background-size:cover;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background-image: url('../../src/assets/image/card3.png');
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 38% 100%);
}

.content {

  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
  border-radius: 30px;
  background-color: var(--white);
  bottom: 0;
  display: flex;
  flex-direction: column;
  left: 0;
  opacity: 0;
  padding: 1rem;
  pointer-events: none;
  position: absolute;
  transform: translateY(100%);
  transition: transform 330ms var(--transform-function) 100ms,
  opacity 330ms var(--transform-function) 150ms;
  width: 75%;
}

.title {
  font-family: cursive;
  margin-top: 50%;
  display: flex;
  align-items: center;
  justify-items: center;
  color: whitesmoke;
  height: 80px;
  width: 100%;
  line-height: 1.1;
}

.paragraph {
  font-family: cursive;
  height: 40px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-items: center;
  border-radius: 30px;
  color: whitesmoke;
  line-height: 1.1;
}

/* Effect */
.container:hover .clip {
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

.container .clip:hover {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.clip:hover .content {
  opacity: 1;
  transform: translateY(0);
}

JS特效

之后的话，就是先前也做过的打字机特效。这个的话真没啥。当然还有别的，这个的话就是anime.js做的。

然后这里的话，其实整个特效是分两个部分组成的： 1. 本身DIV的一个CSS布局 2. JS部分产生的特效 所以的话，要写很简单，先正常布局，然后想你要啥，然后写逻辑即可。

<script>
import anime from 'animejs'
export default {

  mounted() {

    const part1 = "以汉字和常用词汇作为编程语法的基础，我们的产品让编程变得更加容易理解和应用。"
    this.TypewriterDom(this.$refs.box1,part1,true,null)

    // const part2 = "我们的中文编程语言致力于打破语言壁垒，让编程更加亲切和易于学习。无论你是否具备编程经验，我们的中文编程语言都能够以你熟悉和理解的方式呈现，使你能够快速上手并掌握编程技能。"
    // this.TypewriterDom(this.$refs.box2,part2,true,null)

    const part3 = "作为开源项目，这个中文编程语言的源代码可供学生、教师、研究人员以及业界专业人士自由使用。"
    this.TypewriterDom(this.$refs.box3,part3,true,null)

    const part4 = "加入我们"
    this.TypewriterDom(this.$refs.box4,part4,true,null)

    this.RunButSvg()
    this.RunFooter()

  },
  methods:{

    // footer特效

    RunFooter(){
      var penner = anime.timeline({loop: true,direction: 'alternate',duration: 150,});
      penner
        .add({
          targets: '#penner .linear', translateX: 1100, offset: 0,
          easing: 'linear',
        })
        .add({
          targets: '#penner .InQuad', translateX: 1100, offset: 0,
          easing: 'easeInQuad',
        })
        .add({
          targets: '#penner .InCubic', translateX: 1100, offset: 0,
          easing: 'easeInCubic',
        })
        .add({
          targets: '#penner .InQuart', translateX: 1100, offset: 0,
          easing: 'easeInQuart',
        })
        .add({
          targets: '#penner .InQuint', translateX: 1100, offset: 0,
          easing: 'easeInQuint',
        })
        .add({
          targets: '#penner .InSine', translateX: 1100, offset: 0,
          easing: 'easeInSine',
        })
        .add({
          targets: '#penner .InExpo', translateX: 1100, offset: 0,
          easing: 'easeInExpo',
        })
        .add({
          targets: '#penner .InCirc', translateX: 1100, offset: 0,
          easing: 'easeInCirc',
        })
        .add({
          targets: '#penner .InBack', translateX: 1100, offset: 0,
          easing: 'easeInBack',
        })
        .add({
          targets: '#penner .OutQuad', translateX: 1100, offset: 0,
          easing: 'easeOutQuad',
        })
        .add({
          targets: '#penner .OutCubic', translateX: 1100, offset: 0,
          easing: 'easeOutCubic',
        })
        .add({
          targets: '#penner .OutQuart', translateX: 1100, offset: 0,
          easing: 'easeOutQuart',
        })
        .add({
          targets: '#penner .OutQuint', translateX: 1100, offset: 0,
          easing: 'easeOutQuint',
        })
        .add({
          targets: '#penner .OutSine', translateX: 1100, offset: 0,
          easing: 'easeOutSine',
        })
        .add({
          targets: '#penner .OutExpo', translateX: 1100, offset: 0,
          easing: 'easeOutExpo',
        })
        .add({
          targets: '#penner .OutCirc', translateX: 1100, offset: 0,
          easing: 'easeOutCirc',
        })
        .add({
          targets: '#penner .OutBack', translateX: 1100, offset: 0,
          easing: 'easeOutBack',
        })
        .add({
          targets: '#penner .InOutQuad', translateX: 1100, offset: 0,
          easing: 'easeInOutQuad',
        })
        .add({
          targets: '#penner .InOutCubic', translateX: 1100, offset: 0,
          easing: 'easeInOutCubic',
        })
        .add({
          targets: '#penner .InOutQuart', translateX: 1100, offset: 0,
          easing: 'easeInOutQuart',
        })
        .add({
          targets: '#penner .InOutQuint', translateX: 1100, offset: 0,
          easing: 'easeInOutQuint',
        })
        .add({
          targets: '#penner .InOutSine', translateX: 1100, offset: 0,
          easing: 'easeInOutSine',
        })
        .add({
          targets: '#penner .InOutExpo', translateX: 1100, offset: 0,
          easing: 'easeInOutExpo',
        })
        .add({
          targets: '#penner .InOutCirc', translateX: 1100, offset: 0,
          easing: 'easeInOutCirc',
        })
        .add({
          targets: '#penner .InOutBack', translateX: 1100, offset: 0,
          easing: 'easeInOutBack',
          
        });
    },


    // 底部的svg特效
    RunButSvg(){
      anime({
        targets: '#svgAttributes polygon',
        points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96',
        easing: 'easeInOutExpo',
        duration: 2000,
        loop: true
      });
    },

    /**
     * 打字机特效，通过anime.js来实现，传入定位的Dome，显示的文字
     * 还有是否一直监听
     */
    TypewriterDom(refDom,showString,runover,func){
      // 创建 IntersectionObserver 实例
      const io = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) { 
          this.Typewriter(refDom,showString)
          //一次就好，避免资源浪费
          if(func){
            func()
          }
          if(runover){
            io.unobserve(refDom);
          }
         }
        });
      });
    // 开始监听
      io.observe(refDom);
    },

    Typewriter(refDom,showString){
      const textContainer = refDom
      const text = showString
      let charIndex = 0
      const animateText = () => {
        textContainer.innerHTML = text.slice(0, charIndex)
        charIndex++

        if (charIndex <= text.length) {
          anime({
            targets: textContainer,
            opacity: [1,1],
            duration: 100,
            easing: 'linear',
            complete: animateText
          })
        }
      }
      animateText()
    }
  } 
}
</script>

完整代码

okey,那么接下来的话就看到，完整的代码。

<template>

    <!-- 左边的固定钉 -->
    <el-affix :offset="150">
      <div class="affix-left">
        <div class="affix-item heartbeat">
          <img class="affix-img" src="~@/assets/image/download.png">
          <div class="affix-p">下载</div>
        </div>
        <div class="affix-item heartbeat">
          <img class="affix-img" src="~@/assets/image/document.png">
          <div class="affix-p">文档</div>
        </div>
        <div class="affix-item heartbeat">
          <img class="affix-img" src="~@/assets/image/assert.png">
          <div class="affix-p">解析</div>
        </div>
      </div>
    </el-affix>
    
    <!-- 接下来是我们的首页主体部分 -->
    <div class="main">
      <!-- 文字背景介绍部分 -->
        <div class="show-part color-change-2x">
          <!-- 第一部分 -->
          <div class="show-p1">
            FREE AND EASY TO LEARN 
          </div>
          <div class="show-p2">
            Hlang
          </div>
          <div class="show-p3">
            开源中文教学编程语言 BY Huterox
          </div>
        </div>

        <!-- 简介轮播图 -->
        <div class="content-canv">
          <div class="container">
            <div class="clip clip-1">
              <div class="content">
                <h1 class="title">开源</h1>
                <h3 class="paragraph">基于Python编写的教学中文编程语言，完全开源，并附带开发教程。</h3>
              </div>
            </div>
            <div class="clip clip-2">
              <div class="content">
                <h1 class="title">中文</h1>
                <h3 class="paragraph">中文编程，快速上手，培养编程思维。</h3>
              </div>
            </div>
            <div class="clip clip-3">
              <div class="content">
                <h1 class="title">易学</h1>
                <h3 class="paragraph">充分发挥母语优势，适合小学生教学。且生态将不断完善，兼容Python。</h3>
              </div>
            </div>
          </div>
        </div>

        <!-- 具体的文字宣传 -->
        <div class="show-centent-text">

            <div class="s-c-text" ref="box1">
                
            </div>

            <div class="s-c-text" ref="box2">
              我们的中文编程语言致力于打破语言壁垒，让编程更加亲切和易于学习。
              无论你是否具备编程经验，我们的中文编程语言都能够以你熟悉和理解的方式呈现，
              使你能够快速上手并掌握编程技能。
            </div>

            <div class="s-c-text" ref="box3">
              
            </div>
        </div>

        <!-- 尾部图片 -->

        <div class="buttom zoom">
          <div class="title-bu tracking-in-contract" ref="box4">
         
          </div>
          <div class="content-bu"  ref="box5">
            未来可期，创造无限可能
          </div>
        </div>

        <!-- 尾部特效，文字 -->

        <div class="bu-show">
            <div class="svg-bu-show">
               <!--特效 -->
              <div id="svgAttributes"> 
                <svg width="512" height="512" viewBox="0 0 128 128">
                  <polygon points="64 68.8628077439766 8.574 99.98498600107975 63.240037962811925 67.54607512963132 64 3.984986001079744 64.75996203718807 67.54607512963132 119.426 99.98498600107975 " fill="currentColor">
                  </polygon>
                </svg> 
              </div>
            </div>
            
            <div class="but-show-cent glitch-wrapper">
              <div class="glitch" data-text="JOIN US FUTURE IS BEST">
                JOIN US FUTURE IS BEST
              </div>
            </div>

        </div>

        <!-- footer -->
        <div class="footer">
        <!-- 特效 -->
        <div class="footershow">
          <div id="penner">
          <div class="line">
            <div class="small color-change-2x stretched square linear" style="transform: translateX(8.32375px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InQuad" style="transform: translateX(1.41935px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InCubic" style="transform: translateX(0.872133px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InQuart" style="transform: translateX(0.302639px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InQuint" style="transform: translateX(0.552566px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InSine" style="transform: translateX(0.301091px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InExpo" style="transform: translateX(0.437774px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InCirc" style="transform: translateX(0.625275px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InBack" style="transform: translateX(-3.78142px);"></div>
          </div>
          <div class="line">
            <div class="small  color-change-2x stretched square OutQuad" style="transform: translateX(15.4575px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square OutCubic" style="transform: translateX(23.5359px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square OutQuart" style="transform: translateX(38.4933px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square OutQuint" style="transform: translateX(35.4011px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square OutSine" style="transform: translateX(12.371px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square OutExpo" style="transform: translateX(43.1485px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square OutCirc" style="transform: translateX(75.0978px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square OutBack" style="transform: translateX(40.8483px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InOutQuad" style="transform: translateX(0.970785px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InOutCubic" style="transform: translateX(0.805919px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InOutQuart" style="transform: translateX(0.162609px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InOutQuint" style="transform: translateX(0.130278px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InOutSine" style="transform: translateX(1.35859px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InOutExpo" style="transform: translateX(0.0959568px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InOutCirc" style="transform: translateX(1.56201px);"></div>
          </div>
          <div class="line">
            <div class="small color-change-2x stretched square InOutBack" style="transform: translateX(-6.36447px);"></div>
          </div>
        </div>
        </div>
        <div class="footText">
          Huterox is Awesome
        </div>
      </div>

    </div>
</template>

<script>
import anime from 'animejs'
export default {

  mounted() {

    const part1 = "以汉字和常用词汇作为编程语法的基础，我们的产品让编程变得更加容易理解和应用。"
    this.TypewriterDom(this.$refs.box1,part1,true,null)

    // const part2 = "我们的中文编程语言致力于打破语言壁垒，让编程更加亲切和易于学习。无论你是否具备编程经验，我们的中文编程语言都能够以你熟悉和理解的方式呈现，使你能够快速上手并掌握编程技能。"
    // this.TypewriterDom(this.$refs.box2,part2,true,null)

    const part3 = "作为开源项目，这个中文编程语言的源代码可供学生、教师、研究人员以及业界专业人士自由使用。"
    this.TypewriterDom(this.$refs.box3,part3,true,null)

    const part4 = "加入我们"
    this.TypewriterDom(this.$refs.box4,part4,true,null)

    this.RunButSvg()
    this.RunFooter()

  },
  methods:{

    // footer特效

    RunFooter(){
      var penner = anime.timeline({loop: true,direction: 'alternate',duration: 150,});
      penner
        .add({
          targets: '#penner .linear', translateX: 1100, offset: 0,
          easing: 'linear',
        })
        .add({
          targets: '#penner .InQuad', translateX: 1100, offset: 0,
          easing: 'easeInQuad',
        })
        .add({
          targets: '#penner .InCubic', translateX: 1100, offset: 0,
          easing: 'easeInCubic',
        })
        .add({
          targets: '#penner .InQuart', translateX: 1100, offset: 0,
          easing: 'easeInQuart',
        })
        .add({
          targets: '#penner .InQuint', translateX: 1100, offset: 0,
          easing: 'easeInQuint',
        })
        .add({
          targets: '#penner .InSine', translateX: 1100, offset: 0,
          easing: 'easeInSine',
        })
        .add({
          targets: '#penner .InExpo', translateX: 1100, offset: 0,
          easing: 'easeInExpo',
        })
        .add({
          targets: '#penner .InCirc', translateX: 1100, offset: 0,
          easing: 'easeInCirc',
        })
        .add({
          targets: '#penner .InBack', translateX: 1100, offset: 0,
          easing: 'easeInBack',
        })
        .add({
          targets: '#penner .OutQuad', translateX: 1100, offset: 0,
          easing: 'easeOutQuad',
        })
        .add({
          targets: '#penner .OutCubic', translateX: 1100, offset: 0,
          easing: 'easeOutCubic',
        })
        .add({
          targets: '#penner .OutQuart', translateX: 1100, offset: 0,
          easing: 'easeOutQuart',
        })
        .add({
          targets: '#penner .OutQuint', translateX: 1100, offset: 0,
          easing: 'easeOutQuint',
        })
        .add({
          targets: '#penner .OutSine', translateX: 1100, offset: 0,
          easing: 'easeOutSine',
        })
        .add({
          targets: '#penner .OutExpo', translateX: 1100, offset: 0,
          easing: 'easeOutExpo',
        })
        .add({
          targets: '#penner .OutCirc', translateX: 1100, offset: 0,
          easing: 'easeOutCirc',
        })
        .add({
          targets: '#penner .OutBack', translateX: 1100, offset: 0,
          easing: 'easeOutBack',
        })
        .add({
          targets: '#penner .InOutQuad', translateX: 1100, offset: 0,
          easing: 'easeInOutQuad',
        })
        .add({
          targets: '#penner .InOutCubic', translateX: 1100, offset: 0,
          easing: 'easeInOutCubic',
        })
        .add({
          targets: '#penner .InOutQuart', translateX: 1100, offset: 0,
          easing: 'easeInOutQuart',
        })
        .add({
          targets: '#penner .InOutQuint', translateX: 1100, offset: 0,
          easing: 'easeInOutQuint',
        })
        .add({
          targets: '#penner .InOutSine', translateX: 1100, offset: 0,
          easing: 'easeInOutSine',
        })
        .add({
          targets: '#penner .InOutExpo', translateX: 1100, offset: 0,
          easing: 'easeInOutExpo',
        })
        .add({
          targets: '#penner .InOutCirc', translateX: 1100, offset: 0,
          easing: 'easeInOutCirc',
        })
        .add({
          targets: '#penner .InOutBack', translateX: 1100, offset: 0,
          easing: 'easeInOutBack',
          
        });
    },


    // 底部的svg特效
    RunButSvg(){
      anime({
        targets: '#svgAttributes polygon',
        points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96',
        easing: 'easeInOutExpo',
        duration: 2000,
        loop: true
      });
    },

    /**
     * 打字机特效，通过anime.js来实现，传入定位的Dome，显示的文字
     * 还有是否一直监听
     */
    TypewriterDom(refDom,showString,runover,func){
      // 创建 IntersectionObserver 实例
      const io = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) { 
          this.Typewriter(refDom,showString)
          //一次就好，避免资源浪费
          if(func){
            func()
          }
          if(runover){
            io.unobserve(refDom);
          }
         }
        });
      });
    // 开始监听
      io.observe(refDom);
    },

    Typewriter(refDom,showString){
      const textContainer = refDom
      const text = showString
      let charIndex = 0
      const animateText = () => {
        textContainer.innerHTML = text.slice(0, charIndex)
        charIndex++

        if (charIndex <= text.length) {
          anime({
            targets: textContainer,
            opacity: [1,1],
            duration: 100,
            easing: 'linear',
            complete: animateText
          })
        }
      }
      animateText()
    }
  } 
}
</script>



<style scoped>


/* footer */

.footText{
  display: flex;
  width: 100%;
  height: 100px;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  color: whitesmoke;
  background-color: rgb(40, 46, 90);
}
.square{
  margin-left: 230px;
  margin-top: 2px;
  border-radius: 5px;
  width: 100px;
  height: 2px;
  background-color: #0a62c6b0;
}
.footershow{
  display: flex;
  align-items: center;
  justify-items: center;
  width: 100%;
  height: 120px;
  align-items: center;
  border-block-end: 3px whitesmoke solid;
}
.footer{
  margin-top: 1%;
  width: 100%;
  display: flex;
  flex-direction: column;

}




/* 尾部特效 */

.glitch-wrapper {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
}

.glitch {
   position: relative;
   font-size: 100px;
   font-weight: bold;
   color: whitesmoke;
   letter-spacing: 3px;
   z-index: 1;
}

.glitch:before {
   content: attr(data-text);
   position: absolute;
   top: 0;
   left: -2px;
   width: 100%;
   color: 50px;

   overflow: hidden;
   clip: rect(0, 900px, 0, 0);
   animation: noise-before 3s infinite linear alternate-reverse;
}

.glitch:after {
   content: attr(data-text);
   position: absolute;
   top: 0;
   left: 2px;
   width: 100%;
   color: 50px;
   overflow: hidden;
   clip: rect(0, 900px, 0, 0);
   animation: noise-after 2s infinite linear alternate-reverse;
}

@keyframes noise-before {
   0% {
      clip: rect(61px, 9999px, 52px, 0);
   }
   5% {
      clip: rect(33px, 9999px, 144px, 0);
   }
   10% {
      clip: rect(121px, 9999px, 115px, 0);
   }
   15% {
      clip: rect(144px, 9999px, 162px, 0);
   }
   20% {
      clip: rect(62px, 9999px, 180px, 0);
   }
   25% {
      clip: rect(34px, 9999px, 42px, 0);
   }
   30% {
      clip: rect(147px, 9999px, 179px, 0);
   }
   35% {
      clip: rect(99px, 9999px, 63px, 0);
   }
   40% {
      clip: rect(188px, 9999px, 122px, 0);
   }
   45% {
      clip: rect(154px, 9999px, 14px, 0);
   }
   50% {
      clip: rect(63px, 9999px, 37px, 0);
   }
   55% {
      clip: rect(161px, 9999px, 147px, 0);
   }
   60% {
      clip: rect(109px, 9999px, 175px, 0);
   }
   65% {
      clip: rect(157px, 9999px, 88px, 0);
   }
   70% {
      clip: rect(173px, 9999px, 131px, 0);
   }
   75% {
      clip: rect(62px, 9999px, 70px, 0);
   }
   80% {
      clip: rect(24px, 9999px, 153px, 0);
   }
   85% {
      clip: rect(138px, 9999px, 40px, 0);
   }
   90% {
      clip: rect(79px, 9999px, 136px, 0);
   }
   95% {
      clip: rect(25px, 9999px, 34px, 0);
   }
   100% {
      clip: rect(173px, 9999px, 166px, 0);
   }
}

@keyframes noise-after {
   0% {
      clip: rect(26px, 9999px, 33px, 0);
   }
   5% {
      clip: rect(140px, 9999px, 198px, 0);
   }
   10% {
      clip: rect(184px, 9999px, 89px, 0);
   }
   15% {
      clip: rect(121px, 9999px, 6px, 0);
   }
   20% {
      clip: rect(181px, 9999px, 99px, 0);
   }
   25% {
      clip: rect(154px, 9999px, 133px, 0);
   }
   30% {
      clip: rect(134px, 9999px, 169px, 0);
   }
   35% {
      clip: rect(26px, 9999px, 187px, 0);
   }
   40% {
      clip: rect(147px, 9999px, 137px, 0);
   }
   45% {
      clip: rect(31px, 9999px, 52px, 0);
   }
   50% {
      clip: rect(191px, 9999px, 109px, 0);
   }
   55% {
      clip: rect(74px, 9999px, 54px, 0);
   }
   60% {
      clip: rect(145px, 9999px, 75px, 0);
   }
   65% {
      clip: rect(153px, 9999px, 198px, 0);
   }
   70% {
      clip: rect(99px, 9999px, 136px, 0);
   }
   75% {
      clip: rect(118px, 9999px, 192px, 0);
   }
   80% {
      clip: rect(1px, 9999px, 83px, 0);
   }
   85% {
      clip: rect(145px, 9999px, 98px, 0);
   }
   90% {
      clip: rect(121px, 9999px, 154px, 0);
   }
   95% {
      clip: rect(156px, 9999px, 44px, 0);
   }
   100% {
      clip: rect(67px, 9999px, 122px, 0);
   }
}









.bu-show{

  display: flex;
  justify-items: center;
  align-items: center;
  height: 600px;
  width: 100%;

  background: rgba(179,220,237,1);
  background: -moz-linear-gradient(left, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(179,220,237,1)), color-stop(50%, rgba(41,184,229,1)), color-stop(100%, rgba(188,224,238,1)));
  background: -webkit-linear-gradient(left, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
  background: -o-linear-gradient(left, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
  background: -ms-linear-gradient(left, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
  background: linear-gradient(to right, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee', GradientType=1 );

}

.svg-bu-show{


  margin-left: 150px;
  display: flex;
  justify-items: center;
  align-items: center;
  padding-left: 50px;
  width: 600px;
  height: 600px;
}

.but-show-cent{
  display: flex;
  margin-left: 150px;
  justify-items: center;
  align-items: center;
  width: 600px;
  height: 600px;
}

/* 尾部图片文字 */

.content-bu{
  font-weight: bolder;
  font-family: cursive;
  font-size: 50px;
  display: flex;
  color: white;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100px;
}
.title-bu{
  font-family: cursive;
  font-weight: bolder;
  margin-top: 200px;
  font-size: 80px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100px;
}
.tracking-in-contract {
	-webkit-animation: tracking-in-contract 5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-contract 5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
@-webkit-keyframes tracking-in-contract {
  0% {
    letter-spacing: 1em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    letter-spacing: normal;
    opacity: 1;
  }
}
@keyframes tracking-in-contract {
  0% {
    letter-spacing: 1em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    letter-spacing: normal;
    opacity: 1;
  }
}



.buttom{
  background-position: center;
  flex-direction: column;
  width: 100%;
  height: 600px;
  display: flex;
  background-image: url('../../src/assets/image/bgcard.png');
  background-size: cover;
}

.zoom {
  /* background-size: 125%; */
  -webkit-animation: zoom 10s infinite alternate ease-in-out both;
	        animation: zoom 10s infinite alternate ease-in-out both;
}
@keyframes zoom {
  0% {
    background-size: 100%;
  }
  100% {
    background-size: 125%;
  }
}



/* 具体文字宣传 */

.s-c-text{

  padding-top: 30px;
  width: 100%;
  font-weight:bolder;
  margin: 0 auto;
  font-family: cursive;
  word-wrap: break-word;
  font-size: 30px;
  color: #6eb4cb;
  border-radius: 30px;

}

.show-centent-text:hover{

  margin-top: 10px;
  -webkit-box-shadow: 5px 5px 50px 0px rgba(105,170,214,1);
  -moz-box-shadow: 5px 5px 50px 0px rgba(105,170,214,1);
  box-shadow: 5px 5px 50px 0px rgba(105,170,214,1);
}

.s-c-text:hover{

  -webkit-box-shadow: 5px 5px 50px 0px rgba(105,170,214,1);
  -moz-box-shadow: 5px 5px 50px 0px rgba(105,170,214,1);
  box-shadow: 5px 5px 50px 0px rgba(105,170,214,1);
}


.show-centent-text{
  
  display: flex;
  justify-items: center;
  align-items: center;
  border-radius: 30px;
  cursor: default;
  height: 300px;
  width: 80%;
  margin: 0 auto;
  column-count: 3;
  column-gap: 57px;
  column-rule: 6px solid #1192e7;
}


/* 简介轮播图 */
.content-canv{
  width: 100%;
  height: 600px;
  background-color: whitesmoke;
  display: flex;
  justify-items: center;
  align-items: center;

}


.container {
  border-radius: 30px;
  background-color: whitesmoke;
  height: 600px;
  max-width: 100%;
  position: relative;
  width: 1000px;
  margin: 0 auto;

}

.clip {
  border-radius: 30px;
  background: var(--white)
  url('https://images.unsplash.com/photo-1599694927440-e321028bc146?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80')
  100% / cover no-repeat;
  border: 0.1rem solid var(--cod-gray);
  bottom: 0rem;
  left: -0.2rem;
  position: absolute;
  right: 0rem;
  top: 0rem;
  transition: clip-path 330ms var(--transform-function);
}

.clip-1 {
  background-size:cover;
  border-radius: 30px;
  clip-path: polygon(0 0, 47% 0, 21% 100%, 0% 100%);
  background-image: url('../../src/assets/image/card1.png');
}

.clip-2 {
  background-size:cover;
  border-radius: 30px;
  background-image: url('../../src/assets/image/card2.png');
  clip-path: polygon(43% 0, 100% 0, 38% 100%, 13% 100%);
}

.clip-3 {
  background-size:cover;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background-image: url('../../src/assets/image/card3.png');
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 38% 100%);
}

.content {

  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
  border-radius: 30px;
  background-color: var(--white);
  bottom: 0;
  display: flex;
  flex-direction: column;
  left: 0;
  opacity: 0;
  padding: 1rem;
  pointer-events: none;
  position: absolute;
  transform: translateY(100%);
  transition: transform 330ms var(--transform-function) 100ms,
  opacity 330ms var(--transform-function) 150ms;
  width: 75%;
}

.title {
  font-family: cursive;
  margin-top: 50%;
  display: flex;
  align-items: center;
  justify-items: center;
  color: whitesmoke;
  height: 80px;
  width: 100%;
  line-height: 1.1;
}

.paragraph {
  font-family: cursive;
  height: 40px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-items: center;
  border-radius: 30px;
  color: whitesmoke;
  line-height: 1.1;
}

/* Effect */
.container:hover .clip {
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

.container .clip:hover {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.clip:hover .content {
  opacity: 1;
  transform: translateY(0);
}

/* 结束简介轮播图 */

/* 首页文字部分css */
.show-p3{
  font-family: cursive;
  margin-top: 10px;
  color: whitesmoke;
  font-size: 50px;
  display: flex;
  justify-items: center;
  align-items: center;
}
.show-p2{
  font-family: 'Courier New', Courier, monospace;
  margin-top: 10px;
  color: whitesmoke;
  font-size: 80px;
  display: flex;
  font-weight:bolder;
  justify-items: center;
  align-items: center;
}
.show-p1{

  font: 10em sans-serif;
  font-weight:bolder;
  font-family: system-ui;
  margin-top: 100px;
  color: rgba(9, 101, 239, 0.26);
  font-size: 60px;
  display: flex;
  justify-items: center;
  align-items: center;
}
.show-part{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  width: 100%;
  height: 450px;
  background-color: rgb(6, 223, 151);
}

.color-change-2x {
	-webkit-animation: color-change-2x 2s linear infinite alternate both;
	        animation: color-change-2x 2s linear infinite alternate both;
}

@-webkit-keyframes color-change-2x {
  0% {
    background: rgb(178, 194, 195);
  }
  100% {
    background: #75aabb;
  }
}
@keyframes color-change-2x {
  0% {
    background: #8db0bd;
  }
  100% {
    background: #6eb4cb;
  }
}

/* 结束首页文字部分css */


/* 首页布局 */

.main{
  background-color: whitesmoke;
  margin-top: 0px;
  width: 100%;
  gap: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;

}
/* 结束首页布局css */



/* 固定钉css */


@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}



.heartbeat:hover {
  -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
          animation: heartbeat 1.5s ease-in-out infinite both;
}
  .affix-img{
    margin-top: 10px;
    width: 30px;
    height: 30px;
  }

  .affix-p{
    height: 20px;
    font-size: 10px;
  }
  .affix-item{
    cursor: pointer;
    width: 100%;
    height: 70px;
    border-radius: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    text-align: center;
    background-color: whitesmoke;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(40,163,235,1);
    -moz-box-shadow: 0px 0px 10px 0px rgba(40,163,235,1);
    box-shadow: 0px 0px 10px 0px rgba(40,163,235,1);

  }
  .affix-left{
    position: fixed;
    width: 70px;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    gap: 25px;
    z-index: 100;
    opacity: 0.5

  }

  /* 固定钉css代码完毕 */

</style>
  
  

总结

okey,以上就是全部内容了。比较实在，代码全给了，内容看起来比较多~没办法，本博主就是很长，不像某些博主是吧，那么短还有藏着掖着。