学习了HTML和CSS之后可以实现许多绚丽的效果,因此做了一个心脏跳动的小项目巩固所学的知识,具体实现如下:
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background-color: #FFA5A5;
}
.cen{
width: 200px;
height: 200px;
background-color: #d5093c;
box-shadow: 0px 0px 70px #d5093c;
animation: 1s aj infinite;
}
.left{
/*倒圆角 一个参数表示四个都要改,两个参数表示左上角和右下角要改,四个参数表示按顺时针4个都要改*/
border-radius: 100px;
position: absolute;
top: 100px;
left: 200px;
}
.mid{
/*旋转角度*/
transform: rotate(45deg);
position: absolute;
top: 166px;
left: 267px;
}
.right{
border-radius: 100px;
position: absolute;
top: 100px;
left: 333px;
}
/*.cen:hover{*/
/*放大*/
/*transform: scale(1.3);*/
/*位移*/
/*transform: translate(0px ,20px);*/
/*transform: skew(45deg);*/
/*}*/
/*动画*/
@keyframes aj{
0%{transform: scale(1) rotate(45deg);}
50%{transform: scale(1.1) rotate(45deg);}
100%{transform: scale(1) rotate(45deg);}
}
</style>
</head>
<body>
<div class="cen left">
</div>
<div class="cen mid">
</div>
<div class="cen right">
</div>
</body>
</html>
所用到的知识点总结如下:
CSS3中常用的属性
/*倒圆角指令*/
border-radius: 100px;
/* 左上右下 右上左下 */
/*border-radius:10px 60px;*/
/*border-radius:10px 20px 30px 40px;*/
/*旋转角度*/
transform: rotate(45deg);
/*放大的倍数*/
/*transform: scale(1.3);*/
/* X:水平的位移 Y :垂直的位移 负数:上*/
/*transform: translate(0px,-5px);*/
/*2D角度的旋转 X Y*/
transform: skew(40deg,45deg);
/*阴影 水平方向的偏移 垂直方向的偏移 模糊度 阴影的颜色*/
box-shadow: 0px 0px 70px #D5093C;
CSS3中的动画标签
@-ms-keyframes name{
from{}
to{}
}
@-ms-keyframes name{
0%{}
50%{}
100%{}
}
执行结果: