跳动的心

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了跳动的心相关的知识,希望对你有一定的参考价值。

<html> 要链接<script src="js/jquery.min.js"></script>文件

<div class="heart">

<div class="left-top"></div>  
<div class="right-top"></div>
<div class="down"></div>
</div>

技术分享

<css>

* {
margin:0;
padding: 0;
}
body {
width: 100%;
background-color: #000;
}
.heart {
width: 200px;
height: 200px;
position: relative; /* 三个定位可以让三个div组合在一起 */
margin:0 auto;
top:100px;
animation: shake 0.5s 0s infinite; /*动画名 完成一个周期所需要的时间s/ms 延迟时间 播放次数-无线循环*/
}
.left-top, .right-top{
width: 200px;
height: 200px;
background: #f00;
border-radius: 100px 100px 0 0; /* 上 右 下 左 */
position: absolute;
box-shadow: 0px 0px 50px red; /*阴影 水平阴影 垂直阴影 阴影范围 颜色*/
}
.down {
width: 200px;
height: 200px;
background: #f00;
position: absolute;
box-shadow:0px 0px 50px red; /*阴影 水平阴影 垂直阴影 阴影范围 颜色*/
transform: translate(0,64px) rotate(45deg) scale(0.9,0.9); /* translate 位移 rotate 旋转 scale 缩放 */
}
.left-top {
transform: translate(-50px,0) rotate(-45deg);
}
.right-top {
transform: translate(50px,0) rotate(45deg); /* translate 位移 rotate 旋转 */
}
/*定义动画*/
@keyframes shake {
from {
transform:scale(0.9,0.9);
}
to {
transform:scale(1.1,1.1);
}
}


















































以上是关于跳动的心的主要内容,如果未能解决你的问题,请参考以下文章

html 跳动的心

跳动的心

边框圆角练习--跳动的心

html跳动的心实现代码

用css3做出简单动画:跳动的心

Matlab绘制跳动的心