使用前端语言完成“心跳”，“走马灯”，“圆周运动”

最新推荐文章于 2024-04-03 16:36:35 发布

渔钓道人

最新推荐文章于 2024-04-03 16:36:35 发布

阅读量250

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/NiCE_PersoN__/article/details/131560246

版权

一、心跳

图片如下：

代码如下：

<!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: 170px;
            height: 160px;
            border:none;
            position: relative;
            left: 200px;
            top: 200px;
            background-color: white;
            /* animation: jump 1s ease alternate infinite; */
        }
        .m{
            animation: jump 1s 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: aliceblue;
            z-index: -1;
        }
        .z4c{
            animation: circles 1s linear 1s infinite;
        }
        button{
            width: 80px;
            height: 40px;
            background-color:green;
            border: none;
            color: white;
            font: large;
            border-radius: 10px;
            cursor: pointer;
            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>

示例代码：

 @keyframes jump{
            from{
            transform: scale(0.5);
            opacity: 0.5;
            
            }to{
                transform: scale(2);
            opacity: 1;
            
            }
        }

这段代码是一个CSS动画的关键帧定义。它定义了一个名为"jump"的关键帧，其中包含了两个关键帧状态。

在动画开始时（from），元素将被缩放到原来的一半大小（scale(0.5)）并且不透明度设置为0.5。而在动画结束时（to），元素将被放大到原来的两倍大小（scale(2)）并且透明度设置为1。

使用这个关键帧定义，你可以将动画效果应用于需要的元素上，使其在播放动画时按照指定的变化缩放和透明度。

<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>

这段代码是一个简单的HTML页面，包含了两个按钮和一个div容器。点击"开始"按钮会执行start1()函数，点击"结束"按钮会执行stop1()函数。div容器中包含了四个子元素，分别有class为"f"、"z1"、"z2"和"z3"的div，以及id为"z4"且内容为"I O U"的div。

<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>

这段代码是一个简单的JavaScript脚本，主要功能是控制网页中的两个DOM元素的类名，从而改变它们的样式。

首先，代码中通过getElementById方法获取了名为divF和z4的两个DOM元素。

接下来，start1函数会在调用时给divF添加一个名为f m的类名，同时给z4添加一个名为z4c的类名。这样，这两个DOM元素就会应用相应的CSS样式。

最后，stop1函数会将divF的类名设置为f，将z4的类名设置为z4，从而恢复它们的原始样式。

需要注意的是，这段代码仅包含简单的DOM操作，如果想要完整运行，还需要在HTML文档中正确地定义divF和z4元素，并在适当的时机调用start1和stop1函数。

二、走马灯

图片如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>走马灯</title>
     <style>
         .f{
             width: 800px;
             height: 110px;
             border-top: 1px solid red;
         }
         .f>div{
            width:60px ;
             height:40px ;
             background-color: white;
             border-radius: 50%;
             float: left;
             margin-left : 20px;
         }
         /* button{
            width: 200px;
             height: 100px;
             border-color: red;
         } */
         @keyframes changeColor {
             0%{
                 background-color: red;
             }20%{
                background-color: rgb(217, 255, 0);
             }40%{
                background-color: rgb(0, 255, 106);
             }60%{
                background-color: rgb(0, 68, 255);
             }80%{
                background-color: rgb(195, 0, 255);
             }100%{
                background-color: rgb(255, 0, 157);
             }
         }
         .f>div:nth-child(1){
             animation: changeColor 3s ease 0s infinite ;
         }
         .f>div:nth-child(2){
             animation: changeColor 3s ease 1s infinite ;
         }
         .f>div:nth-child(3){
             animation: changeColor 3s ease 2s infinite ;
         }
         .f>div:nth-child(4){
             animation: changeColor 3s ease 3s infinite ;
         }
         .f>div:nth-child(5){
             animation: changeColor 3s ease 4s infinite ;
         }
         .f>div:nth-child(6){
             animation: changeColor 3s ease 5s infinite ;
         }
         .f>div:nth-child(7){
             animation: changeColor 3s ease 6s infinite ;
         }
         .f>div:nth-child(8){
             animation: changeColor 3s ease 7s infinite ;
         }
         .f>div:nth-child(9){
             animation: changeColor 3s ease 8s infinite ;
         }
         .f>div:nth-child(10){
             animation: changeColor 3s ease 9s infinite ;
         }
     </style>
</head>
<body id="body">
    
    <div class="f">
        <!-- <button>坤坤</button> -->
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
<script>
    let body=document.getElementById('body')
    let  s=''
    for (let i = 0; i < 10; i++) {
        s+=`<div class="f">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>`
        
    }
    body.innerHTML=s
</script>
</html>

示例代码：

.f>div:nth-child(1){
             animation: changeColor 3s ease 0s infinite ;
         }
         .f>div:nth-child(2){
             animation: changeColor 3s ease 1s infinite ;
         }
         .f>div:nth-child(3){
             animation: changeColor 3s ease 2s infinite ;
         }
         .f>div:nth-child(4){
             animation: changeColor 3s ease 3s infinite ;
         }
         .f>div:nth-child(5){
             animation: changeColor 3s ease 4s infinite ;
         }
         .f>div:nth-child(6){
             animation: changeColor 3s ease 5s infinite ;
         }
         .f>div:nth-child(7){
             animation: changeColor 3s ease 6s infinite ;
         }
         .f>div:nth-child(8){
             animation: changeColor 3s ease 7s infinite ;
         }
         .f>div:nth-child(9){
             animation: changeColor 3s ease 8s infinite ;
         }
         .f>div:nth-child(10){
             animation: changeColor 3s ease 9s infinite ;
         }

这段代码是使用CSS中的动画（animation）属性来实现颜色变化效果。通过选择器（selector）.f>div:nth-child(x)，可以选中.f元素下第x个子元素的div元素。

每个子元素的动画效果都相同，都使用名为changeColor的动画，并且都是无限循环（infinite）。不同之处在于每个子元素的动画延时（delay）不同，分别为0s、1s、2s、3s、4s、5s、6s、7s、8s、9s。

具体的动画效果需要在其他地方定义changeColor动画，包括动画的名称、持续时间（3s）、缓动函数（ease）等。

总体上，这段代码的作用是使.f元素下的10个子元素的背景颜色以一定的延时和循环方式进行变化。

let body=document.getElementById('body')
    let  s=''
    for (let i = 0; i < 10; i++) {
        s+=`<div class="f">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>`
        
    }
    body.innerHTML=s

这段代码是用于在网页中创建一列包含多个 div 元素的容器。每个容器具有相同的类名 "f"，并且内部包含了 10 个空的 div 元素。

通过获取 id 为 "body" 的元素，并将生成的 HTML 字符串赋值给其 innerHTML 属性，可以将这些 div 元素添加到网页中。

需要注意的是，在实际使用中，应该确保在文档加载完成后执行该代码，以避免找不到 id 为 "body" 的元素或其他相关问题。

三、圆周运动

图片如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆周运动</title>
    <style>
        .r1{
            width: 500px;
            height: 500px;
            border: 1px solid red;
            border-radius: 50%;
            position: relative;
        }
        .r1>div{
            position: absolute;
        }
        .r2{
            width: 300px;
            height: 300px;
            border: 1px solid green;
            border-radius: 50%;
            top: 100px;
            left: 100px;
        }
        .b1{
            width: 100px;
            height: 100px;
            background-color:  blue;
            border-radius: 50%;
            top: 200px;
            left: 0px;
        }
        .b2{
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
            border-radius: 50%;
            top: 200px;
            left: 100px;
        }
        
        .r3{
            width: 100px;
            height: 100px;
            border: 1px solid blue ;
            border-radius: 50%;
            top: 200px;
            left: 200px;
        }
    </style>
</head>
<body>
    <div class="r1">
        <div id="b1" class="b1"></div>
        <div class="b2"></div>
        <div class="r2"></div>
        <div class="r3"></div>
    </div>
    <button onclick="start1()">开始</button>
</body>
<script>
    let r=200,x0=250,y0=250;
    let b1=document.getElementById('b1')
    let x=50,y=50

    // function start1(){
    //     let z=document.getElementById('z')
    // let x=0,y=0
    // setInterval(()=>{
    //    x++
    // y=-Math.sqrt(Math.pow(r,2)-Math.pow(x-x0,2))+y0
    // b1.style.top=y-50+'px'
    // b1.style.left=x-50+'px'
    // },10);
    // }

    function start1(){
        let i=0
        setInterval(()=>{
        i++
         let deg=i*Math.PI/180
         x=x0+r*Math.cos(deg)
         y=y0+r*Math.sin(deg)

         b1.style.left=x-50+'px'
         b1.style.top=y-50+'px'
    },10);
    }
</script>
</html>

示例代码：

 let r=200,x0=250,y0=250;
    let b1=document.getElementById('b1')
    let x=50,y=50

    function start1(){
        let i=0
        setInterval(()=>{
        i++
         let deg=i*Math.PI/180
         x=x0+r*Math.cos(deg)
         y=y0+r*Math.sin(deg)

         b1.style.left=x-50+'px'
         b1.style.top=y-50+'px'
    },10);
    }

这段代码是使用JavaScript实现的一个动画效果。具体来说，它定义了一些变量和元素，并提供了一个名为start1的函数。

使用了一个i变量作为时间的计数器，每隔10毫秒，i的值递增，然后根据三角函数计算出x和y的值，同样通过修改b1元素的位置实现动画效果。

你可以调用start1函数来启动这个动画效果。

渔钓道人

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用前端语言完成“心跳”，“走马灯”，“圆周运动”

div容器中包含了四个子元素，分别有class为"f"、"z1"、"z2"和"z3"的div，以及id为"z4"且内容为"I O U"的div。不同之处在于每个子元素的动画延时（delay）不同，分别为0s、1s、2s、3s、4s、5s、6s、7s、8s、9s。使用了一个i变量作为时间的计数器，每隔10毫秒，i的值递增，然后根据三角函数计算出x和y的值，同样通过修改b1元素的位置实现动画效果。这段代码是一个简单的JavaScript脚本，主要功能是控制网页中的两个DOM元素的类名，从而改变它们的样式。
复制链接

扫一扫