直播app源码，使用jq实现进入和离开动画

直播app源码，使用jq实现进入和离开动画

1.index.html:

 


<!DOCTYPE html>
<html>
<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>
        <!-- <div class="cover coverFlag"></div> -->
        <div>
            <div></div>
            <div></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实现进入和离开动画， 更多内容欢迎关注之后的文章

 

posted @ 2022-06-15 14:06  云豹科技-苏凌霄  阅读(84)  评论(0)    收藏  举报