Css实现心跳
//样式
<style>
body {
background: #fff;
}
.heart,.test {
margin: 100px auto; /* 内容居中 */
width: 200px; /* 定义宽高 */
height: 200px;
/* border: 1px solid #0094ff; */
/* 定位 */
position: relative;
/* 调用动画 */
animation:shake .5s infinite;
}
.heart div,.test div {
width: 100%;
height: 100%;
/* 位置操作 */
position: absolute;
/* 背景颜色 */
background: #900;
/* 调用动画 */
animation:shadow .5s infinite;
}
/* <!-- 旋转正方形 --> */
.topLeft {
transform: translate(-50px, 0) rotate(-45deg);
}
.topRight {
transform: translate(50px, 0) rotate(45deg);
}
.bottom {
transform: translate(0, 64px) rotate(45deg) scale(.9, .9);
}
.topLeft, .topRight {
/*定义心形圆角*/
border-radius: 100px 100px 0px 0px;
}
@@keyframes shake {
0% {
transform: scale(.9, .9);
}
100% {
transform: scale(1.1, 1.1);
}
}
@@keyframes shadow {
0% {
box-shadow: 0px 0px 0px #900;
}
100% {
box-shadow: 0px 0px 50px #900;
}
}
</style>
/*爱心盒子*/
<body><div class="heart">
<!-- 左侧心形 -->
<div class='topLeft'></div>
<!-- 右侧心形 -->
<div class='topRight'></div>
<!-- 心底部 -->
<div class='bottom'></div>
</div>
</body>
需要注意的是 “@@keyframes” 在DW上是一个 @ 在VS上是两个 @@
以上效果图如下（会跳动的）：