<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动画小心心</title>
<style>
#father{
width: 200px;
height: 200px;
/*background: orange;*/
/*让盒子水平居中*/
margin: 0 auto;
transition: 1s;
/*其中nn是自己定义的动画帧，1s是整个动画的秒数，infinite是永久循环*/
animation: nn 1s infinite;
}
/*：hover表示鼠标移上*/
/*#father:hover{*/
/*background: yellow;*/
/*放大1.5倍*/
/*transform: scale(1.5);
transition: 1s;
}*/
#box01,#box02{
width: 100px;
height: 150px;
background: red;
/*左上角 右上角 右下角 左下角*/
border-radius:50px 50px 0px 0px;
float: left;
animation: big1 1s infinite;
}
#box01{
/*变形属性*/
transform: rotate(-45deg);
/*旋转中心*/
transform-origin: 100px 50px;
}
#box02{
transform: rotate(45deg);
transform-origin: 0px 50px;
}
@-webkit-keyframes nn{
from{transform: scale(1);}
to{transform: scale(1.2);}
}
@-webkit-keyframes big1{
0%{
background-color: red;
}
25%{
background-color: orange
}
50%{
background-color: red;
}
100%{
background-color: red;
}
}
</style>
</head>
<body>
<div id="father">
<div id="box01"></div>
<div id="box02"></div>
</div>
</body>
</html>
H5+CSS3实现动画小心心
猜你喜欢
转载自blog.csdn.net/weixin_38694789/article/details/89413797
今日推荐
周排行