html5风扇源码

程序员文章站 2022-03-29 20:21:00
夏天太热，需要风扇，来一段Html5风扇源码； &...
夏天太热，需要风扇，来一段Html5风扇源码；
html5风扇源码
<!DOCTYPE html>
<html>
<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">
            <div>0</div>
            <input type="radio" checked="" name="switch">
            <div>1</div>
            <input type="radio" name="switch">
            <div>2</div>
            <input type="radio" name="switch">
            <div>3</div>
            <div>
              <div>风扇</div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div>
                <div></div>
                <div></div>
                <div></div>
              </div>
            </div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </body>
        </html>
大伙可以运行试试看哈，贼爽…
本文地址：https://blog.csdn.net/caoli201314/article/details/107352596
html5风扇源码

go开源项目influxdb-relay源码分析（一）

jQuery日期范围选择器附源码下载

实时获取股票数据的android app应用程序源码分享

AbstractQueuedSynchronizer源码分析（ReentrantLock锁的实现）

jquery跳转页面方法（html5点击按钮跳转页面）

php源码怎么搭建网站教程（详解php服务器环境搭建及配置）

php商城系统技术难点（一个完整的网上商城的源码）

PHP使用HTML5 FormData对象提交表单操作示例

html自学网站有哪些（html5零基础入门教程）

PHP使用HTML5 FileApi实现Ajax上传文件功能示例
