01.波浪文本动画特效

效果

源码

源码地址也可以到我的网盘下载：

源码地址：

链接：https://pan.baidu.com/s/1B83Ui8pnaYP-s4d1GVrrBg

提取码：tzre

视频演示

视频地址1：https://www.ixigua.com/i6807702906041532939/

视频地址2：https://www.bilibili.com/video/BV1Y7411m7b6

index.html

  
  
  
  
  CSS 波浪文本动画特效
  


  
  

    
    内
    容
    加
    载
    中
    .
    .
    .
  

style.css

*{
  margin: 0;
  padding: 0;
  font-family: "微软雅黑"
}

body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #000;
}

.wavy{
  position: relative;
  -webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0, 0, 0, 0.2))
}

.wavy span{
  position: relative;
  display: inline-block;
  color: #fff;
  font-size: 2em;
  animation: animate 1s ease-in-out infinite;
  animation-delay: calc(.1s*var(--i))
}

@keyframes animate{
  0%{
    transform: translateY(0px)
  }
  20%{
    transform: translateY(-24px)
  }
  40%, 100%{
    transform: translateY(0px)
  }
}

知识点讲解

box-reflect一共有以下几个属性：

1. above：指定倒影在对象的上边

2. below：指定倒影在对象的下边

3. left：指定倒影在对象的左边

4. right：指定倒影在对象的右边

5. offset：倒影与对象之间的间隔，可以为负值。

还可以使用渐变以及图片。

接着通过事例来看看

above 效果

img{
    -webkit-box-reflect:above;
}

below 效果

img {
  -webkit-box-reflect:below;
}

left 效果

img {
  -webkit-box-reflect:left;
}

right 效果

img {
  -webkit-box-reflect:right;
}

offset 偏移量效果

img {
  -webkit-box-reflect:right 50px;
}

利用渐变制作图片倒影

img{
  -webkit-box-reflect:right 50px;
}