跳动的心（适合表白）

风和不会写代码

于 2023-07-05 22:38:11 发布

阅读量127

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_74280086/article/details/131564817

版权

今天用javascript,css,html做了一个动态效果

一.先画一个爱心

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
.f{
    width: 200px;
    height: 180px;
    position: relative;
    left:200px;
    top:200px;
}
    .f>div{
            position: absolute;
        }
        .z1,.z2{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: red;
        }
        .z2{
            left:70px;
 }
 .z3{
            width: 100px;
            height: 100px;
            background-color: red;
            left: 35px;
            top: 35px;
            transform: rotate(45deg);
            
        }
</style>
<body>
    <div id="divF"class="f">
        <div class="z1"></div>
        <div class="z2"></div>
        <div class="z3"></div>
        </div>
</body>
</html>

结果图：

二.制作爱心动态效果：

apocity属性是指定一个元素的透明度。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
   
        @keyframes jump {
            from{
                transform: scale(0.5);
                opacity: 0.5;
            }to{
                transform: scale(2);
                opacity: 1;
                
            }
        }
        .f{
            width: 200px;
            height: 180px;
            position: relative;
            left:200px;
            top:200px;
           
        }
        .m{animation: jump 0.7s ease alternate infinite;}
        .f>div{
            position: absolute;
        }
        .z1,.z2{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: red;
        }
        .z2{
            left:70px;
        }
        .z3{
            width: 100px;
            height: 100px;
            background-color: red;
            left: 35px;
            top: 35px;
            transform: rotate(45deg);
            
        }
        button{
            width:80px;
            height: 40px;
            background-color: skyblue;
            border: none;
            color: white;
            font-size: large;
            border-radius: 10px;
            cursor: pointer;
            box-shadow: 0 8px 5px gray;
            margin-left: 20px;
        }
        button:active{
            transform: translate(5px,5px);
        }
</style>
<body>
    <button onclick="start1()">开始</button>
    <button onclick="stop1()">结束</button>
    <div id="divF"class="f">
        <div class="z1"></div>
        <div class="z2"></div>
        <div class="z3"></div>
        </div>
</body>
<script>
    let divF=document.getElementById('divF')
    function start1(){
            divF.className='f m'
    }
    function stop1(){
            divF.className='f'
    }
</script>
</html>

效果图：

三.再加一些语言旋转效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心动的感觉</title>
    <style>
        @keyframes jump {
            from{
                transform: scale(0.5);
                opacity: 0.5;
            }to{
                transform: scale(2);
                opacity: 1;
                
            }
        }
        @keyframes circles{
            from{
                transform: rotate(0deg);
                z-index: 1;
            }to{
                transform: rotate(360deg);
                z-index: -1;
            }
        }
        .f{
            width: 200px;
            height: 180px;
            position: relative;
            left:200px;
            top:200px;
            /*animation: jump 0.7s ease alternate infinite;*/
        }
        .m{animation: jump 0.7s ease alternate infinite;}
        .f>div{
            position: absolute;
        }
        .z1,.z2{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: red;
        }
        .z2{
            left:70px;
        }
        .z3{
            width: 100px;
            height: 100px;
            background-color: red;
            left: 35px;
            top: 35px;
            transform: rotate(45deg);
            
        }
        .z4{
            top:50px;
            left: 45px;
            font-size:large;
            color: white;
            z-index: -1;
        }
        .z4c{animation: circles 1s linear 2s infinite ;

        }
        button{
            width:80px;
            height: 40px;
            background-color: skyblue;
            border: none;
            color: white;
            font-size: large;
            border-radius: 10px;
            cursor: pointer;
            box-shadow: 0 8px 5px gray;
            margin-left: 20px;
        }
        button:active{
            transform: translate(5px,5px);
        }
    </style>
</head>
<body>
    <button onclick="start1()">开始</button>
    <button onclick="stop1()">结束</button>
    <div id="divF"class="f">
        <div class="z1"></div>
        <div class="z2"></div>
        <div class="z3"></div>
        <div id="z4"class="z4">I &emsp;O &emsp; U</div>
    </div>
    </body>
    <script>
        let divF=document.getElementById('divF')
        let z4=document.getElementById('z4')
        function start1(){
            divF.className='f m'
            z4.className='z4 z4c'
        }
        function stop1(){
            divF.className='f'
            z4.className='z4'
        }
    </script>

</html>

效果