小程序视频源码前端animation编程练习

如今有一些比较炫酷的小程序视频源码礼物动画效果,比如小程序视频源码中部有一个banner元素在网页加载完成后2s慢慢从透明到不透明浮现出来。那么我们也来尝试一下吧。

任务:
创建一个div,用CSS控制其大小、边框、字体、位置等。
设置元素的动画名称和动画持续时间。
编写动画。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>前端animation编程练习01</title>
		<style type="text/css">
			div{
				font-family: 'Microsoft Yahei';
				font-size: 60px;
				font-weight: bold;
				line-height: 600px;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				width: 800px;
				height: 600px;
				margin: auto;
				text-align: center;
				border: 5px solid #000000;
				border-radius: 50%;
				-webkit-animation-name: banner;
				   -moz-animation-name: banner;
			    	-ms-animation-name: banner;
				     -o-animation-name: banner;
				        animation-name: banner;
				-webkit-animation-duration: 2s;
				   -moz-animation-duration: 2s;
				    -ms-animation-duration: 2s;
				     -o-animation-duration: 2s;
				        animation-duration: 2s;
			}
			@keyframes banner{
				from{opacity: 0;}
				to{opacity: 1;}
			}
		</style>
	</head>
	<body>
		<div>大家好!</div>
	</body>
</html>
发布了150 篇原创文章 · 获赞 65 · 访问量 17万+

猜你喜欢

转载自blog.csdn.net/yb1314111/article/details/105222983
今日推荐