使用css+html+js实现爱心跳动、走马灯、圆周运动

css动画：爱心跳动

首先将父元素fu设为相对位置，fu内的div子元素设为绝对位置：

.fu{
    	width: 500px;
    	height: 500px;
    	left: 100px;
    	top: 100px;
		position: relative;
}
.fu>div{
		position: absolute;
}

定义动画的关键帧，scaleAnimation 为爱心的缩小放大动画，circles为‘I O U’文字的旋转动画：

@keyframes scaleAnimation {
	0% {
	    transform: scale(1);
	}
	40% {
	    transform: scale(0.6);
	    opacity: 0.5;
	}
	100% {
	    transform: scale(1);
	}
}
@keyframes circles{
    from{
        transform: rotate(0deg);
        z-index: 1;
    }to{
        transform: rotate(360deg);
        z-index: -1;
    }
}

在body中定义两个按钮，设置点击事件函数，这里不能使用start或stop作为函数名称，因为是关键字。

<button onclick="start1()">开始</button>
<button onclick="stop1()">停止</button>

随后获取id为divF和z4的两个元素对象，当按钮被点击时可以修改对应对象的class值，start1函数分别将对象的class添加了m和z4c两个值，stop1函数将其去掉。

let divF=document.getElementById('divF')
let z4=document.getElementById('z4')
function start1(){
    divF.className='fu m'
    z4.className='z4 z4c'
}
function stop1(){
    divF.className='fu'
    z4.className='z4'
}

添加和去掉class值是为了控制元素是否应用动画，这里通过js修改class值来控制动画是因为js无法直接控制css样式。

.z4c{
    animation: circles 1s linear 1s infinite alternate;
}
.m{
    animation: scaleAnimation 3s ease infinite;
}

运行效果：

走马灯

可指定行数生成走马灯，效果如下：

在css中定义走马灯的动画关键帧，改变灯的颜色。

@keyframes changeColor{
            0%{
                background-color: red;
            }20%{
                background-color: orange;
            }40%{
                background-color: green;
            }60%{
                background-color: blue;
            }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(0){
            animation: changeColor 3s ease 9s infinite;
        }

sc()为生成按钮点击事件触发函数，使用了模板字符串对body的内容进行修改，使其可以获取text输入框的值代入for循环生成指定行数的走马灯。

let body=document.getElementById('body')
    
    function sc(){
        let num=document.getElementById('inp').value
        let s='<button οnclick="sc()">生成</button><input id="inp" type="text">'
        for (let i = 0; i < num; 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
    }

圆周运动

可以使用按钮开始两个圆球一起围绕圆环旋转，效果如下：

首先通过css画出静态形状，代码如下：

.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:  rgb(61, 61, 212);
            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;
        }

核心是使用圆的弧度公式来实现圆球的圆周运动，js代码如下：

//r表示运动轨迹的半径，x0,y0表示圆心的坐标
    let r=200,x0=250,y0=250;
    let r2=100
//获取b1蓝色小球
    let b1=document.getElementById('b1')
  //定义x,y表示小球的球心的坐标
    let x=50,y=50
    function start1(){
        let i=180
       setInterval(() => {
        //i表示0-360度，角度，deg是0-2Pi，弧度
        i++
        let deg=i*Math.PI/180
        x=x0+r*Math.cos(deg)
        y=y0+r*Math.sin(deg)
        x2=x0+r2*Math.cos(deg)
        y2=y0+r2*Math.sin(deg)

        b1.style.left=x-50+'px'
        b1.style.top=y-50+'px'
        b2.style.left=x2-50+'px'
        b2.style.top=y2-50+'px'
       }, 1);
    }