late指针动画特效
代码语言:html
所属分类:动画
代码描述:late指针动画特效
代码标签: 特效
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet" />
<style>
body {
width: 100%;
height: 100vh;
overflow: hidden;
display: -webkit-box;
display: flex;
font-family: "Poppins", monospace;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
main {
display: -webkit-box;
display: flex;
-webkit-box-flex: 1;
flex: 1;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
background: #f0eef5;
}
.text {
color: #141312;
font-size: 8rem;
}
.clock {
width: 1.8rem;
height: 1.8rem;
display: -webkit-box;
display: flex;
margin: 8rem 1rem 0 0;
position: relative;
}
.clock span {
position: relative;
z-index: 10;
border-radius: 50%;
background: #141312;
-webkit-box-flex: 1;
flex: 1;
box-shadow: 0 0 2rem -0.1rem rgba(0, 0, 0, 0.2);
}
.clock:after,
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0