《打火机与公主裙》-跳动的心脏
女主真是一个大神仙,看着C语言的书(水仙花数……),学习怎么用前端语言做出特效,这是内置了一个代码转换器吗?
注:主要涉及绘制心脏、虚线格背景等问题
音乐嵌入一直都是一个难以解决的问题,想要添加自动播放、循环且隐藏不可见的背景音
如果可以加一些心跳动产生的波就更好了
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>跳动的心脏</title> <style> body{ background-color: black;/*背景色*/ background-image: linear-gradient(90deg, rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%) ,linear-gradient(0deg,rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%); /*rgba(0, 0, 0, 0),transparent全透明黑*/ background-size: 30px 30px;/*调节格子宽 高*/ } .hrt{ width: 200px; height: 200px; background-color: #d5093c; box-shadow: 0 0 70px #d5093c; animation: sport 1s infinite; } .lef{ border-radius: 100px; position: absolute; top: 200px; left: 200px; } .rig{ border-radius: 100px; position: absolute; top: 200px; left: 341px; } .cen{ transform: rotate(45deg); position: absolute; top: 269px; left: 271px; } @keyframes sport { 0%{transform: scale(1) rotate(45deg);} 50%{transform: scale(1.1) rotate(45deg);} 100%{transform: scale(1) rotate(45deg);} } </style> </head> <body> <div class="hrt lef"></div> <div class="hrt cen"></div> <div class="hrt rig"></div> <!--心脏跳动声--> </body> </html>