div+css实现6个不同食物飞盘点击开关切换效果代码-html代码-BFW代码库

div+css实现6个不同食物飞盘点击开关切换效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现6个不同食物飞盘点击开关切换效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body {
      display: flex;
      width: 100vw;
      height: 100vh;
      background: #f5f4e2;
      justify-content: center;
      align-items: center;
    }
    body .wrap {
      width: 580px;
      height: 460px;
    }
    body .wrap .toggle {
      display: inline-block;
      float: left;
      background: #fff;
      width: 250px;
      height: 100px;
      box-shadow: 0 5px 25px -15px #676550;
      position: relative;
      margin: 50px 20px 0px;
      border-radius: 100px;
      opacity: 0;
      -webkit-animation: fadein 1.5s ease-in 1 forwards;
              animation: fadein 1.5s ease-in 1 forwards;
    }
    body .wrap .toggle:before {
      position: absolute;
      color: #e1dea9;
      font-family: "Nunito";
      letter-spacing: 3px;
      width: 100%;
      text-align: center;
      top: -25px;
      font-size: 20px;
    }
    body .wrap .toggle .toppings {
      transform: scale(0) rotate(0deg);
      transition: 0.15s ease-in-out;
    }
    body .wrap .toggle .toppings:nth-of-type(1) {
      left: 18px;
      top: 14px;
      margin-top: 10.5px;
      margin-left: 5px;
    }
    body .wrap .toggle .toppings:nth-of-type(2) {
      left: 36px;
      top: 28px;
      margin-top: 10.5px;
      margin-left: 5px;
    }
    body .wrap .toggle .toppings:nth-of-type(3) {
      left: 54px;
      top: 42px;
      margin-top: 10.5px;
      margin-left: 5px;
    }
    body .wrap .toggle .toppings:nth-of-type(4) {
      left: 72px;
      top: 56px;
      margin-top: 10.5px;
      margin-left: 5px;
    }
    body .wrap .toggle .toppings:nth-of-type(5) {
      left: 90px;
      top: 70px;
      margin-top: 10.5px;
      margin-left: 5px;
    }
    body .wrap .toggle .toppings:nth-of-type(4) {
      left: 55px;
      top: 28px;
      margin-top: 0;
      margin-left: 0;
    }
    body .wrap .toggle .toppings:nth-of-type(5) {
      left: 25px;
      top: 58px;
      margin-top: 0;
      margin-left: 0;
    }
    body .wrap .toggle:nth-of-type(1) {
      -webkit-animation-delay: 0.1s;
              animation-delay: 0.1s;
    }
    body .wrap .toggle:nth-of-type(2) {
      -webkit-animation-delay: 0.2s;
              animation-delay: 0.2s;
    }
    body .wrap .toggle:nth-of-type(3) {
      -webkit-animation-delay: 0.3s;
              animation-delay: 0.3s;
    }
    body .wrap .toggle:nth-of-type(4) {
      -webkit-animation-delay: 0.4s;
              animation-delay: 0.4s;
    }
    body .wrap .toggle:nth-of-type(5) {
      -webkit-animation-delay: 0.5s;
              animation-delay: 0.5s;
    }
    body .wrap .toggle:nth-of-type(6) {
      -webkit-animation-delay: 0.6s;
              animation-delay: 0.6s;
    }
    body .wrap .toggle:nth-of-type(1):before {
      content: "PEPPERONI";
    }
    body .wrap .toggle:nth-of-type(1) .toppings {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 100%;
      background: #DC453F;
      position: absolute;
    }
    body .wrap .toggle:nth-of-type(2):before {
      content: "SAUSAGE";
    }
    body .wrap .toggle:nth-of-type(2) .toppings {
      position: absolute;
   .........完整代码请登录后点击上方下载按钮下载查看