直播app源码，使用jq实现进入和离开动画
1.index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test3</title>
<link rel="stylesheet" type="text/less" href="./css/index.less">
<link rel="stylesheet" type="text/less" href="./css/animate.less">
</head>
<body>
<div class="test">
<!-- <div class="cover coverFlag"></div> -->
<div class="button">
<div class="icon1"></div>
<div class="icon2"></div>
</div>
</div>
</body>
<!-- jQuery cdn -->
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<!-- less.js cdn -->
<script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.js"></script>
<script src="./js/index.js"></script>
</html>
2.index.less文件
.testBackgroundColor {
background: rebeccapurple;
}
.test {
display: flex;
width: 100rem;
height: 50rem;
background: rebeccapurple;
.button {
position: relative;
display: flex;
background: gray;
width: 25rem;
height: 25rem;
border-radius: 25rem;
z-index: 3;
.icon1,
.icon2 {
display: flex;
position: absolute;
border-radius: 2rem;
background: aliceblue;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.icon1 {
width: 15rem;
height: 5rem;
}
.icon2 {
width: 5rem;
height: 15rem;
}
}
}
.cover {
display: flex;
position: absolute;
width: 100rem;
height: 50rem;
background: rebeccapurple;
z-index: 2;
}
.toggleColor {
animation-name: backgroundChange;
animation-duration: 0.6s;
animation-fill-mode: forwards;
}
//下面是两个button按钮切换角度的类名
.buttonRotate {
transform: rotate(45deg);
transition: transform .6s ease-in-out;
}
3.animate.less:(index.less中调用的动画):
//改变背景颜色
@keyframes backgroundChange {
from {
background: #663399;
}
to {
background: black;
}
}
以上就是直播app源码，使用jq实现进入和离开动画， 更多内容欢迎关注之后的文章