前言
今天总结了很多css动画属性相关知识,就把前几天做的动画属性做的小demo,顺带总结到我的CSDN中,便于自己对于知识的加深。直戳要点了:
实现思路
1.文档结构,使用伪元素创建两个小模块,使其在父元素两边。
2.border-radius属性设置心型两个圆角效果
3.使用transform-origin将连个伪元素创建块,有着相同的旋转点。
效果图如下:
实现demo代码如下:
<!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;
background-color: transparent; /*test color*/
}
@keyframes drop{
0%{
transform:scale(1);
}
50%{
transform:scale(2);
}
to{
transform: scale(1);
}
}
.wrap p:before{
content: '';
position: absolute;
left:0;
top:0;
width:100px;
height: 160px;
border-radius:100px 100px 0 0;
transform:rotate(45deg);
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>
生活寄语
【摘抄】 凡是你想控制的,其实是控制了你。愿岁月锤炼你一副丰满的灵魂和清瘦的欲望!