如何使用纯CSS3的transform实现心动效果
如何使用纯CSS3的transform实现心动效果
这篇文章主要介绍如何使用纯CSS3的transform实现心动效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
心动
送一个爱心表示我对你心动,使用纯 CSS3 的transform实现：
css 部分
html,body{height:100%;}body{margin:0;padding:0;background:#ffa5a5;display:flex;justify-content:center;align-items:center;}.chest{width:500px;height:500px;position:relative;display:flex;justify-content:center;align-items:center;}.heart{position:absolute;z-index:2;background:linear-gradient(-90deg,#F50A450%,#d5093c40%);animation:beat0.7sease0sinfinitenormal;}.heart.center{background:linear-gradient(-45deg,#B807340%,#d5093c40%);}.heart.top{z-index:3;}.sided{top:100px;width:220px;height:220px;border-radius:110px;}.center{width:210px;height:210px;bottom:100px;left:145px;transform:rotateZ(225deg);}.left{left:62px;}.right{right:62px;}.title{z-index:999;text-shadow:5px5px5px#ff7f00;}@keyframesbeat{0%{transform:scale(1)rotate(225deg);box-shadow:0040px#d5093c;}50%{transform:scale(1.2)rotate(225deg);box-shadow:0070px#d5093c;}100%{transform:scale(1)rotate(225deg);box-shadow:0040px#d5093c;}}
html 部分
<htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>W3Cschool恰卡编程网</title><linkhref="./flower.css"type="text/css"rel="stylesheet"></head><body><divclass="chest"><divclass="heartleftsidedtop"></div><divclass="heartcenter"></div><divclass="heartrightsided"></div><h2class="title">W3Cschool恰卡编程网</h2></div></body></html>
以上是“如何使用纯CSS3的transform实现心动效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注恰卡编程网行业资讯频道！
