您的位置：首页 > Web前端 > CSS

纯css画一颗跳动的心

2016-12-01 10:59 155 查看

属性1：transiton：允许css的属性值在一定时间区间内平滑地过渡。

1.        transition-property:执行变换的属性

2.        transition-duration:执行变换的时间

3.        transition-time-function：执行变换的速率

4.        transition-delay:执行变换的延迟时间。

属性2：animation：将动画与名称绑定

1.        animation-name:规定需要绑定到选择器@keyframes的名称。其主要有两个值，IDENT/none。IDENT是由Keyframes创建的动画名，即此处的INDENT要和Keyframes中的IDNET一致。

2.        animation-duration:规定动画完成的时间。

3.        animation-time-function:规定动画曲线。

4.        animation-delay:规定动画开始之前的延迟。

5.        animation-iteration-count:规定动画应该播放的次数。

6.        animation-direction:规定是否应该轮流反向播放动画。

其中：animation-time-function：

1)        linear:动画从头到结尾速度是相同的

2)        ease:默认，动画以低速开始，然后加快，在结束前变慢。

3)        ease-in:动画以低速开始

4)        ease-out:动画以低速结束

5)        ease-in-out：动画以低速开始和结束。

6)        cubic-bezier：又称三次贝塞尔，主要为animation生成速度曲线的函数，规定是cubic-bezier(<x1>,<x2>,<x3>,<x4>)。

从上图我们需要知道的是cubic-bezier的取值范围：

P0:默认值（0,0）
P1：动态取值（x1,y1）
P2：动态取值（x2,y2）
P3：默认值（1,1,）

其中x轴的取值范围是0到1，y轴取值没有规定。

以一条直线放在范围只有1的坐标轴中，并从中间拿出两个点来拉扯（X轴的取值区间是[0,1]，y轴任意），最后形成的曲线就是动画的速度曲线。当我们不为transition添加cubic-bezier或是其他timing-function时，默认曲线是ease。此时的速度曲线是：

几个常用的固定值对应的cubic-bezier值以及速度曲线。

1. ease：cubic-bezier（.25，.1，.25，1）

2. liner：cubic-bezier（0，0，1，1）/cubic-bezier（1，1，0，0）

3. ease-in：cubic-bezier（.42,0,1,1）

4. ease-out：cubic-bezier(0,0,.58,1)

5. ease-in-out：cubic-bezier(.42,0,.58,1)

6. in out .back(来回的缓冲效果)：cubic-bezier(0.68,-0.55,0.27,1.55)

属性3：transform:向元素应2D或3D转换。该属性允许我们队元素进行旋转、缩放、移动或倾斜。transform 函数包括了translate（平移转换）、scale（缩放转换）、rotate（转换）和skew（倾斜转换）。
属性4：transform-origin：指定元素的中心点在哪里，必须配合transform使用。默认情况下，变形的原点在元素的中心点，也就是元素X轴和Y轴的50%处。

animation 类似于transition属性，他们都是随着时间改变元素的属性值。主要区别是transition需要触发一个事件（hover事件或者click事件）才会随时间改变其css属性，而animation 在不需要触发任何事件的情况下也可以随着时间变化来改变元素css的属性值，从而达到一种动画的效果。这样我们就可以直接在一个元素中调用animation 的动画属性，基于这一点，css3的animation 就需要明确的动画属性值，即我们需要keyframes来定义不同时间的css属性值，达到元素在不同时间段变换的效果。

@keyframes:关键帧 keyframes-selector:规定时间百分比

@keyframes animationname{keyframes-selector{css-styles;}}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跳动的心</title>
<style>
*{
margin:0;
padding: 0;
}
body{
background-color: #1a1c24;
}
#heart,#echo{
position: fixed;
width: 300px;
height: 300px;
top: 100px;
left: 250px;

transform: scale(0.95);
}

#heart:before,#heart:after,#echo:before,#echo:after{
content: "";
position:absolute;
top: 40px;
width: 150px;
height: 240px;
background-color: red;
border-radius: 150px 150px 0 0 ;
transform: rotate(-45deg);
transform-origin:0 100%;
}

#heart:before,#echo:before{
left:150px;
}
#heart:after,#echo:after{
left:0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
#heart:after{
box-shadow: inset -6px -6px 0px 6px rgba(255,255,255,0.1)
}
#heart:before{
box-shadow: inset 6px 6px 0px 6px rgba(255,255,255,0.1)
}
#heart i:after{
content: "";
position: absolute;

top: 35%;
left: 15%;
z-index: 10;
font-size: 30px;
font-weight: 100;
color: rgba(255,255,255,0.8);
text-shadow: -1px -1px 0px rgba(0,0,0,0.2);
}
#heart,#echo{
animation-name:heartbeat;
animation-duration:2000ms;
animation-timing-function:cubic-bezier(0,0,0,1.74);
animation-delay:500ms;
animation-iteration-count:infinite;
animation-play-state:running;
}
#echo{
animation-name:echo;
}
@keyframes heartbeat{
0%{transform: scale(0.95);}
100%{transform: scale(0.95);}
50%{transform: scale(1);}
}
@keyframes echo{
0%{opacity: 0.1;transform: scale(1);}
100%{opacity: 0;transform: scale(1.4);}
}
</style>
</head>
<body>
<div id="heart">
<i></i>
</div>
<div id="echo"></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css画爱心 transition transform animation keyframes

相关文章推荐

新的分享

章节导航