html： 用CSS画一个会动的爱心 |
您所在的位置：网站首页 › 表情包构成爱心图片 › html： 用CSS画一个会动的爱心 |
|
前言
今天分享一个HTML动画的小技巧，完全用CSS来画一个会动的爱心。动画效用的就是CSS的animation属性，但是爱心图案并不是图片，而是用CSS拼出来的，这个小技巧还是有令人眼前一亮的感觉。 废话不多说，直接来看看如何实现吧。 先来看一下最终的动态效果图是怎么样的： 接下来就是重点了，直接给出实现的代码，实现代码： animation *{ margin: 0; padding: 0 } body { width: 100vw; height: 100vh; display: flex; background: grey; justify-content: center; align-items: center; } #ht { width: 200px; height: 200px; background: red; transform: rotate(45deg); animation-duration: 3s; animation-name: heart; animation-fill-mode: forwards; } #ht:before{ content: ""; width: 200px; height: 200px; background: red; position: absolute; border-radius: 50%; transform: translateX(-100px); } #ht:after{ content: ""; width: 200px; height: 200px; background: red; position: absolute; border-radius: 50%; transform: translateY(-100px); } p { font-size: 2em; color: blue; position: absolute; top: 30px; left: -6px; transform: rotate(-45deg); animation-name: words; animation-duration: 2s; animation-delay: 3s; z-index: 1; opacity: 0; animation-fill-mode: forwards; } @keyframes heart{ 25% { transform: rotate(45deg) scale(1) } 50% { transform: rotate(45deg) scale(0.5) } 75% { transform: rotate(45deg) scale(1) } 85% { transform: rotate(45deg) scale(0.5) } 100% { transform: rotate(45deg) scale(1); } } @keyframes words{ 100% { transform: rotate(315deg); opacity: 0.8; } }I O U 上面的代码可以实现一个动态的爱心，不过动态效果并不是无限次重复动的，当打开网页后，爱心大小会收缩和放大，如此变化三次爱心静止后‘I O U’三个字母就是旋转着出现。是不是有点‘心动’了，感兴趣的可以试一试。 最后周末没事学习了一下CSS的animation，觉得挺好玩的就发出来分享了。emm，今天就分享到这里了。 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |