简介
使用CSS动画animation 和tranform（缩放、旋转）。
实现步骤
- 添加p元素内容之前/之后插入，一个宽为100px,高为160px的效果。
- 分别给增加左上角，右上角圆角效果
- 对插入元素前元素，进行**（旋转原点为右下角，进行顺时针旋转45度）**。
- 对插入元素后元素进行**（旋转原点为左下角，进行逆时针旋转45度）**，
- 两个效果旋转后效果叠加，形成一个心型。
- 然后通过添加放大1倍的动画，实现心跳效果。
代码
<!DOCTYPE html>
<html>
<head>
<title>跳动的心</title>
<meta charset="utf-8"/>
<style type="text/css">
*{
margin:0;
padding:0;
}
.wrap{
width:200px;
height: 160px;
margin:200px auto;
}
.wrap p{
width:200px;
height: 160px;
position: relative;
animation: drop 4s infinite;/*drop-动画名 4s-动画周期 infinite: 动画播放次数：永远*/
background-color: transparent; /*test color*/
}
@keyframes drop{ /*原图，放大一倍，再恢复到原图 */
0%{
transform:scale(1); /*transform：2D、3D转换,旋转、缩放、移动、倾斜*/
}
50%{
transform:scale(2);/*扩大到4倍*/
}
to{
transform: scale(1);
}
}
.wrap p:before{ /*在某元素的内容之前插入新内容： 右下角为旋转原点，旋转45度*/
content: '';
position: absolute;
left:0;
top:0;
width:100px;
height: 160px;
border-radius:100px 100px 0 0;/*添加圆角边框，左上角 右上角 右下角 左下角（顺时针）*/
transform:rotate(45deg); /*2D旋转 45度*/
transform-origin: right bottom;/*转换起点*/
background-color:red;
}
.wrap p:after{/*在某元素的内容之后插入新内容*/
content: '';
position: absolute;
right: 0;
top:0;
width: 100px;
height: 160px;
border-radius:100px 100px 0 0;
background-color: red;
transform:rotate(-45deg);
transform-origin:left bottom;
}
</style>
</head>
<body>
<div class="wrap">
<p></p>
</div>
</body>
</html>
效果
288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
