实现心动的感觉、走马灯、圆周运动案例

最新推荐文章于 2024-09-13 17:32:25 发布

m0_62102386

最新推荐文章于 2024-09-13 17:32:25 发布

阅读量50

点赞数

文章标签： json

本文链接：https://blog.csdn.net/m0_62102386/article/details/131573912

版权

心动的感觉

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

<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;
position: relative;
top: 200px;
left: 200px;
}
//定义一个类名为m的元素样式，应用jump的动画，动画时长为1s，使用ease曲线作为动画速度变化，动画
//alterbnate慢慢变小，infinte无限循环
.m{
   /* animation: jump 1s ease alternate infinite;*/
   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: 40px;
    font-size:large;
    color:aliceblue;
    z-index: -1;
}
定义一个类名为z4c的元素样式，应用名为circles的动画，动画时长为1s,动画速度变化为线性，
//动画延迟1s动画每次交替执行，并无限循环
.z4c{
    animation: circles 1s linear 1s infinite alternate;
}

button{
    
    width: 80px;
height: 40px;
background-color:rgb(96, 221, 96);

border: none;
color: white;
font-size: large;
cursor: pointer;
border-radius:10px;
box-shadow: 0 8px 5px gray;
}
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 class="z4" id="z4">I &emsp;&emsp;O&emsp;&emsp; U</div>
        
    </div>
</body>
<script>
//获取divF和z4的id
let divF= document.getElementById('divF');
let z4 = document.getElementById('z4');
//divF元素添加了f和m的类名（使用className属性），使用了CSS中的相应样式，
//并使元素显示动画效果。z4元素添加z4和z4c的类名，使用了CSS中的相应样式，
function start1(){
    divF.className='f m';
    z4.className='z4 z4c'

}
//divF元素移除了m的类名（使用className属性），使用了CSS中的相应样式，使得动画停止，
//z4元素移除z4c的类名，使用了CSS中的相应样式，

function stop1(){
    divF.className='f';
  z4.className='z4'
}

</script>

</html>

走马灯

<!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>走马灯</title>
    <style>
        .f{
            width: 800px;
            height:100px;
            border-top: 1px soid rebeccapurple;
        }
        .f>div{
            width: 80px;
            height: 60px;
            background-color: rebeccapurple;
            border-radius:50% ;
            float: left;
            margin-left: 20px;
        }
//改变灯的颜色
        @keyframes changeColor{
            0%{
                background-color: rgb(236, 65,65);
            }20%{
                background-color: rgb(65, 236, 82);
            }40%{
                background-color: rgb(88, 65, 236);
            }60%{
                background-color: rgb(65, 165, 236);
            }80%{
                background-color: rgb(29, 22, 22);
            }100%{
                background-color: rgb(176, 236, 65);
            }
        }
//将同一行的每个走马灯单独设定动画属性
        .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">
        <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<9;i++){
s+=`<div class="f">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        
   </div>`

}

    body.innerHTML=s

</script>
</html>

圆周运动

<!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>圆周运动</title>
    <style>
//定义一个大圆
        .r1{
            width: 500px;
            height: 500px;
            border-radius: 50%;
            border: 1px solid red;
            position: relative;
        }
//定位
        .r1>div{
            position: absolute;
        }
//中圆
        .r2{
            width: 300px;
            height: 300px;
            border-radius: 50%;
            border: 1px solid green;
            left: 100px;
            top:100px;
    
        }
    //小圆
        .r3{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 1px solid blue;
            left: 200px;
            top:200px;
    
        }
    //定义小球
        .b1{
            width: 100px;
            height: 100px;
            background-color: rgb(176, 15, 144) ;
            border-radius: 50%;
            top:200px;
            left: 0px;
        }
    //定义第二个小球
        .b2{
            width: 100px;
            height: 100px;
            background-color: rgb(166, 255, 0);
            border-radius: 50%;
            top:200px;
            left: 100px;
        }
    
       
    </style>
</head>
<body>
    <div class="r1">
        <div class="b1" id="b1" ></div>
        <div class="b2"  id="b2"></div>
        <div class="r2"></div>
        <div class="r3"></div>
    </div>
    <button onclick="start1()">开始</button>
</body>
<script>
    //x0，y0代表圆心的坐标
    let r=200,x0=250,y0=250;
    let b1= document.getElementById('b1');
    let b2=document.getElementById('b2');
    //定义x,y表示小球的球心
    let x=50,y=50;
    let x2=150,y2=150;
    function start1(){
        //上半圆
        let sbr=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'
           
            if(x==450&&y==250){
                //取消上半圆的定时器
                clearInterval(sbr)
                //开启下半圆的定时器
                let xbr=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'
                    if(x==50 && y==250){
                        //取消下半圆的定时器
                        clearInterval(xbr)
                        //递归
                        start1()
                    }
                })
            }

        }

        
        ,10);
    }
   /* let r=200,x0=250,y0=250;
			let r2= 100;
    let b1= document.getElementById('b1');
  
    //定义x,y表示小球的球心
    let x=50,y=50;
    function start1(){
        let i=180
        setInterval(()=>{
            i++
            let deg=i*Math.PI/180
			//b1小球的运动轨迹
            x=x0+r*Math.cos(deg)
            y=y0+r*Math.sin(deg)

						 b1.style.top=y-50+'px'
            b1.style.left=x-50+'px'
				//b2小球的运动轨迹
						x2=x0+r2*Math.cos(deg)
            y2=x0+r2*Math.sin(deg)

					b2.style.top=y2-50+'px'
           b2.style.left=x2-50+'px'
				
        },50)
    }*/

</script>
</html>