跳动的文字：CSS3动画、倒影、变量

今天看到一个案例，实现文字的动态跳跃，是用CSS3写的，其中用到了animation属性，还学习了一个新属性box-reflect，不过写的时候，在谷歌浏览器中需要用-webkit-box-reflect，可以实现文字的倒影效果，不由得感慨css的功能越来越强大了。
效果如下：

使用变量的用法我平常用的不多，用变量代替可以使css代码更简洁，值得学习。
我做了一下测试，发现倒影的颜色是由span标记里的颜色决定的，倒影-webkit-box-reflect里设置的颜色不起什么作用。

<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>动画、倒影、变量</title><style>* {margin: 0;padding: 0;}body {height: 100vh;display: flex; /*弹性布局，子元素可以水平垂直都居中*/justify-content: center;align-items: center;background-color: #23C6D9;}.wave {position: relative;-webkit-box-reflect: below -12px linear-gradient(transparent, red);}.wave span {position: relative;display: inline-block;color: #fff;font-size: 50px;text-transform: uppercase;letter-spacing: 8px;animation: wavy 1s ease-in-out infinite;/* 通过var函数调用自定义属性--i，在计算出动画延迟时间 */animation-delay: calc(0.1s * var(--i));}/* 定义动画 */@keyframes wavy {0% {transform: translateY(0);}20% {transform: translateY(-30px);}50%,100% {transform: translateY(0);}}</style></head><body><div class="wave"><span style="--i:1;">w</span><span style="--i:2;">a</span><span style="--i:3;">i</span><span style="--i:4;">t</span><span style="--i:5;">i</span><span style="--i:6;">n</span><span style="--i:7;">g</span><span style="--i:8;">.</span><span style="--i:9;">.</span><span style="--i:10;">.</span></div></body>
</html>

跳动的文字：CSS3动画、倒影、变量相关推荐

css3霓虹灯文字效果以及文字背景动画
一.注意点 1.HTML5中rel属性的prefetch预加载功能 :rel='stylesheet prefetch' 2.Google字体库载入(在family加入你要的字体) <link ...
CSS3动画大全(附源码)flex布局,grid布局3d旋转,图像模糊,文字发光
CSS3动画大全(附源码)3d旋转,图像模糊,文字发光! 文章目录 CSS3动画大全(附源码)3d旋转,图像模糊,文字发光! html代码 css grid布局 flex布局文字发光 & 图 ...
纯CSS3文字Loading动画特效
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载更多专业前端知识,请上 [猿2048]www.mk2048.com
html语言鼠标悬停特效,CSS3鼠标悬停文字幻影动画特效
这是一款CSS3鼠标悬停文字幻影动画特效.该特效利用before和after伪元素来制作当鼠标悬停在超链接文本上的时候的幻影效果. 使用方法在页面中引入bootstrap.css.jquery和ph ...
文字滚动插件（css3动画）- 代码篇
文字滚动插件(css3动画)- 代码篇效果图动画: templete代码如下: <div class="list"><div class="rowup ...
css ltimg gt只适应,css3动画,CSS3实战小技巧--使用CSS变量实现波浪动画
css3动画,CSS3实用技巧--利用CSS变量实现波浪动画.今日头条新闻(www.leadip.com)为您带来相关内容的详细介绍. CSS3实用技巧--用CSS变量实现波浪动画 2017年3月,微 ...
css 文字颜色渐变 animation,css3文字渐变动画
这次给大家带来css3文字渐变动画,实现css3文字渐变动画的注意事项有哪些,下面就是实战案例,一起来看一下. 利用css3这个属性(背景剪裁): background-clip: border-bo ...
HTML荧光文字动态效果,CSS3荧光灯文字闪烁动画特效
这是一款纯CSS3荧光灯文字闪烁动画特效.该特效在HTML结构中将文字拆分为单个span元素,然后通过CSS3代码来制作荧光灯和闪烁特效. 使用方法 HTML结构 J Q u e r y CSS样式 ...
css3动画应用-音乐唱片旋转播放特效
css3动画应用-音乐唱片旋转播放特效核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...
html 鼠标图标做成动画效果,很好看的css3动画按钮鼠标悬停效果【2个实例】
前一篇文章我介绍了5个悬停效果非常漂亮的css3动画按钮实例,本文将再通过2个实例介绍悬停效果很酷的css3实现的动画按钮. 实例一实例一:css3实现的动画按钮我们做一个有星星的圆形按钮!当然, ...

跳动的文字：CSS3动画、倒影、变量

跳动的文字：CSS3动画、倒影、变量相关推荐

最新文章

热门文章