H5+CSS3实现动画小心心

最新推荐文章于 2023-09-20 10:54:59 发布

有梦想的程序猿

最新推荐文章于 2023-09-20 10:54:59 发布

阅读量1k

点赞数

分类专栏：大前端

本文链接：https://blog.csdn.net/weixin_38694789/article/details/89413797

版权

大前端专栏收录该内容

38 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动画小心心</title>
		<style>
			#father{
				width: 200px;
				height: 200px;
				/*background: orange;*/
				/*让盒子水平居中*/
				margin: 0 auto;
				transition: 1s;	
				/*其中nn是自己定义的动画帧，1s是整个动画的秒数，infinite是永久循环*/
				animation: nn 1s infinite;
				
			}
			/*：hover表示鼠标移上*/
			/*#father:hover{*/
				/*background: yellow;*/
				/*放大1.5倍*/
				/*transform: scale(1.5);
				transition: 1s;
			}*/
			#box01,#box02{
				width: 100px;
				height: 150px;
				background: red;
				/*左上角  右上角  右下角  左下角*/
				border-radius:50px 50px 0px 0px;
				float: left;
				animation: big1 1s infinite;
			}
			#box01{
				/*变形属性*/
				transform: rotate(-45deg);
				/*旋转中心*/
				transform-origin: 100px 50px;
			}
			#box02{
				transform: rotate(45deg);
				transform-origin: 0px 50px;
			}
			@-webkit-keyframes nn{
				from{transform: scale(1);}
				to{transform: scale(1.2);}
			}
			@-webkit-keyframes big1{
				
				0%{
					background-color: red;
				}
				25%{
					background-color: orange
				}
				50%{
					background-color: red;
				}
				100%{
					background-color: red;
				}
			}
		</style>
	</head>
	<body>
		<div id="father">
			<div id="box01"></div>
			<div id="box02"></div>
		</div>
	</body>
</html>

有梦想的程序猿

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
H5+CSS3实现动画小心心

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>动画小心心</title> <style> #father{ width: 200px; height: 200px; /*background: o...
复制链接

扫一扫