玻璃拟态的时钟制作

最新推荐文章于 2022-12-09 13:45:32 发布

卑微-程序员

最新推荐文章于 2022-12-09 13:45:32 发布

阅读量512

点赞数 2

分类专栏：前端小项目

本文链接：https://blog.csdn.net/UNknowmer/article/details/113401369

版权

html

前端小项目专栏收录该内容

9 篇文章 0 订阅

订阅专栏

直接上代码和图片，有问题的建议面向搜索引擎

图片

在这里插入图片描述
这是一张时钟图，背景是白色的，所以现在看不见，保存下来，导到vs里面就看见了。

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.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>
    <script src="js/index.js"></script>
</body>
</html>

css

*{
    padding: 0;
    margin: 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);
    animation: animate 5s ease-in-out infinite;
}
@keyframes animate{
    0%,100%{
        transform: translateY(10px);
    }
    50%{
        transform: translateY(-10px);
    }
}
.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%;
}
.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;
}
.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;
    box-shadow: -10px -10px 20px rgba(255,255,255,0.1),
    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: #fff;
    border-radius: 50%;
    z-index: 10000;
}
.hour,.min,.sec{
    position: absolute;
}
.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: #fff;
    z-index: 11;
    border-radius: 6px;
}
.mn::before{
    content: '';
    position: absolute;
    width: 4px;
    height: 90px;
    background: #fff;
    z-index: 12;
    border-radius: 6px;
}
.sc::before{
    content: '';
    position: absolute;
    width: 2px;
    height: 150px;
    background: #fff;
    z-index: 12;
    border-radius: 6px;
}

js

const deg = 6;
const hr = document.querySelector('#hr');
const mn = document.querySelector('#mn');
const sc = document.querySelector('#sc');
/**
 * 修改transform语句使用的符号是``而不是''
 * 是在ES6新增的模板字符串
 * 可以理解为
 * "hello"+str+"world!"
 * `hello ${str} world!`
 */
/**
 * setInterval设置刷新的时间间隔
 */
setInterval(()=>{
    let day = new Date();
    let hh = day.getHours() * 30;
    let mm = day.getMinutes() * deg;
    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)`;
})

成品

html和png图片都是单独放出来的，css有一个文件夹，js有一个文件夹
在这里插入图片描述

卑微-程序员

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
玻璃拟态的时钟制作

直接上代码和图片，有问题的建议面向搜索引擎图片这是一张时钟图，背景是白色的，所以现在看不见，保存下来，导到vs里面就看见了。html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
复制链接

扫一扫