菜单 搜索
首页 前端知识 有小伙伴想要的纯原生版代码

有小伙伴想要的纯原生版代码

2024-03-20 11:03:53 前端知识 前端哥 419 241 我要收藏

新手朋友看这里：文件夹新建一个.html后缀的文件，然后代码复制进去保存，直接双击打开就可以看到效果了。

简单讲一下思路：
仔细分析下这个按钮的元素
可以发现除了星星，全都是圆形，云也是很多个圆组成的。那就直接用圆形去排版就好了，全部用absolute定位，调整好位置。
然后星星最简单的实现方法就是用svg，path > d里面用c可以实现三次贝塞尔画路径，这样星星形状也解决了。
最后布局定好之后就是动效，css>transition可以搞定所有动效。在这个基础上可以再优化，比如回弹效果，只要把ease-in-out改成自定义贝塞尔曲线就行。例如改成：transition: all 0.6s cubic-bezier(0.39, 0.06, 0.32, 1.34);

上代码：（原谅我点击事件用的jq，实在不想写了）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Day & Night 按钮示例</title>
    <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
  </head>
  <body>
    <span class="button" id="button">
      <span class="btnInner">
        <span class="circle">
          <span class="circleNight">
            <span class="crater"></span>
            <span class="crater crater2"></span>
            <span class="crater crater3"></span>
          </span>
        </span>
        <span class="haloBox">
          <span class="halo"></span>
          <span class="halo halo2"></span>
          <span class="halo halo3"></span>
        </span>
        <span class="clouds">
          <span class="cloud"></span>
          <span class="cloud cloud2"></span>
          <span class="cloud cloud3"></span>
          <span class="cloud cloud4"></span>
          <span class="cloud cloud5"></span>
          <span class="cloud cloud6"></span>
          <span class="cloud cloud7"></span>
        </span>
        <span class="clouds clouds2">
          <span class="cloud"></span>
          <span class="cloud cloud2"></span>
          <span class="cloud cloud3"></span>
          <span class="cloud cloud4"></span>
          <span class="cloud cloud5"></span>
          <span class="cloud cloud6"></span>
          <span class="cloud cloud7"></span>
        </span>
        <span class="stars">
          <span class="star">
            <svg version="1.1" viewBox="0 0 20 20" height="20" width="20" style="width: 100%; height: 100%;"><path d="M 0 10 c 5 0 10 -5 10 -10 c 0 5 5 10 10 10 c -5 0 -10 5 -10 10 c 0 -5 -5 -10 -10 -10" stroke="#fff" stroke-width="1" fill="#fff"></path></svg>
          </span>
          <span class="star star2">
            <svg version="1.1" viewBox="0 0 20 20" height="20" width="20" style="width: 100%; height: 100%;"><path d="M 0 10 c 5 0 10 -5 10 -10 c 0 5 5 10 10 10 c -5 0 -10 5 -10 10 c 0 -5 -5 -10 -10 -10" stroke="#fff" stroke-width="1" fill="#fff"></path></svg>
          </span>
          <span class="star star3">
            <svg version="1.1" viewBox="0 0 20 20" height="20" width="20" style="width: 100%; height: 100%;"><path d="M 0 10 c 5 0 10 -5 10 -10 c 0 5 5 10 10 10 c -5 0 -10 5 -10 10 c 0 -5 -5 -10 -10 -10" stroke="#fff" stroke-width="1" fill="#fff"></path></svg>
          </span>
          <span class="star star4">
            <svg version="1.1" viewBox="0 0 20 20" height="20" width="20" style="width: 100%; height: 100%;"><path d="M 0 10 c 5 0 10 -5 10 -10 c 0 5 5 10 10 10 c -5 0 -10 5 -10 10 c 0 -5 -5 -10 -10 -10" stroke="#fff" stroke-width="1" fill="#fff"></path></svg>
          </span>
          <span class="star star5">
            <svg version="1.1" viewBox="0 0 20 20" height="20" width="20" style="width: 100%; height: 100%;"><path d="M 0 10 c 5 0 10 -5 10 -10 c 0 5 5 10 10 10 c -5 0 -10 5 -10 10 c 0 -5 -5 -10 -10 -10" stroke="#fff" stroke-width="1" fill="#fff"></path></svg>
          </span>
          <span class="star star6">
            <svg version="1.1" viewBox="0 0 20 20" height="20" width="20" style="width: 100%; height: 100%;"><path d="M 0 10 c 5 0 10 -5 10 -10 c 0 5 5 10 10 10 c -5 0 -10 5 -10 10 c 0 -5 -5 -10 -10 -10" stroke="#fff" stroke-width="1" fill="#fff"></path></svg>
          </span>
          <span class="star star7">
            <svg version="1.1" viewBox="0 0 20 20" height="20" width="20" style="width: 100%; height: 100%;"><path d="M 0 10 c 5 0 10 -5 10 -10 c 0 5 5 10 10 10 c -5 0 -10 5 -10 10 c 0 -5 -5 -10 -10 -10" stroke="#fff" stroke-width="1" fill="#fff"></path></svg>
          </span>
          <span class="star star8">
            <svg version="1.1" viewBox="0 0 20 20" height="20" width="20" style="width: 100%; height: 100%;"><path d="M 0 10 c 5 0 10 -5 10 -10 c 0 5 5 10 10 10 c -5 0 -10 5 -10 10 c 0 -5 -5 -10 -10 -10" stroke="#fff" stroke-width="1" fill="#fff"></path></svg>
          </span>
          <span class="star star9">
            <svg version="1.1" viewBox="0 0 20 20" height="20" width="20" style="width: 100%; height: 100%;"><path d="M 0 10 c 5 0 10 -5 10 -10 c 0 5 5 10 10 10 c -5 0 -10 5 -10 10 c 0 -5 -5 -10 -10 -10" stroke="#fff" stroke-width="1" fill="#fff"></path></svg>
          </span>
          <span class="star star10">
            <svg version="1.1" viewBox="0 0 20 20" height="20" width="20" style="width: 100%; height: 100%;"><path d="M 0 10 c 5 0 10 -5 10 -10 c 0 5 5 10 10 10 c -5 0 -10 5 -10 10 c 0 -5 -5 -10 -10 -10" stroke="#fff" stroke-width="1" fill="#fff"></path></svg>
          </span>
        </span>
      </span>
    </span>
  </body>
 
  <script>
    $(document).ready(function(e) {
      $('#button').click(function() {
        toggleClass()
      })
      function toggleClass() {
        $('#button').toggleClass('night')
      }
    })
  </script>
 
  <style type="text/css">
    .button {
      display: inline-block;
      line-height: 0;
      cursor: pointer;
    }
    .btnInner {
      transition: all  0.6s ease-in-out;
      line-height: 0;
      display: inline-block;
      position: relative;
      height: 66px;
      width: 150px;
      border-radius: 100px;
      background: #1c80da;
      box-shadow: inset 0 2px 6px #000, 0 0 3px rgba(0,0,0,0.6);
      overflow: hidden;
    }
    .circle {
      transition: all  0.6s ease-in-out;
      position: absolute;
      z-index: 2;
      overflow: hidden;
      width: 54px;
      height: 54px;
      top: 6px; left: 6px;
      background: #ffdd08;
      border-radius: 100px;
      box-shadow: 0px 0px 5px rgba(0,0,0,0.6), inset -0.5px -1px 3px rgba(0,0,0,0.6), inset 1px 1px 3px rgba(255,255,255,0.8);
    }
    .circle .circleNight {
      transition: all  0.6s ease-in-out;
      position: absolute;
      top: 0; 
      left: 101%;
      width: 100%;
      height: 100%;
      border-radius: 100px;
      background: #c7d0da;
      box-shadow: 0px 0px 5px rgba(0,0,0,0.6), inset -0.5px -1px 2px rgba(0,0,0,0.6), inset 1px 1px 2px rgba(255,255,255,0.8);
    }
    .circle .crater {
      position: absolute;
      width: 25%;
      height: 25%;
      top: 12%;
      left: 44%;
      border-radius: 100px;
      background: #909baf;
    }
    .circle .crater2 {
      width: 34%;
      height: 34%;
      top: 42%;
      left: 16%;
    }
    .circle .crater3 {
      width: 19%;
      height: 19%;
      top: 62%;
      left: 63%;
    }
    
    .haloBox {
      transition: all  0.6s ease-in-out;
      position: absolute;
      z-index: 1;
      width: 0; height: 0;
      left: 33px;
      top: 33px;
    }
    .haloBox .halo {
      transition: all  0.6s ease-in-out;
      width: 92.4px;
      height: 92.4px;
      position: absolute;
      background: #fff;
      opacity: 0.1;
      border-radius: 1000px;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
    }
    .haloBox .halo2 {
      width: 117.4px;
      height: 117.4px;
    }
    .haloBox .halo3 {
      width: 142.4px;
      height: 142.4px;
    }
 
    .clouds {
      transition: all  0.6s ease-in-out;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0.3;
      transition-delay: 0s;
    }
    .clouds .cloud {
      position: absolute;
      background: #fff;
      border-radius: 100px;
      width: 59.4px;
      height: 59.4px;
      top: -17%;
      left: 84%;
    }
    .clouds2 {
      transition-delay:  0.3s;
      top: 19%;
      left: -5%;
      opacity: 1;
      transform: rotate(5deg);
    }
    .clouds2 .cloud {
      top: 2%;
      left: 92%;
      
    }
    .clouds2 .cloud2 {
      top: 39%;
      left: 69%;
    }
 
    .clouds .cloud2 {
      width: 44.88px;
      height: 44.88px;
      top: 39%;
      left: 69%;
    }
    .clouds .cloud3 {
      width: 48.18px;
      height: 48.18px;
      top: 47%;
      left: 54%;
    }
    .clouds .cloud4 {
      width: 33px;
      height: 33px;
      top: 64%;
      left: 49.7%;
    }
    .clouds .cloud5 {
      width: 37.62px;
      height: 37.62px;
      top: 64%;
      left: 32%;
    }
    .clouds .cloud6 {
      width: 48.18px;
      height: 48.18px;
      top: 81%;
      left: 13%;
    }
    .clouds .cloud7 {
      width: 29.7px;
      height: 29.7px;
      top: 85%;
      left: 7%;
    }
 
    .stars {
      transition: all  0.6s ease-in-out;
      position: absolute;
      top: -100%;
      left: 0;
      width: 100%;
      height: 100%;
      
    }
    .stars .star {
      transition: all  0.6s ease-in-out;
      transform: translateY(-20px);
      display: inline-block;
      position: absolute;
      left: 20%;
      top: 20%;
      width: 10px;
    }
    .stars .star2 {
      left: 10%;
      top: 30%;
      width: 4px;
      transition-delay: 0.1s;
    }
    .stars .star3 {
      left: 20%;
      top: 48%;
      width: 3px;
      transition-delay: 0.15s;
    }
    .stars .star4 {
      left: 11%;
      top: 76%;
      width: 4px;
      transition-delay: 0.24s;
    }
    .stars .star5 {
      left: 16%;
      top: 71%;
      width: 4px;
      transition-delay: 0.20s;
    }
    .stars .star6 {
      left: 23%;
      top: 79%;
      width: 5px;
      transition-delay: 0.26s;
    }
    .stars .star7 {
      left: 44%;
      top: 26%;
      width: 4px;
      transition-delay: 0.04s;
    }
    .stars .star8 {
      left: 37%;
      top: 50%;
      width: 4px;
      transition-delay: 0.14s;
    }
    .stars .star9 {
      left: 44%;
      top: 68%;
      width: 6px;
      transition-delay: 0.12s;
    }
    .stars .star10 {
      left: 52%;
      top: 37%;
      width: 8px;
      transition-delay: 0.05s;
    }
    
    .night .btnInner {
      background: #252525;
    }
    .night .circle {
      left: 90px;
    }
    .night .circle .circleNight {
      left: 0;
    }
    .night .haloBox {
      left: 122px;
    }
    .night .haloBox .halo {
      opacity: 0.13;
    }
    .night .clouds {
      top: 100%;
      transition-delay:  0.3s;
    }
    .night .clouds2 {
      transition-delay: 0s;
    }
    .night .stars {
      top: 0;
    }
    .night .stars .star {
      transform: translateY(0);
    }
 
    .button:hover .circle {
      transform: translateX(5px);
    }
    .button:hover .haloBox {
      transform: translateX(5px);
    }
    .night:hover  .circle {
      transform: translateX(-5px);
    }
    .night:hover .haloBox {
      transform: translateX(-5px);
    } 
  </style>
