html 跳动的心
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html 跳动的心相关的知识,希望对你有一定的参考价值。
<style>
.back {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
animation-name: backdiv;
animation-duration: 1s;
animation-iteration-count: infinte;
}
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
animation-name: beat;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.heart:after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart:before {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
@keyframes backdiv {
50% {
background: #ffe6f2;
}
}
@keyframes beat {
0% {
transform: scale(1) rotate(-45deg);
}
50% {
transform: scale(0.6) rotate(-45deg);
}
}
</style>
<div class="back"></div>
<div class="heart"></div>
以上是关于html 跳动的心的主要内容,如果未能解决你的问题,请参考以下文章
html跳动的心实现代码
跳动的心
跳动的心 有阴影 跳动
边框圆角练习--跳动的心
七夕来袭,是时候展现专属于程序员的浪漫了- 跳动的心和摇晃的红酒杯
七夕来袭,是时候展现专属于程序员的浪漫了- 跳动的心和摇晃的红酒杯