CSS3心形效果代码 |
您所在的位置：网站首页 › html爱心图形代码 › CSS3心形效果代码 |
CSS3心形效果代码
|
标签：abs tle cimage name cal relative back rip infinite 利用css3实现了心形效果，并且还能够跳动。
代码实例如下: web前端开发学习q群：767273102 技术分享，欢迎基础小伙伴 #myheart { position: relative; width: 150px; height: 220px; } #myheart:before,#myheart:after { position: absolute; left: 100px; background: red; height: 160px; width: 100px; content: ""; border-radius: 50px 50px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; } #myheart:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; } @keyframes heart { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(0.8); } 100% { -webkit-transform: scale(1); } } .myheart { position: absolute; top: 40%; left: 40%; animation: heart 1.5s linear infinite; }CSS3心形效果代码 标签：abs tle cimage name cal relative back rip infinite 原文地址：https://blog.51cto.com/14458119/2427446 |
【本文地址】
今日新闻 |
推荐新闻 |