利用CSS和HTML实现动画

最新推荐文章于 2024-08-23 10:02:01 发布

小希一夏

最新推荐文章于 2024-08-23 10:02:01 发布

阅读量902

点赞数 1

文章标签： CSS HTML 动画

本文链接：https://blog.csdn.net/weixin_42454678/article/details/99612492

版权

学习了HTML和CSS之后可以实现许多绚丽的效果，因此做了一个心脏跳动的小项目巩固所学的知识，具体实现如下：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		body{
			background-color: #FFA5A5;
		}
			
			.cen{
				width: 200px;
				height: 200px;
				background-color: #d5093c;
				box-shadow: 0px 0px 70px #d5093c;
				animation: 1s aj infinite;
			}
			
			.left{
				/*倒圆角 一个参数表示四个都要改，两个参数表示左上角和右下角要改，四个参数表示按顺时针4个都要改*/
				border-radius: 100px;
				position: absolute;
				top: 100px;
				left: 200px;
			}
			
			.mid{
				/*旋转角度*/
				transform: rotate(45deg);
				position: absolute;
				top: 166px;
				left: 267px;
			}
			
			.right{
				border-radius: 100px;
				position: absolute;
				top: 100px;
				left: 333px;
			}
			
			/*.cen:hover{*/
				/*放大*/
				/*transform: scale(1.3);*/
				/*位移*/
				/*transform: translate(0px ,20px);*/
				/*transform: skew(45deg);*/
			/*}*/
			
			/*动画*/
			@keyframes aj{
				0%{transform: scale(1) rotate(45deg);}
				50%{transform: scale(1.1) rotate(45deg);}
				100%{transform: scale(1) rotate(45deg);}
			}
			
		</style>
	</head>
	<body>
		<div class="cen left">
			
		</div>
		<div class="cen mid">
			
		</div>
		<div class="cen right">
			
		</div>
	</body>
</html>

所用到的知识点总结如下：

CSS3中常用的属性
	
	         	/*倒圆角指令*/
				border-radius: 100px;
				/* 左上右下   右上左下 */
				/*border-radius:10px  60px;*/
				
				/*border-radius:10px 20px 30px 40px;*/
	  
	      
	           /*旋转角度*/
				transform: rotate(45deg);
				/*放大的倍数*/
				/*transform: scale(1.3);*/
				/* X:水平的位移   Y  ：垂直的位移  负数：上*/
			    /*transform: translate(0px,-5px);*/
			    /*2D角度的旋转  X  Y*/
			     transform: skew(40deg,45deg);
	
	           /*阴影   水平方向的偏移  垂直方向的偏移  模糊度 阴影的颜色*/
				 box-shadow: 0px 0px 70px #D5093C;
				 
				 
				CSS3中的动画标签 
				 @-ms-keyframes name{
				from{}
				to{}
			}
			
			@-ms-keyframes name{
				0%{}
				
				50%{}
				
				
				100%{}
			}

执行结果：
在这里插入图片描述