</html>
复制
转载请注明出处或者链接地址：https://www.qianduange.cn//article/3996.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

jQuery中把时间戳转换为日期的方法(封装好了直接用)

2024-04-13 23:04:29

JQuery操作DOM

2024-04-13 23:04:28

jQuery库

2024-04-13 23:04:28

基于html css javascript jquery制作北京景点介绍7页 WEB静态旅游景点区主题网页设计与制作

2024-04-13 23:04:22

jQuery中Ajax的$.get()、$.post()、$.ajax()函数

2024-04-13 23:04:14

【Echart地图】jQuery html5基于echarts.js中国地图点击弹出下级城市地图（附完整源码下载）

2024-04-13 23:04:10

JQuery介绍，包括load(),get(),post()以及赋值等方法

2024-04-13 23:04:54

vue3使用echars图表报错：“Initialize failed:invalid dom“

2024-04-13 23:04:52

【无标题】

2024-04-13 23:04:51

前后端分离，前端使用echarts可视化，后端使用servlet访问数据库

2024-04-13 23:04:33

广告位招租：QQ85750956
大家推荐的文章
1

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
2

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
3

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
4

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
5

移动端css布局大全

2024-02-06 15:02:421000
6

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
7

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
8

vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999
9

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999
10

jQuery事件处理

2024-03-12 01:03:32999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！