css实现双击长方形显示动画效果代码

代码语言:html

所属分类:动画

代码描述:css实现双击长方形显示动画效果代码

代码标签: css 长方形 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

   
<meta charset="UTF-8">





   
<style>
        body {
          overflow: hidden;
        }
        .wrapper,
        .animDiv {
          position: absolute;
          inset: 0;
          background-color: lightgrey;
        }
        .animDiv {
          -webkit-animation: wipeAnimation 700ms ease-out both,
            cycleColors_01 1000ms linear infinite;
                  animation: wipeAnimation 700ms ease-out both,
            cycleColors_01 1000ms linear infinite;
          -webkit-animation-play-state: running, paused;
                  animation-play-state: running, paused;
          box-shadow: 0 0 80px 0 #00000055 inset;
        }
       
        .animDiv:nth-of-type(2) {
          -webkit-animation-delay: 100ms, -30ms;
                  animation-delay: 100ms, -30ms;
        }
        .animDiv:nth-of-type(3) {
          -webkit-animation-delay: 200ms, -60ms;
                  animation-delay: 200ms, -6.........完整代码请登录后点击上方下载按钮下载查看

网友评论0