css实现立体逼真时钟走动动画效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现立体逼真时钟走动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Merriweather|Open+Sans:300,400,700" rel="stylesheet">
<style>
html {
font-size: 1vw;
}
@media screen and (min-width: 700px) {
html {
font-size: 7px;
}
}
@media screen and (max-width: 400px) {
html {
font-size: 4px;
}
}
body {
width: 100vw;
height: 100vh;
background: linear-gradient(180deg, #F0EEEd, #E4E2E2);
font-family: "Open Sans", sans-serif;
filter: hue-rotate(5deg) saturate(130%) blur(0.3px);
}
.clock {
position: absolute;
top: 40%;
left: 50%;
width: 40rem;
height: 40rem;
border-radius: 40rem;
transform: translate3d(-50%, -50%, 0);
background: #F0EEEd;
box-shadow: 1.5rem 3rem 2rem rgba(146, 135, 121, 0.15), 0.5rem 1rem 1.5rem rgba(104, 93, 82, 0.8), inset 0 0 0.4rem rgba(104, 93, 82, 0.2), inset -0.2rem -0.1rem 0.4rem rgba(146, 135, 121, 0.4), 2rem 6rem 7rem rgba(146, 135, 121, 0.3);
}
.face {
position: absolute;
top: 50%;
left: 50%;
width: 35rem;
height: 35rem;
border-radius: 50rem;
transform: translateX(-50%) translateY(-5.........完整代码请登录后点击上方下载按钮下载查看
网友评论0