本文作者:心月

通过animation的animation-delay属性实现字节跳动特效

心月IT博客 2019-09-27
通过animation的animation-delay属性实现字节跳动特效摘要:在css3出现以前,想要在网页上实现动画特效几乎都是通过JavaScript或JavaScript的相关插件来实现,但css3出现后,利用css3的animation属性就可以实现很多我们想要的动画特效,而不必再依赖JavaScript。

        在css3出现以前,想要在网页上实现动画特效几乎都是通过JavaScript或JavaScript的相关插件来实现,但css3出现后,利用css3的animation属性就可以实现很多我们想要的动画特效,而不必再依赖JavaScript。

        “字节跳动”是一个在ppt幻灯片中很常用的特效,它可以很好的把我们的视觉注意力引到字节跳动的地方。今天就来跟大家一起分享:通过css3的animation属性来实现“字节跳动特效”。

        我们先来看看效果图:

css字节跳动特效

        为了大家能更好的理解动画特效,先来介绍下animation的用法和一些相关属性

animation: letter 1s cubic-bezier(0.1,0.5,0.2,1) infinite alternate;

letter:动画名称,(可以简单理解为一组css样式的名称);

1s:表示动画完成一次所花的时间;

cubic-bezier(0.1,0.5,0.2,1):动画运动曲线,括号里的四个数字表示两个(x,y)坐标点,前两个数字是第一个坐标点,后两个数字是第二个坐标点;

infinite:表示无限循环,或者改成数字,表示想要循环运动的次数;

alternate:表示动画在奇数次播放时为正向播放,为偶数次播放时为反向播放,默认为始终正向播放;

        如果只是如上的设置,结果是所有文字都是一起动的,因此还有个属性animation-delay:动画开始前端延迟时间,因为字节跳动是一个一个字的动,因此还需要给每个字都设置延迟时间。

属性介绍完了,下面上代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			body{
				background-color: #0099ff;
				
			}
			div{
				text-align: center;
				margin: 200px auto;
			}
			span{
				position: relative;
				text-align: center;
				color: white;
				font-size: 42px;
				animation: letter 1s cubic-bezier(0.1,0.5,0.2,1) infinite alternate;
                top: 0px;
				
			}
			span:nth-child(1){
				animation-delay: 0s;
			}
			span:nth-child(2){
				animation-delay: 0.1s;
			}
			span:nth-child(3){
				animation-delay: 0.2s;
			}
			span:nth-child(4){
				animation-delay: 0.3s;
			}
			span:nth-child(5){
				animation-delay: 0.4s;
			}
			span:nth-child(6){
				animation-delay: 0.5s;
			}
			span:nth-child(7){
				animation-delay: 0.6s;
			}
			span:nth-child(8){
				animation-delay: 0.7s;
			}
			span:nth-child(9){
				animation-delay: 0.8s;
			}
			span:nth-child(10){
				animation-delay: 0.9s;
			}
			
			/*
			*letter对应animation中的letter
			*from表示起始状态
			*top表示结束状态
			*/
			@keyframes letter{
				from{
					top: 0px;
				}
				to{
					top: 50px;
				}
			}
		</style>
	</head>
	<body>
		<div>
			<span>欢</span>
			<span>迎</span>
			<span>来</span>
			<span>到</span>
			<span>心</span>
			<span>月</span>
			<span>I</span>
			<span>T</span>
			<span>博</span>
			<span>客</span>
			
		</div>
	</body>
</html>

animation-delay:延迟时间越短运动的越快,在实际使用中需自己把握。

文章版权及转载声明:

本文由 心月IT技术博客 博主整理于 2019-09-27
若转载请注明原文及出处:https://www.xinyueseo.com/webfe/334.html

分享到:
赞(
发表评论
快捷输入:

验证码

    评论列表 (有 1 条评论,人围观)参与讨论
    网友昵称:心月IT博客网友
    心月IT博客网友游客2019-09-27回复
    支持