IT编程 > 网页制作 > HTML

前端利用伪元素+动画效果制作一个跳动的心

79人参与2020-08-08

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: crimson; margin: 250px auto; transition: 2s; animation: heart 2s infinite linear; } /* 在div后面添加半个圆 */ div::after { content: ''; width: 200px; height: 200px; display: inline-block; border-radius: 50%; background-color: crimson; position: relative; top: -300px; left: 0; } div::before { content: ''; width: 200px; height: 200px; display: inline-block; border-radius: 50%; background-color: crimson; position: relative; /* top: -120px; */ left: -100px; } @keyframes heart { 0%, 100% { transform: scale(0.5) rotateZ(45deg); } 50% { transform: scale(1.1) rotateZ(45deg); } } </style> </head> <body> <div id="xin"></div> </body> </html> 

在这里插入图片描述
觉得不错的点个赞吧!!!

本文地址:https://blog.csdn.net/blinH/article/details/107869416

您对本文有任何疑问!!点此进行留言回复

推荐阅读

猜你喜欢

前端利用伪元素+动画效果制作一个跳动的心

08-08

京训钉自动播放,京训钉自动续播,京训钉刷课时,京训钉自动关弹窗,京训钉自动下一课

08-08

页面各种布局的整理

08-08

贡献一个CSS心形加载的动画源码

08-08

jquery如何封装,简单实例

08-08

浏览器兼容设置 + 拖拽封装

08-08

拓展阅读

大家都在看

音视频编解码:NVIDIA Jetson Linux Multimedia API(总结)

12-04

前端页面点击图片放大功能(viewerjs插件的简单而强大)

08-20

WVP+ZLMediaKit+MediaServerUI实现摄像头GB28181推流播放录制

08-12

京训钉自动播放,京训钉自动续播,京训钉刷课时,京训钉自动关弹窗,京训钉自动下一课

08-12

解决uniapp小程序打包体积超过2M,提示包体积超过2M,“main packagexxx”,不给上传和预览的解决办法,绝对有效!

08-14

R2S搭配即插即用的4G Cat4实现4G转有线以太网的应用演示

11-17

R2S搭配即插即用的4G Cat4实现4G转有线以太网的应用演示

11-17

i5 1135g7和i5 9300h 相差多少

11-17

热门评论