一个简单的跳动爱心

最新推荐文章于 2024-10-09 14:44:12 发布

夏日の柠檬茶

最新推荐文章于 2024-10-09 14:44:12 发布

阅读量161

点赞数 1

文章标签： css3 css html

本文链接：https://blog.csdn.net/qq_54669583/article/details/140995184

版权

html

<html lang="en"><head> 
<meta charset="UTF-8">
 <title>跳动爱心</title> 
<style> 
</style> 
</head> 
<body> 
<div id="frame"> 
    <div class="heart left"></div> 
    <div class="heart right"></div> 
    <div class="heart bottom"></div> 
</div> 
</body></html>

css样式

*{ padding: 0; margin: 0; }
body{ background-color: pink; } 
#frame{ position: relative; width: 400px; height: 300px; margin: 250px auto; }
.left,.right{ top: 0; width: 200px; height: 200px; border-radius: 50%; } 
.left{ left: 35px; }
.right{ right: 35px; z-index: -1; }
.bottom{ bottom: 36px; left: 100px; width: 200px; height: 200px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); z-index: -1; } 
.heart{ position: absolute; box-shadow:0 0 40px #d5093c; animation: beat .8s ease infinite normal; background: linear-gradient(-90deg, #F50A45 0%, #d5093c 40%); }
@keyframes beat { 0%{ transform: scale(1) rotate(225deg); -webkit-transform: scale(1) rotate(225deg); -moz-transform: scale(1) rotate(225deg); -o-transform: scale(1) rotate(225deg); box-shadow:0 0 40px #d5093c; } 50%{ transform: scale(1.1) rotate(225deg); -webkit-transform: scale(1.1) rotate(225deg); -moz-transform: scale(1.1) rotate(225deg); -o-transform: scale(1.1) rotate(225deg); box-shadow: 0 0 70px #d5093c; } 100%{ transform: scale(1) rotate(225deg); -webkit-transform: scale(1) rotate(225deg); -moz-transform: scale(1) rotate(225deg); -o-transform: scale(1) rotate(225deg); box-shadow: 0 0 40px #d5093c;; } }

运行就可以得到一个跳动的