如何使用纯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,#F50A45 0%,#d5093c 40%);    animation:beat 0.7s ease 0s infinite normal;}.heart.center {    background:linear-gradient(-45deg,#B80734 0%,#d5093c 40%);}.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: 5px 5px 5px #ff7f00;}@keyframes beat {    0% {    transform:scale(1) rotate(225deg);    box-shadow:0 0 40px #d5093c;}50% {    transform:scale(1.2) rotate(225deg);    box-shadow:0 0 70px #d5093c;}100% {    transform:scale(1) rotate(225deg);    box-shadow:0 0 40px #d5093c;}}

html 部分

                    
        
        
        
        
W3Cschool
    

以上是"如何使用纯CSS3的transform实现心动效果"这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！