html5+css3制作跳动的心

最新推荐文章于 2024-07-11 16:15:52 发布

林荃

最新推荐文章于 2024-07-11 16:15:52 发布

阅读量162

点赞数

文章标签： html5 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_56116127/article/details/129278721

版权

该代码段展示了一个使用HTML、CSS3和少量JavaScript实现的心脏跳动效果。通过CSS3的@keyframes动画，元素在1秒内按比例缩放，模拟心跳的律动。HTML结构包括几个定位精确的div，用以形成心脏的形状。

摘要由CSDN通过智能技术生成

<!doctype html>
<html>
    
    <head>
        <meta charset="utf-8">
        <title>HeartBeat</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.css" rel="stylesheet" />
        <style type="text/css">
            body{
                padding: 0;
                position: absolute;
                left: 50%;
                right: 50%;
                margin-top: 35%;
            }
            #heart{
                transition: 1s;
                animation-name: xin;
                animation-duration: 1s;
                animation-iteration-count: infinite;
                animation-direction: alternate;    
                animation-timing-function: ease;
            }
            #loop{
                width: 300px;
                height: 300px;
                position: absolute;
                background-color: red;
                margin-left: -150px;
                opacity: 0.3;
                border-radius: 50%;
                box-shadow: 0 0 60px 35px white inset;
            }
            #id1{
                width: 100px;
                height: 100px;
                position: absolute;
                background-color: red;
                margin-top: 124px;
                margin-left: -50px;
                transform: rotate(45deg);
            }
            #id2{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                margin-top: 85px;
                margin-left: -11px;
                border-radius: 50%;
            }
            #id3{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                margin-top: 85px;
                margin-left: -89px;
                border-radius: 50%;
            }
            @keyframes xin{
                0%{
                    transform: scale(1.0);
                }
                        
                100%{
                    transform: scale(1.2);
                }
            }
        </style>
    </head>
    <body>
        <script src="js/mui.js"></script>
        <script type="text/javascript">
            mui.init()
        </script>
        
        <div id="heart">
            <div id="loop"></div>
            
            <div id="id1"></div>
                
            <div id="id2"></div>
            
            <div id="id3"></div>
            
        </div>
        
    </body>

</html>