CSS的常用动画

CSS实现开关

<style>
  .check-wrap {
    margin-bottom: 20px;
    text-align: center;
  }


  .switch {
    position: absolute;
    clip: rect(0, 0, 0, 0);
  }


  label {
    margin-right: 40px;
    font-size: 14px;
  }


  .switch-an {
    position: absolute;
    clip: rect(0, 0, 0, 0);
  }


  .switch-an[type="checkbox"]+label {
    position: relative;
    display: inline-block;
    width: 5em;
    height: 2em;
    border-radius: 1em;
    color: #fff;
    background: #06c;
    text-align: left;
  }


  .switch-an[type="checkbox"]+label::before {
    content: '';
    width: 2em;
    height: 2em;
    position: absolute;
    left: 0;
    border-radius: 100%;
    vertical-align: middle;
    background-color: #fff;
    transition: left .3s;
  }


  .switch-an[type="checkbox"]+label::after {
    content: 'OFF';
    margin-left: 2.6em;
    vertical-align: sub;
  }


  .switch-an[type="checkbox"]:checked+label::before {
    transition: left .3s;
    left: 3em;
  }


  .switch-an[type="checkbox"]:checked+label::after {
    content: 'NO';
    margin-left: .6em;
  }
</style>
<div class="check-wrap">
  <input type="checkbox" class="switch-an" id="switch-an-1" />
  <label for="switch-an-1"></label>
</div>
</html>

CSS实现雷达

‍

<style>
  .wave {
    margin-left: auto;
    margin-right: auto;
    width: 100px;
    height: 100px;
    border-radius: 100px;
    border: 2px solid #fff;
    text-align: center;
    line-height: 100px;
    color: #fff;
    background: #06c url(http://p3g4ahmhh.bkt.clouddn.com/me.jpg) no-repeat center center;
    background-size: 100%;
    animation: wave 4s linear infinite;
  }


  @keyframes wave {
    0% {
      box-shadow: 0 0 0 0 rgba(245, 226, 226, 1), 0 0 0 0 rgba(250, 189, 189, 1);
    }


    50% {
      box-shadow: 0 0 0 20px rgba(245, 226, 226, .5), 0 0 0 0 rgba(250, 189, 189, 1);
    }


    100% {
      box-shadow: 0 0 0 40px rgba(245, 226, 226, 0), 0 0 0 20px rgba(245, 226, 226, 0);
    }
  }
</style>
<div class="wave"></div>

CSS 实现加载

<style>
  .loading {
    margin-left: auto;
    margin-right: auto;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background-color: transparent;
    animation: load 3s linear infinite;
  }


  @keyframes load {
    0% {
      box-shadow: -40px 0 0 rgba(250, 189, 189, 0), inset 0 0 0 15px rgba(250, 189, 189, 0), 40px 0 0 rgba(250, 189, 189, 0);
    }


    30% {
      box-shadow: -40px 0 0 rgba(250, 189, 189, 1), inset 0 0 0 15px rgba(250, 189, 189, 0), 40px 0 0 rgba(250, 189, 189, 0);
    }


    60% {
      box-shadow: -40px 0 0 rgba(250, 189, 189, 0), inset 0 0 0 15px rgba(250, 189, 189, 1), 40px 0 0 rgba(250, 189, 189, 0);
    }


    100% {
      box-shadow: -40px 0 0 rgba(250, 189, 189, 0), inset 0 0 0 15px rgba(250, 189, 189, 0), 40px 0 0 rgba(250, 189, 189, 1);
    }
  }
</style>
<div class="loading"></div>

CSS 实现对话框

‍

<style>
  .odd-shadow {
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    height: 80px;
    border-radius: 8px;
    color: #fff;
    font-size: 24px;
    text-align: center;
    line-height: 80px;
    background: #06c;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .8))
  }


  .odd-shadow::before {
    content: '';
    position: absolute;
    display: block;
    margin-left: -20px;
    transform: translateY(20px);
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right-color: #06c;
  }
</style>
<div class="odd-shadow">哎呦，猪先森</div>

CSS实现进度动画

<style>
  .br-31 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(to right, #f6c 50%, #333 0);
  }


  .br-31::before {
    content: '';
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background-color: #f6c;
    transform-origin: left;
    animation: skin 4s linear infinite, bg 8s step-end infinite;
  }


  @keyframes skin {
    to {
      transform: rotate(.5turn);
    }
  }


  @keyframes bg {
    50% {
      background: #333;
    }
  }


  .br-32::before {
    animation-play-state: paused;
    animation-delay: inherit;
  }
</style>
<div class="br-31 black-theme"></div>
<div class="br-31 br-32 black-theme" style="animation-delay:-1s"></div>

CSS实现进度条

‍

<style>
  .div10 {
    height: 20px;
    background: repeating-linear-gradient(45deg,
        #30e8bf 25%,
        #ff8235 0,
        #ff8235 50%,
        #30e8bf 0,
        #30e8bf 75%,
        #ff8235 0);
    background-size: 30px 30px;
    animation: roll 1s linear infinite;
  }


  @keyframes roll {
    from {
      background-position-x: 0;
    }


    to {
      background-position-x: 30px;
    }
  }
</style>
<div class="div10"></div>

CSS实现扫光

<style>
    .line3 {
      height: 200px;
      background: repeating-linear-gradient(to right, #ccc 0%, #fff 3%, #ccc 5%, #ccc 100%);
      animation: gogo 2s linear 0s infinite normal;
    }


    @keyframes gogo {
      0% {
        background-position: 0%;
      }
      100% {
        background-position: 600px;
      }
    }
</style>


</head>


<body>
  <div class='line3'></div>
</body>

CSS实现背景切换

<style>
    .hover-1 {
      background-image: linear-gradient(#1095c1, #1095c1);
      background-size: 0 100%;
      background-repeat: no-repeat;
      transition: .4s;
    }


    .hover-1:hover {
      background-size: 100% 100%;
    }


    body {
      height: 100vh;
      margin: 0;
      display: grid;
      gap: 20px;
      place-content: center;
    }


    h3 {
      font-family: system-ui, sans-serif;
      font-size: 3rem;
      margin: 0;
      cursor: pointer;
      padding: 0 .07em;
    }
</style>


</head>


<body>
  <h3 class="hover-1">Hover Me</h3>
</body>