跳动的心脏

2022/7/10 23:54:43

编程Tag： transform background 跳动 rotate rgba 200px 10% 心脏

本文主要是介绍跳动的心脏，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

《打火机与公主裙》-跳动的心脏
女主真是一个大神仙，看着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>

这篇关于跳动的心脏的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

跳动的心脏

相关编程文章