社区首页 >专栏 >来来来，给您送🕐了

来来来，给您送🕐了

用户4793865

发布于 2023-02-03 07:32:16

35700

代码可运行

文章被收录于专栏：前端小菜鸡yym前端小菜鸡yym

运行总次数：0

代码可运行

theme: channing-cyan highlight: a11y-dark

「这是我参与2022首次更文挑战的第24天，活动详情查看：2022首次更文挑战」

源码地址：https://gitee.com/yang-yiming1234/emo_demo/tree/master/%E7%8E%BB%E7%92%83%E6%80%81%E6%97%B6%E9%92%9F

渐变背景

画出div

这里引入了外部css文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
      <div class="box">
          <div class="clock">
              <div class="hour">
                  <div class="hr" id="hr"></div>
              </div>
              <div class="min">
                  <div class="mn" id="mn"></div>
              </div>
              <div class="sec">
                  <div class="sc" id="sc"></div>
              </div>
          </div>
      </div>
  </div>
</body>

</html>

添加样式

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
body::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: linear-gradient(45deg,#e91e63,#e91e63 50%,#ffc107 50%,#ffc107);
}
body::after{
    content:'';
    position:absolute;
    top:-20px;
    left:0;
    width:100%;
    height:100%;
    background: linear-gradient(160deg,#03a9f4,#03a9f4 50%,transparent 50%,transparent);
    
}

*

*是通配符，选择所有元素的意思

vh

首先说一下——视窗：视窗即window.innerWidth/window.innerHeight。

vh是视窗单位，1vh = 1%的视窗高度。vw也是同理。

::before

body::before在每个body前插入内容，当然body只有一个。content是文本内容。

linear-gradient

用于创建渐变

/* 从上到下，蓝色渐变到红色 */ 
linear-gradient(blue, red); 
/* 渐变轴为45度，从蓝色渐变到红色 */ 
linear-gradient(45deg, blue, red); 
/* 从右下到左上、从蓝色渐变到红色 */ 
linear-gradient(to left top, blue, red); 
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */ 
linear-gradient(0deg, blue, green 40%, red);

到现在为止实现了一个渐变背景

动画

背景动画

@keyframes

把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

规定动画的名称
规定动画的时长

给 body::after 添加 animation: animate 5s ease-in-out infinite;

body::after{
    content:'';
    position:absolute;
    top:-20px;
    left:0;
    width:100%;
    height:100%;
    background: linear-gradient(160deg,#03a9f4,#03a9f4 50%,transparent 50%,transparent);
    /*  animate就是选择器的动画名称 时长     ease-in-out动画以低速开始和结束 */
    animation: animate 5s ease-in-out infinite;
}
@keyframes animate{
    0%{
        /* 沿着旋转Y轴 */
        transform: translateY(10px);
    }
    50%{
        transform: translateY(-10px);
    }
}

钟表容器动画

.box{
    position: relative;
    z-index:1;
    width: 400px;
    height:400px;
    backdrop-filter:blur(25px);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.5);
    animation: animate 5s ease-in-out infinite;
    animation-delay: -2.5s ;
}

容器底部阴影效果

.container{
    position: relative;
}
.container::before{
    content:'';
    position:absolute;
    bottom:-150px;
    width:100%;
    height:60px;
    background: radial-gradient(rgba(0,0,0,0.2),transparent,transparent);
    border-radius: 50%;
}

radial-gradient()

radial-gradient() 函数用径向渐变创建 "图像"。径向渐变由中心点定义。为了创建径向渐变你必须设置两个终止色。

这个图更明显

我们的两个终止色是透明色。

添加时钟

添加个时钟图片

.clock{
    position: absolute;
    top:10px;
    left:10px;
    right:10px;
    bottom:10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(transparent,rgba(255,255,255,0.2)),url(clock.png);
    background-size: cover;
    border-radius: 50%;
    backdrop-filter: blur(25px);
    border:1px solid rgba(255,255,255,0.5);
    border-bottom:none;
    border-right:none;
    /* 为clock添加阴影 有一个从左上到右下浅色到深色的渐变 */
    box-shadow: -10px -10px 20px rgba(255,255,255,0.21),
                10px 10px 20px rgba(0,0,0,0.1),
                0px 40px 50px rgba(0,0,0,0.2);
}
}

画指针和中心圆点

中心圆点

.clock::before{
    content:'';
    position:absolute;
    width:15px;
    height:15px;
    background-color: #fff;
    border-radius: 50%;
    z-index:100;
}

指针

时针最短然后是分针秒针最长

/* 时针分针秒针的长度不通 */
.hour, .hr
{
    width:160px;
    height: 160px;
}
.min, .mn{
    width:190px;
    height:190px;
}
.sec, .sc{
    width: 230px;
    height:230px;
}
.hr, .mn, .sc{
    display: flex;
    justify-content: center;
    position: absolute;
    border-radius:50%;
}

时针

.hr::before{
    content:'';
    position: absolute;
    width: 8px;
    height:80px;
    background-color: #ff1053;
    z-index:12;
}

分针

.mn::before{
    content:'';
    position: absolute;
    width: 4px;
    height:90px;
    background-color: #fff;
    z-index:13;
    border-radius:6px;
}

秒针

 .sc::before{
    content:'';
    position: absolute;
    width: 2px;
    height:150px;
    background-color: #fff;
    z-index:14;
    border-radius:6px;
}

js实现动态时针

这里使用setInterval()让其更新。通过querySelector选择元素，然后使用hr.style.transform改变样式

    <script>
        const deg = 6;
                // querySelector选择元素
        const hr = document.querySelector('#hr');
        const mn = document.querySelector('#mn');
        const sc = document.querySelector('#sc');
        setInterval(() => {
            let day = new Date();
            //   12小时 360/12 所以每一个小时30°
            let hh = day.getHours() * 30;
            // 1h=60m 360/60 所以每分钟6°
            let mm = day.getMinutes() * deg;
            //  同样1s 6°  
            let ss = day.getSeconds() * deg;
                        // 添加样式
            // 时针的旋转度数 会跟着分针旋转
            hr.style.transform = `rotateZ(${hh + (mm / 12)}deg)`;
            mn.style.transform = `rotateZ(${(mm)}deg)`;
            sc.style.transform = `rotateZ(${(ss)}deg)`;
        })

    </script>