css3动画Animation之完成一个心跳动画

最新推荐文章于 2024-05-10 13:05:51 发布

gxgalaxy

最新推荐文章于 2024-05-10 13:05:51 发布

阅读量1.8k

点赞数 1

分类专栏： css3 前端

本文链接：https://blog.csdn.net/gxgalaxy/article/details/89219004

版权

前端同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

css3

5 篇文章 0 订阅

订阅专栏

1.@keyframes规则：要想创建CSS3动画，必须了解@keyframes规则。@keyframes规则是创建动画，在这个规则内指定一个CSS样式和动画，然后逐步从目前样式更改为新的样式。

2.注意：当在@keyframes创建动画的时候，必须将它绑定到一个选择器，否则动画将不会有任何效果。其中包括动画的名称，还有动画的时常。

@keyframes	规定动画
animation-name	规定@keyframes动画名称
animation-duration	规定动画完成一个周期花费的秒数
animation-delay	规定动画何时开始
animation-timing-function	规定动画的曲线速度
animation-animation-play-state	规定动画的状态（运行或者暂停）
animation-iteration-count	规定动画循环的次数，infinite是无限次
animation-fill-mode	规定当动画不播放时，要应用到的样式
ainmation-direction	规定动画在循环过程中是否反方向运动，默认值normal，alternate（正常与反向交替）

4.@keyframes:关键帧，每个阶段用百分比来表示。

5.例子：用CSS3完成一个心跳动画代码如下

<!DOCTYPE html>
 <html>
<meta charset="utf-8">
<mate name="viewport" content="width=device-width,initial-scale=1.0">
<mate http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" type="text/css" href="">
 <head>
 	<title>心跳</title>
 	<style type="text/css">
 		*{
 			padding: 0;
 			margin: 0;
 		}
 		body{
 			background-color: black;
 		}
 		.heart{
 			margin: 100px auto;
 			width: 200px;
 			height: 200px;
 			position: relative;
 			animation-name: shake;  /*调用动画*/
 			animation-duration: 0.5s;/*  跳动时间*/
 			animation-iteration-count: infinite;  /*跳动次数*/
 		}
 		.heart div{
 			width: 100%;   /*不知道确定宽高时设置成100%*/
 			height: 100%;
 			background-color: pink;
 			position: absolute;   /*绝对定位*/
 			animation: shadow 0.5s infinite;  /*调用动画*/
 			
 			
 		}
 		.topLeft,.topRight{
 			border-radius:100px 100px 0 0;   /*心形上半部分*/
 		}
 		.topLeft{
 			transform: translate(-100px,0) rotate(-45deg); /*旋转*/   /*转换位移css3中的知识*/
 		}
 		.topRight{
 			transform: translate(100px,0) rotate(45deg);
 		}
 		.bottom{
 			transform: translate(0,100px) rotate(45deg);
 		}
 		/*关键帧，每一步所展现的效果  */
 		/*定义*/
 		@keyframes shake{
 			0%{
 				transform: scale(0.9,0.9);  /*缩放*/
 				}  /*起止状态*/
 			100%{
 				transform: scale(1.1,1.1);  /*放大*/
 				}  /*终止状态*/
 		}
 		@keyframes shadow{
 			0%{
 				box-shadow: 0 0 0 pink;
 			}
 			100%{
 				box-shadow: 0 0 50px pink;
 			}
 		}
 	</style>
 </head>
 <body>
 	<div class="heart">
 		<div class="topLeft"></div>
 		<div class="topRight"></div>
 		<div class="bottom"></div>
 		<!-- 谁在后面谁在上面 -->
 	</div>
 
 </body>
 </html>

gxgalaxy

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css3动画Animation之完成一个心跳动画

1.@keyframes规则：要想创建CSS3动画，必须了解@keyframes规则。@keyframes规则是创建动画，在这个规则内指定一个CSS样式和动画，然后逐步从目前样式更改为新的样式。2.注意：当在@keyframes创建动画的时候，必须将它绑定到一个选择器，否则动画将不会有任何效果。其中包括动画的名称，还有动画的时常。3.@keyframes 规定动画 a...
复制链接

扫一扫

专栏目录