每天几个JS小案例，有手都能学会

最新推荐文章于 2024-10-06 12:31:10 发布

是橙子而不是橘子

最新推荐文章于 2024-10-06 12:31:10 发布

阅读量127

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_71412337/article/details/131563102

版权

本文展示了四个不同的网页动态效果实现代码，包括使用HTML和CSS创建的小方块按圆周路径移动，利用CSS关键帧动画实现的心动感觉（心跳动画），跑马灯色彩变换效果，以及两个圆圈进行的圆周运动。这些代码实例展示了前端开发中动态效果的创意和技巧。

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

1.移动的小方块

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .f {
        width: 500px;
        height: 500px;
        border: 1px solid rebeccapurple;
        position: relative;
    }

    .z {
        width: 100px;
        height: 100px;
        background-color: aquamarine;
        position: absolute;

    }
</style>

<body>
    <div class="f">
        <fiv class="z" id="z"></fiv>
    </div>
</body>
<script>
    let z = document.getElementById('z')
    let x = 0, y = 0,starty=200
    let dsq = setInterval(() => {
        if (x >= 400) {
            clearInterval(dsq)
        }
        x++
        y = starty - Math.sin(x * 2 * 2 * Math.PI / 360) * 200
        z.style.top = y + 'px'
        z.style.left = x + 'px'
    }, 10)
</script>

</html>

2.心动的感觉

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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;
        }
    }
    @keyframes circle{
        from{
            transform: rotate(0deg);
            z-index: 1;
        }to{
            transform: rotate(360deg);
            z-index: -1;
        }
    }
    .f{
        width: 180px;
        height: 160px;
        /* border: 1px solid rebeccapurple; */
        position: relative;
        left: 150px;
        top: 150px;
        /* 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: circle 1s linear 1s infinite alternate;
    }
    button{
        width: 80px;
        height: 40px;
        background-color: green;
        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 id="z4" class="z4">I &emsp; O &emsp; U</div>
    </div>
</body>
<script>
    function start1(){
        let z4 =document.getElementById('z4')
        let divF=document.getElementById('divF')
        // className是获得class名字内容
        divF.className='f m'
        z4.className='z4 z4c'
    }
    function stop1(){
        let z4 =document.getElementById('z4')
        let divF=document.getElementById('divF')
        divF.className='f'
        z4.className='z4'
    }
</script>
</html>

3.跑马灯

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .f {
        width: 800px;
        height: 50px;
        border-top: 1px solid rebeccapurple;

    }

    .f>div {
        width: 60px;
        height: 40px;
        background-color: white;
        border-radius: 50%;
        float: left;
        margin-left: 20px;
    }

    @keyframes changecolor {
        0% {
            background-color: rgb(222, 62, 62);
        }

        20% {
            background-color: rgb(234, 186, 64);
        }

        40% {
            background-color: rgb(57, 110, 57);
        }

        60% {
            background-color: aqua;
        }

        80% {
            background-color: rebeccapurple;
        }

        100% {
            background-color: pink;
        }
    }

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

<body>
    <button onclick="change1()">生成</button>
    <input type="text" id="ipt" value="4">
    <div id="body">
        <!-- <div class="f">
            <div></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')
    function change1() {
        let ipt = document.getElementById('ipt').value
        let s = ''
        for (let i = 0; i < ipt; 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>

4.圆周运动

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .bdr1 {
        border-radius: 50%;
        width: 300px;
        height: 300px;
        border: 1px solid red;
        position: relative;
    }

    .bdr2 {
        border-radius: 50%;
        width: 200px;
        height: 200px;
        border: 1px solid green;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }


    .bdr3 {
        border-radius: 50%;
        width: 100px;
        height: 100px;
        border: 1px solid rebeccapurple;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    .bool {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: skyblue;
        position: absolute;
        left: 0px;
        top: 125px;
    }

    .boolm {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: rgb(226, 99, 99);
        position: absolute;
        left: 0px;
        top: 75px;
    }
</style>

<body>
    <div class="bdr1">
        <div class="bool" id="bool"></div>
        <div class="bdr2">
            <div class="boolm" id="boolm"></div>
            <div class="bdr3"></div>
        </div>
    </div>
    <button onclick="check()">开始</button>
</body>
<script>
    let bool = document.getElementById('bool')
    let boolm = document.getElementById('boolm')
    function check() {
        circleMove(bool, 0, 125, 125, 20)
        circleMove(boolm, 0, 75, 75, 20)
    }
    function circleMove(ball, x0, y0, r, t) {
        let x = 0, y
        let dsq1 = setInterval(() => {
            ball.style.left = x0 + x++ + 'px'
            y = -Math.sqrt(2 * x * r - Math.pow(x, 2))
            ball.style.top = y0 + y + 'px'
            if (x == 2 * r && y == 0) {
                clearInterval(dsq1)
                let dsq2 = setInterval(() => {
                    ball.style.left = x0 + x-- + 'px'
                    y = Math.sqrt(2 * x * r - Math.pow(x, 2))
                    ball.style.top = y0 + y + 'px'
                    if (x == 0 && y == 0) {
                        clearInterval(dsq2)
                        circleMove(ball, x0, y0, r, t)
                    }
                }, t)
            }
        }, t)
    }
</script>

</html>