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);
}