web前端学习8-css动画

最新推荐文章于 2024-07-26 08:00:00 发布

修罗_

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量112

点赞数

分类专栏： web前端新手必看16篇文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_45843676/article/details/106716574

版权

web前端新手必看16篇专栏收录该内容

16 篇文章 1 订阅

订阅专栏

学习8-css动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css动画</title>
		<style type="text/css">
			p{
				width: 100px;
				height: 100px;
				background-color: antiquewhite;
			}
			p:hover{
				animation-duration: 5000ms;/* 动画时长 */
				animation-delay: 1s;/* 动画开始时间 */
				animation-name: kaopu;/* 取name */
				animation-iteration-count: infinite;
				/* 动画无限循环属性值可以为--正整数-- */
			}
			@keyframes kaopu{
				/* 这里过渡和动画的区别
				动画完成变化后会回到初始值
				 而过渡是固定的*/
				/* 这里from和to我喜欢称之为头和尾
				鼠标放在上面动画的变化是从from再到to 
				当移开鼠标是就会恢复初始值
				然后三个百分比值就是向你们想的那样
				他们是详细的过程设置*/
				from{/* 动画头 */
					width: 10px;
					height: 10px;
					background-color: black;
				}
				25%{
					width: 100px;
					height: 100px;
					background-color: red;
				}
				50%{
					width: 200px;
					height: 200px;
					background-color: blue;
				}
				75%{
					width: 150px;
					height: 150px;
					background-color: white;
				}
				to{/* 动画尾 */
					width: 110px;
					height: 110px;
					background-color: #00FFFF;
				}
			}
		</style>
	</head>
	<body>
		<p></p>
	</body>
</html>

文章仅供参考

修罗_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
web前端学习8-css动画

学习8-css动画<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>css动画</title> <style type="text/css"> p{ width: 100px; height: 100px; background-color: antiquewhite; } p:hover{
复制链接

扫一扫