1 效果展示
2 源码及环境
使用Hbuilder X进行编码。
new_file.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>七夕练习</title> <style> *{ margin: 0; padding: 0; } body{ background: pink; } .box{ width: 120px; height: 120px; background: #ff0000; /* 使盒子旋转45度, 并设置边距 */ transform: rotate(45deg); margin: 200px auto; animation: love 1s infinite; /* 动画绑定 */ box-shadow: 0 0 20px #ff5500; } /* 爱心形状绘制 */ .box::before, .box::after{ content: ""; /* 给插入的盒子进行定位 */ position: absolute; width: 120px; height: 120px; background: #ff0000; border-radius: 50%; } .box::before{ left: -68px; } .box::after{ top: -68px; } /* 动画绘制 */ @keyframes love{ 0%{ transform: rotate(45deg)scale(0.85); } 50%{ transform: rotate(45deg)scale(1); } 100%{ transform: rotate(45deg)scale(0.85); } } p{ text-align: center; font-size: 30px; font-weight: 520; color: #ffaa00; } </style> </head> <body> <div class="box"></div> <p>Wish all the lovers a happy Chinese Valentine's Day!!!</p> </body> </html>
