<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
/* 定义一个动画 */
@keyframes jump{
from{
transform: scale(0.5);
opacity: 0.5;
/* box-shadow: 6px 6px 10px rgb(234, 23, 23); */
}to{
transform: scale(2);
/* 透明度 1不透明 0.5半透明 */
opacity: 1;
/* box-shadow: 10px 10px 6px rgb(234, 23, 23); */
}
}
/* 定义一个iou旋转动画 */
@keyframes circles{
from{
transform: rotate(0deg);
z-index: 1;
}to{
transform: rotate(360deg);
z-index: -1;
}
}
.f{
width: 170px;
height: 160px;
/* border: 1px solid rebeccapurple; */
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;
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: circles 1s linear 2s infinite;
}
button{
width: 80px;
height: 40px;
background-color: rgb(39, 133, 39);
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 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  O  U</div>
</div>
</body>
<script>
let divF=document.getElementById('divF')
function start1(){
divF.className='f m'
z4.className='z4 z4c'
}
function stop1(){
divF.className='f'
z4.className='z4'
}
</script>
</html>
heartbeat feeling case code
Guess you like
Origin blog.csdn.net/2201_75506216/article/details/132134296
Recommended
Ranking