菲尔莱斯科技

新闻详情

阴天与晴天（可复制源代码）

 二维码 1170
发表时间：2024-10-01 23:24

阴天与晴天（可复制源代码），网站设计阴天与晴天按钮素材：

图片
源代码
<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>阴天与晴天</title>
   <style>
    html,body{height:100%;margin:0;padding:0}body{display:flex;align-items:center;justify-content:center;background:#003;overflow:hidden}.toggle{position:relative;width:60vmin;height:30vmin}input,label{position:absolute;top:0;left:0;width:100%;height:100%}input{opacity:0;cursor:pointer}label{border-radius:30vmin;background:#67a;pointer-events:none}input:checked ~ label{background:#39f}.sun{position:absolute;top:3vmin;left:3.5vmin;width:24vmin;height:24vmin;background:#ccb;border-radius:100%;transition:left 0.5s ease}.sun::before{position:absolute;content:'';width:25vmin;height:25vmin;background:#ffa;filter:blur(8vmin);opacity:0;transition:opacity 0.5s ease-in}input:checked ~ label .sun{left:32.5vmin;background:#fc8}input:checked ~ label .sun::before{opacity:0.75}.clouds{position:absolute;top:0;left:0;width:50%;height:100%;overflow:hidden;border-radius:100% 0 0 100%}input:checked ~ label .clouds .cloud{left:-100%}.cloud{position:absolute;width:100%;height:50%;left:-1vmin;transition:left 0.5s ease}.cloud:last-child{left:2vmin;top:40%;transform:rotate3d(0,1,0,180deg);transition-delay:0.1s}.cloud .circle{position:absolute;left:3vmin;top:7vmin;background:#36a;border-radius:100%;width:6vmin;height:6vmin}.cloud .circle:nth-child(1){left:6vmin;top:2.5vmin;width:12vmin;height:12vmin}.cloud .circle:nth-child(2){top:5vmin;left:14vmin;width:9vmin;height:9vmin}.cloud .circle:nth-child(3){top:8vmin;left:21vmin;height:5vmin;width:5vmin}
   </style>
</head>

<body>

   <div class="toggle">
    <input type="checkbox" name="toggle" />
    <label for="toggle">
      <div class="sun"></div>
      <div class="clouds">
        <div class="cloud">
          <div class="circle"></div>
          <div class="circle"></div>
          <div class="circle"></div>
          <div class="circle"></div>
        </div>
        <div class="cloud">
          <div class="circle"></div>
          <div class="circle"></div>
          <div class="circle"></div>
          <div class="circle"></div>
        </div>
      </div>
    </label>
   </div>
</body>

</html>






分享到：
咨询热线
   0411-39550725
技术咨询服务
售前咨询
备案咨询
代理咨询
菲尔莱斯——我思故我在  
精品模板
网站模板
商城模板
小程序模板
微传单
教育系统模板
门店系统
互动营销
云设计
产品功能
网站功能
商城功能
轻应用小程序功能
微传单功能
教育系统功能
门店系统模板
互动营销功能
云设计功能
AI人工智能
GEO优化
AI速创
知识产权
智能销售
-                                                                                                                                                                                                     -
友情链接：
其他
生成二维码
源码下载
ERP系统
图片压缩
加盟合作
免费网站申请
绿雪AI
website qrcode

扫描查看手机版网站

微科技
寻商系统
卡罗莱纳死神