css3动画特效之字节跳动

迈不过友情╰ 2024-04-20 09:16 74阅读 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 条评论，74人围观）

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

相关阅读

相关 css3动画特效之字节跳动

[20190920165351160.gif][] 代码如下： <!DOCTYPE html> <html> <head> <...

迈不过友情╰/ 2024年04月20日 09:16/ 0 赞/ 75 阅读

相关纯CSS3文字Loading动画特效

纯CSS3文字Loading动画特效是一款个性的loading文字加载动画。 ![1302312-20180114171344785-1162765010.png][]

快来打我*/ 2023年06月10日 11:28/ 0 赞/ 49 阅读

相关 css3 3D立方体流星动画特效

![在这里插入图片描述][20200720144512921.gif] css代码 { padding:0; margin: 0; }

本是古典何须时尚/ 2023年02月28日 05:29/ 0 赞/ 37 阅读

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

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

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

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

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

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

相关红色爱心跳动CSS3动画

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

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

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

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

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

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

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

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

相关 CSS3特效之翻转

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

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

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

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

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