1.首先，我们可以根据所学的html与css知识画一个爱心(文章结尾附源代码)
2、 定义一个类名为"f"的元素样式，设置宽度为170px，高度为160px，相对位置为相对于父元素的左边缘和上边缘的偏移量分别为200px和200px。
3、定义一个类名为"m"的元素样式，应用一个名为"jump"的动画，动画时长为1秒，使用ease曲线作为动画速度变化，动画每次交替执行，并且无限循环。
jump动画代码如下：
4、设置"f"类名下的子元素为绝对定位，也就是说该元素的位置将相对于离它最近的具有定位属性（除了static）的父元素来定位。
5、类名为"z1"和"z2"的两个圆的元素样式，设置z1和z2宽度和高度为100px，边框半径为50%，背景颜色为红色。并将z2左边缘定位偏移量设置为70px。
6、定义类名为"z3"的元素样式，设置宽度和高度为100px，左边缘和上边缘定位偏移量分别为35px，背景颜色为红色，并通过transform属性将元素旋转45度。
7、定义类名为"z4"的元素样式，设置上边缘和左边缘定位偏移量分别为50px和40px，字体大小为large，字体颜色为aliceblue，z-index为-1。
8、定义类名为"z4c"的元素样式，应用一个名为"circles"的动画，动画时长为1秒，动画速度变化为线性，动画延迟1秒开始，动画每次交替执行，并且无限循环。
circle旋转动画代码如下：
当然，不要忘了给body中的button按钮绑定事件来控制爱心的跳动：
做好了上述操作，最后就是见证奇迹的script部分：
1.使用document.getElementById('divF')和document.getElementById('z4')获取具有id属性值为divF和z4的元素，并将其分别赋值给变量divF和z4。这样可以通过DOM操作来控制这些元素。
2.start1()函数用于启动动画效果，它将给divF元素添加了f和m的类名（使用className属性），这将触发CSS中的相应样式，并使得元素显示动画效果。同时，它还给z4元素添加了z4和z4c的类名，以触发CSS中的相应样式来对z4元素进行动画。
3.stop1()函数用于停止动画效果，它将从divF元素的类名中移除m类名，使得动画效果停止。同时，它也将从z4元素的类名中移除z4c类名，以停止z4元素的动画效果。
4.通过调用start1()和stop1()函数，可以控制元素的动画效果的启动和停止。最后实现的代码效果如下视频所示，初学者的表白利器！
心动的感觉
源代码：
<!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>
/*定义一个跳动动画*/
@keyframes jump{
from{
transform: scale(0.5);/*框架大小倍率调整到原来的0.5倍*/
opacity: 0.5;
/*box-shadow: 10px 10px 6px;阴影效果*/
}to{
transform: scale(2);
opacity: 1;
}
}
/*定义一个旋转动画*/
@keyframes circles{
from{
transform: rotate(0deg);
z-index: 1;/*出现*/
}to{
transform: rotate(720deg);
z-index: -1;/*隐藏*/
}
}
.f{
width: 170px;
height: 160px;
position: relative;
left: 200px;
top:200px;
/*给父元素绑定动画*/
/*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;
left: 35px;
top:35px;
background-color: red;
transform: rotate(45deg);
}
.z4{
top:50px;
left: 40px;
font-size: large;
color: aliceblue;
z-index: -1;
}
.z4c{
animation: circles 1s linear 1s infinite alternate;
}
button{
width: 80px;
height: 40px;
background-color:rgb(54, 214, 54);
border: none;
color:white;
font-size:large;
border-radius: 10px;
cursor: pointer;
box-shadow:0 8px 5px gray;
}
button:active{
transform: translate(5px,5px);
}
</style>
</head>
<body>
<button οnclick="start1()">开始</button>
<button οnclick="stop1()">停止</button>
<div id="divF" class="f"><!--class中可以有多个值-->
<div class="z1"></div>
<div class="z2"></div>
<div class="z3"></div>
<div id="z4" class="z4">i love u</div><!--&emsp是空格-->
</div>
</body>
<script>
//1.获取
let divF=document.getElementById('divF')
let z4=document.getElementById('z4')
function start1(){
//2.设值
divF.className='f m'
z4.className='z4 z4c'
}
function stop1(){
//2.设值
divF.className='f'
z4.className='z4'
}
</script>
</html>
558
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
