zoukankan      html  css  js  c++  java

  • 程序员自制风扇源码，夏天送清凉

    夏天太热，需要风扇，来一段Html5风扇源码；

    640.gif

     

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @keyframes leafRotate {
          0% {
            transform: rotate(0deg);
          }
          25%{
              transform: rotate(90deg);
          }
          50%{
              transform: rotate(180deg);
          }
          75%{
              transform: rotate(270deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }
        #fan {
          width: 230px;
          position: absolute;
          z-index: 10;
          margin: auto;
          left: 0;
          right: 0;
          top: 150px
        }
        #fan .header {
          width: 230px;
          height: 230px;
          position: absolute;
          left: -15px;
          top: -15px;
          background: #42c7ea;
          border-radius: 50%;
          z-index: 10;
          border: 2px solid #0e6873;
        }
        #fan .mask {
          width: 200px;
          height: 200px;
          border-radius: 50%;
          border: 2px solid #0e6873;
          position: relative;
          background: #e4ecef;
          z-index: 11;
        }
        #fan .mask .logo {
          border: 2px solid #0e6873;
          border-radius: 50%;
          position: absolute;
          width: 80px;
          height: 90px;
          text-align: center;
          line-height: 90px;
          color: #0e6873;
          font-size: 14px;
          top: 53px;
          left: 58px;
          background: #42c7ea;
          z-index: 3;
        }
        #fan .mask .line {
          width: 200px;
          height: 2px;
          background: #3c8a93;
          position: absolute;
          top: 99px;
          z-index: 2;
        }
        #fan .mask .line_1 {
          width: 200px;
          height: 2px;
          background: #3c8a93;
          position: absolute;
          top: 99px;
          z-index: 2;
        }
        #fan .mask .line_2 {
          width: 200px;
          height: 2px;
          background: #3c8a93;
          position: absolute;
          top: 99px;
          z-index: 2;
          transform: rotate(30deg);
        }
        #fan .mask .line_3 {
          width: 200px;
          height: 2px;
          background: #3c8a93;
          position: absolute;
          top: 99px;
          z-index: 2;
          transform: rotate(60deg);
        }
        #fan .mask .line_4 {
          width: 200px;
          height: 2px;
          background: #3c8a93;
          position: absolute;
          top: 99px;
          z-index: 2;
          transform: rotate(90deg);
        }
        #fan .mask .line_5 {
          width: 200px;
          height: 2px;
          background: #3c8a93;
          position: absolute;
          top: 99px;
          z-index: 2;
          transform: rotate(120deg);
        }
        #fan .mask .line_6 {
          width: 200px;
          height: 2px;
          background: #3c8a93;
          position: absolute;
          top: 99px;
          z-index: 2;
          transform: rotate(150deg);
        }
        #fan .mask .leafs {
          z-index: 1;
          position: absolute;
          animation: leafRotate 0s infinite linear;
          transform-origin: center center;
          width: 200px;
          height: 200px;
        }
        #fan .mask .leafs .leaf {
          width: 72px;
          height: 60px;
          border-radius: 20% 40%;
          background: #bdcc2b;
          border: 2px solid #0e6873;
          position: absolute;
          left: 100px;
          top: 100px;
          transform-origin: left top;
        }
        #fan .mask .leafs .leaf_1 {
          width: 72px;
          height: 60px;
          border-radius: 20% 40%;
          background: #bdcc2b;
          border: 2px solid #0e6873;
          position: absolute;
          left: 100px;
          top: 100px;
          transform-origin: left top;
        }
        #fan .mask .leafs .leaf_2 {
          width: 72px;
          height: 60px;
          border-radius: 20% 40%;
          background: #bdcc2b;
          border: 2px solid #0e6873;
          position: absolute;
          left: 100px;
          top: 100px;
          transform-origin: left top;
          transform: rotate(120deg);
        }
        #fan .mask .leafs .leaf_3 {
          width: 72px;
          height: 60px;
          border-radius: 20% 40%;
          background: #bdcc2b;
          border: 2px solid #0e6873;
          position: absolute;
          left: 100px;
          top: 100px;
          transform-origin: left top;
          transform: rotate(240deg);
        }
        #fan .neck {
          width: 40px;
          height: 70px;
          border: 2px solid #0e6873;
          background: #42c7ea;
          position: absolute;
          left: 80px;
          z-index: 9;
          border-radius: 0 0 5% 5%;
        }
        #fan .neck_footer {
          width: 50px;
          height: 20px;
          border: 2px solid #0e6873;
          background: #77e1f1;
          position: absolute;
          top: 263px;
          left: 75px;
          border-radius: 50%;
          z-index: 8;
        }
        #fan .bottom {
          width: 200px;
          height: 80px;
          border-radius: 50%;
          border: 2px solid #0e6873;
          background: #42c7ea;
          position: absolute;
          top: 250px;
          left: 0px;
          z-index: 7;
        }
        #fan .bottom_footer {
          width: 20px;
          height: 20px;
          background: #bdcc2b;
          border: 2px solid #0e6873;
          position: absolute;
          border-radius: 40%;
          z-index: 6;
          top: 310px;
        }
        #fan .bottom_footer_1 {
          width: 20px;
          height: 20px;
          background: #bdcc2b;
          border: 2px solid #0e6873;
          position: absolute;
          border-radius: 40%;
          z-index: 6;
          top: 310px;
          left: 20px;
        }
        #fan .bottom_footer_2 {
          width: 20px;
          height: 20px;
          background: #bdcc2b;
          border: 2px solid #0e6873;
          position: absolute;
          border-radius: 40%;
          z-index: 6;
          top: 310px;
          left: 160px;
        }
        #fan .switch {
          position: absolute;
          width: 24px;
          height: 24px;
          top: 296px;
          z-index: 13;
          opacity: 0;
          cursor: pointer;
        }
        #fan .switch_btn {
          display: inline-block;
          text-align: center;
          width: 18px;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          background: #bdcc2b;
          border: 2px solid #0e6873;
          position: absolute;
          border-radius: 50%;
          color: #0e6873;
          cursor: pointer;
          top: 296px;
          z-index: 12;
          transform: rotateX(45deg);
        }
        #fan .switch_0 {
          position: absolute;
          width: 24px;
          height: 24px;
          top: 296px;
          z-index: 13;
          opacity: 0;
          cursor: pointer;
          left: 50px;
        }
        #fan .switch_0:checked + div + input + div + input + div + input + div + .mask .leafs {
          animation-play-state:paused;
        }
        #fan .switch_1 {
          position: absolute;
          width: 24px;
          height: 24px;
          top: 296px;
          z-index: 13;
          opacity: 0;
          cursor: pointer;
          left: 75px;
        }
        #fan .switch_1:checked + div {
          background: #a9af27;
          color: #0e6873;
        }
        #fan .switch_1:checked + div + input + div + input + div + .mask .leafs {
          animation-duration: 0.7s;
        }
        #fan .switch_2 {
          position: absolute;
          width: 24px;
          height: 24px;
          top: 296px;
          z-index: 13;
          opacity: 0;
          cursor: pointer;
          left: 100px;
        }
        #fan .switch_2:checked + div {
          background: #a9af27;
          color: #0e6873;
        }
        #fan .switch_2:checked + div + input + div + .mask .leafs {
          animation-duration: 0.4s;
        }
        #fan .switch_3 {
          position: absolute;
          width: 24px;
          height: 24px;
          top: 296px;
          z-index: 13;
          opacity: 0;
          cursor: pointer;
          left: 125px;
        }
        #fan .switch_3:checked + div {
          background: #a9af27;
          color: #0e6873;
        }
        #fan .switch_3:checked + div + .mask .leafs {
          animation-duration: 0.3s;
        }
        #fan .switch_btn_0 {
          display: inline-block;
          text-align: center;
          width: 18px;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          background: #bdcc2b;
          border: 2px solid #0e6873;
          position: absolute;
          border-radius: 50%;
          color: #0e6873;
          cursor: pointer;
          top: 296px;
          z-index: 12;
          transform: rotateX(45deg);
          left: 50px;
        }
        #fan .switch_btn_1 {
          display: inline-block;
          text-align: center;
          width: 18px;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          background: #bdcc2b;
          border: 2px solid #0e6873;
          position: absolute;
          border-radius: 50%;
          color: #0e6873;
          cursor: pointer;
          top: 296px;
          z-index: 12;
          transform: rotateX(45deg);
          left: 75px;
        }
        #fan .switch_btn_2 {
          display: inline-block;
          text-align: center;
          width: 18px;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          background: #bdcc2b;
          border: 2px solid #0e6873;
          position: absolute;
          border-radius: 50%;
          color: #0e6873;
          cursor: pointer;
          top: 296px;
          z-index: 12;
          transform: rotateX(45deg);
          left: 100px;
        }
        #fan .switch_btn_3 {
          display: inline-block;
          text-align: center;
          width: 18px;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          background: #bdcc2b;
          border: 2px solid #0e6873;
          position: absolute;
          border-radius: 50%;
          color: #0e6873;
          cursor: pointer;
          top: 296px;
          z-index: 12;
          transform: rotateX(45deg);
          left: 125px;
        }
        #fan .on_off {
          position: absolute;
          width: 40px;
          height: 20px;
          top: 296px;
          z-index: 13;
          left: 80px;
          opacity: 0;
          cursor: pointer;
        }
        #fan .on_off:checked + div {
          box-shadow: none;
        }
        #fan .on_off:checked + div + .mask .leafs {
          animation: leafRotate 2s 1 ease-out;
          animation-delay: 1s;
          animation-fill-mode: forwards;
        }
        #fan .on_off_btn {
          display: inline-block;
          text-align: center;
          width: 40px;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          background: #bdcc2b;
          border: 2px solid #0e6873;
          position: absolute;
          border-radius: 50%;
          color: #0e6873;
          cursor: pointer;
          top: 296px;
          z-index: 12;
          left: 80px;
          box-shadow: inset 2px 2px 6px #555;
        }
        </style>
        </head>
        <body>
          <div id="fan">
            <input type="radio" name="switch" class="switch_0">
            <div class="switch_btn_0">0</div>
            <input type="radio" checked="" name="switch" class="switch_1">
            <div class="switch_btn_1">1</div>
            <input type="radio" name="switch" class="switch_2">
            <div class="switch_btn_2">2</div>
            <input type="radio" name="switch" class="switch_3">
            <div class="switch_btn_3">3</div>
            <div class="mask">
              <div class="logo">风扇</div>
              <div class="line_1"></div>
              <div class="line_2"></div>
              <div class="line_3"></div>
              <div class="line_4"></div>
              <div class="line_5"></div>
              <div class="line_6"></div>
              <div class="leafs">
                <div class="leaf_1"></div>
                <div class="leaf_2"></div>
                <div class="leaf_3"></div>
              </div>
            </div>
            <div class="header"></div>
            <div class="neck"></div>
            <div class="neck_footer"></div>
            <div class="bottom"></div>
            <div class="bottom_footer_1"></div>
            <div class="bottom_footer_2"></div>
          </div>
        </body>
        </html>

    大伙可以运行试试看哈，贼爽... 

    ------------------------------------------------------------------------------------------------------------------------------

    作者： java1234_小锋

    出处：https://www.cnblogs.com/java688/p/13303683.html

    版权：本站使用「CC BY 4.0」创作共享协议，转载请在文章明显位置注明作者及出处。

    ------------------------------------------------------------------------------------------------------------------------------
  • 相关阅读:
    Bootstrap3.0学习第八轮(工具Class)
    dependencies与dependencyManagement的区别
    灵活控制 Hibernate 的日志或 SQL 输出，以便于诊断
    Linux平台安装MongoDB
    ubuntu 该软件包现在的状态极为不妥 error
    oracle vm突然黑屏了
    Oracle VM VirtualBox各种显示模式切换 热键
    where后一个条件和多个条件的查询速度
    String特殊值的判断方式
    将中文标点符号替换成英文标点符号
  • 原文地址：https://www.cnblogs.com/java688/p/13303683.html
Copyright © 2011-2022 走看看