3D爱心漂亮代码
1 2 3 4 53daixin - 锐客网 6 7body{ 8background:black; 9} 10.heart3d{ 11position:relative; 12width: 100px; 13height: 160px; 14/*border: 2px solid red; 15border-left:0; 16border-bottom: 0; */ 17margin:50px auto; 18/*border-radius:50% 50% 0/40% 50% 0; /*斜杠前面是水平方向 斜杠后面是竖直方向 顺序是顺时针*/ 19/*transform: rotate(45deg); */ 20animation: rot 20s linear infinite; /*自定义旋转旋转名称 20s 匀速旋转 无限重复*/ 21transform-style:preserve-3d; 22} 23/*关键帧:定义改变的值*/ 24@keyframes rot{ 25form{transform: rotateY(0deg)} 26to{transform:rotateY(360deg)} 27} 28.heart3d div{ 29position: absolute; 30left:0; 31top:0; 32width: 100px; 33height: 160px; 34border: 2px solid red; 35border-left:0; 36border-bottom: 0; 37/*margin:50px auto; */ 38border-radius:50% 50% 0/40% 50% 0; /*斜杠前面是水平方向 斜杠后面是竖直方向 顺序是顺时针*/ 39transform: rotate(45deg); 40} 41 42 43 44 45 46 60 61
【3D爱心漂亮代码】
转载于:https://www.cnblogs.com/bianshiguang/p/10964670.html
推荐阅读
- CVE-2020-16898|CVE-2020-16898 TCP/IP远程代码执行漏洞
- 不废话,代码实践带你掌握|不废话,代码实践带你掌握 强缓存、协商缓存!
- 工具|后天就是七夕节,你准备好了吗(送上几个七夕代码,展示你技能的时候到了!)
- 《机器学习实战》高清中文版PDF英文版PDF+源代码下载
- 霍兰德职业代码对照表
- Hexo代码块前后空白行问题
- 前端代码|前端代码 返回顶部 backToTop
- 11-代码注入
- 代码不规范容易造成的bug
- 事件解绑与解绑的兼容代码