css3动画特效之字节跳动

迈不过友情╰ 2024-04-20 09:16 55阅读 0赞

![20190920165351160.gif][]

代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			*{
    				padding: 0;
    				margin: 0;
    			}
    			body{
    				background-color: #2d303a;
    			}
    			div{
    				text-align: center;
    				margin: 400px auto;
    			}
    			span{
    				position: relative;
    				font: normal 500 6rem 'Varela Round', sans-serif;
    				color: white;
    				animation: bounce 0.75s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate;
    				top: 0px;
    			}
    			span:nth-child(1) {
    			  animation-delay: 0s;
    			}
    			span:nth-child(2) {
    			  animation-delay: 0.0833333333s;
    			}
    			span:nth-child(3) {
    			  animation-delay: 0.1666666667s;
    			}
    			span:nth-child(4) {
    			  animation-delay: 0.25s;
    			}
    			span:nth-child(5) {
    			  animation-delay: 0.3333333333s;
    			}
    			span:nth-child(6) {
    			  animation-delay: 0.4166666667s;
    			}
    			span:nth-child(7) {
    			  animation-delay: 0.520s;
    			}
    			@keyframes bounce {
    			  0% {
    			    top: 0;
    			    text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em;
    			  }
    			  100% {
    			    top: -1em;
    			    text-shadow: rgba(255, 255, 255, 0.9) 0 1em 0.35em;
    			  }
    			}
    		</style>
    		
    	</head>
    	<body>
    		<div>
    			<span >注</span>
    			<span >定</span>
    			<span >孤</span>
    			<span >独</span>
    			<span >终</span>
    			<span >老</span>
    		</div>
    	</body>
    </html>

[20190920165351160.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/98894e9810964155b845698e37e57053.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，55人围观）

还没有评论，来说两句吧...

相关阅读

相关纯css3发光多边形动画特效

[CSS3动效集合][CSS3]：https://www.17sucai.com/pins/tag/5665.html ![在这里插入图片描述][watermark_type

╰半夏微凉°/ 2022年12月23日 09:45/ 0 赞/ 272 阅读

相关三、 CSS3流星雨划过动画特效

文章目录三、CSS3流星雨划过动画特效 3.1 图片预览 3.2 html代码 3.3 style.css代码 ----

忘是亡心i/ 2022年11月12日 10:00/ 0 赞/ 184 阅读

相关纯css3风车旋转动画js特效

[下载地址][Link 1]此风车效果，用到了css3的自定义动画、旋转、圆角、阴影效果来实现 ![1631561083.png][] dd: [Link 1]:

客官°小女子只卖身不卖艺/ 2022年09月12日 01:44/ 0 赞/ 235 阅读

相关鼠标悬停卡片css3动画js特效

[下载地址][Link 1]基于Bootstrap网格布局的图片画廊，css3鼠标hover卡片动画特效。该特效在鼠标悬停或hover到卡片上时，通过CSS3制作一系列的文字和

Love The Way You Lie/ 2022年09月11日 00:29/ 0 赞/ 290 阅读

相关红色爱心跳动CSS3动画

[下载地址][Link 1]使用纯CSS3代码实现的跳动的爱心动画特效，主要用了CSS3里的transform属性。 ![1631150108.png][] dd: [

亦凉/ 2022年09月10日 14:21/ 0 赞/ 168 阅读

相关纯css3蜡烛点燃动画js特效

[下载地址][Link 1]使用纯css3代码实现的蜡烛点燃特效 ![1630567773.png][] dd: [Link 1]: https://yy123.ink

约定不等于承诺〃/ 2022年09月10日 06:24/ 0 赞/ 255 阅读

相关 CSS3卡通企鹅UI动画js特效

[下载地址][Link 1]CSS3卡通企鹅UI动画特效是一款纯css3绘制可爱的企鹅，笨拙的企鹅，卡通企鹅动画特效。 ![7a87efab91edc4e09f94387bc

绝地灬酷狼/ 2022年08月28日 05:40/ 0 赞/ 225 阅读

相关 CSS3 3D圆点波浪动画js特效

[下载地址][Link 1] CSS3 3D圆点波浪动画特效是一款圆点矩阵波浪滚动，3D粒子波浪动画特效。 ![4308a7cb79605fd30938276368fc6b

一时失言乱红尘/ 2022年08月28日 04:53/ 0 赞/ 226 阅读

相关 CSS3特效之翻转

![这里写图片描述][SouthEast] 鼠标悬停，图片翻转 ![这里写图片描述][SouthEast 1] <!doctype html> <html

港控/mmm°/ 2022年07月11日 07:46/ 0 赞/ 241 阅读

相关 CSS3动画特效经典案例【视频教程】

css3特效效果 CSS3动画特效经典案例【推荐教程】这是一个我上传的css3的视频特效教程，后续会不断出新的内容会把vue框架微信小程序的课程都给大家分享完整的视

左手的ㄟ右手/ 2022年03月20日 12:54/ 0 赞/ 222 阅读