01.波浪文本动画特效

效果

在这里插入图片描述

源码

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

源码地址:

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

提取码:tzre

视频演示

5分钟学会制作 CSS 波浪文本动画特效

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

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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="./style.css" rel="stylesheet">
  <title>CSS 波浪文本动画特效</title>
  <link>
</head>
<body>
  <!-- 关注公众号《CSS特效世界》定期分享CSS特效 -->
  <div class="wavy">
    
    <span style="--i:1">内</span>
    <span style="--i:2">容</span>
    <span style="--i:3">加</span>
    <span style="--i:4">载</span>
    <span style="--i:5">中</span>
    <span style="--i:6">.</span>
    <span style="--i:7">.</span>
    <span style="--i:8">.</span>
  </div>
</body>
</html>

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;
}

在这里插入图片描述

前端小智@大迁世界 CSDN认证博客专家 TypeScript ECMAScript 6 前端框架
我不是什么大牛,我其实想做的就是一个传播者。内容可能过于基础,但对于刚入门的人来说或许是一个窗口,一个解惑之窗。我要先坚持分享20年,大家来一起见证吧。
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:白松林 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值