纯css动态时钟
来源：互联网 发布：doodle jump 源码 编辑：程序博客网 时间：2024/05/18 02:47
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>岳瑞涛的摇摆钟</title>
<styletype="text/css">
body {
background-color: #5EC6C4;
text-align: center;
height: 100%;
margin: 0px;
}
#cuckoo {
margin: 14pxauto;
position: relative;
height: 510px;
width: 510px;
}
#cuckoo div {
position: absolute;
}
#cuckoo div::before,
#cuckoo div::after {
content: '';
position: absolute;
display: block;
}
.house {
width: 277px;
height: 102px;
background-color: #FFF1DA;
border-top: 5pxsolid #b44127;
border-bottom: 7px solid #e7c5b4;
top: 221px;
left: 116px;
}
.house::before {
width: 186px;
height: 127px;
background-color: #FFF1DA;
border-top: 5pxsolid #b44127;
border-bottom: 7px solid #e7c5b4;
left: 45px;
top: -144px;
}
.house::after {
width: 375px;
height: 13px;
background-color: #B44127;
bottom: -20px;
left: -49px;
z-index: 10;
}
.arches {
width: 47px;
height: 57px;
border-radius: 50px 47px 00;
background-color: #e7c5b4;
box-shadow: -2px0px 0 2px #797a7b, -2px 0px 05px #B44126,177px 0px 0 1px #e7c5b4,179px 0px 0 2px #797a7b,179px 0px 0 5px #B44126,58px -160px0 1px #5EC6C4, 56px -160px 0 2px#797a7b, 56px-160px 0 5px #B44126, 120px -160px 0 1px #5EC6C4,122px -160px0 2px #797a7b, 122px -160px 0 5px#B44126;
top: 278px;
left: 142px;
}
.arches::before {
width: 130px;
height: 7px;
background-color: #B44126;
top: -102px;
left: 47px;
}
.arches::after {
width: 65px;
height: 47px;
border-radius: 36px 36px 00;
border: 5pxsolid #b44127;
border-bottom: 5px solid transparent;
background-color: #fff1dc;
top: -248px;
left: 75px;
}
.ornament {
width: 213px;
height: 27px;
background-color: #FFF1DA;
bottom: 135px;
left: 148px;
}
.ornament::before {
width: 143px;
height: 17px;
background-color: #FFF1DA;
top: 27px;
left: 35px;
}
.ornament::after {
width: 53px;
height: 17px;
background-color: #FFF1DA;
top: 44px;
left: 80px;
}
.details::after {
width: 40px;
height: 5px;
background-color: #b44127;
box-shadow: 160px0 #b44127, 40px 15px #b44127,120px 15px #b44127, 80px 32px #b44127;
top: 365px;
left: 155px;
}
.details::before {
width: 5px;
height: 17px;
background-color: #b44127;
box-shadow: 195px0 #b44127, 35px 20px #b44127,160px 20px #b44127, 80px 32px #b44127, 115px 32px #b44127;
top: 348px;
left: 155px;
}
.trees {
width: 31px;
height: 86px;
border-radius: 15px 15px 00;
background-image: linear-gradient( 90deg, #47a748 50%, #c0dd97 50%);
top: 249px;
left: 95px;
}
.trees::before {
width: 31px;
height: 86px;
border-radius: 15px 15px 00;
background-image: linear-gradient( 90deg, #c0dd97 50%, #47a748 50%);
left: 287px;
}
.trees::after {
width: 38px;
height: 19px;
border-radius: 19px 19px 00;
background-color: #c0dd97;
box-shadow: 329px0 #c0dd97;
bottom: 0px;
left: -24px;
}
.decor {
width: 360px;
height: 6px;
background-color: #f89c67;
top: 348px;
left: 73px;
}
.decor::before {
width: 8px;
height: 8px;
background-color: #f5926d;
box-shadow: 1px0px #b44126,24px 0px #F5926D, 25px 0px #b44126, 128px 0px #F5926D,129px 0px #b44126, 152px 0px #F5926D, 153px 0px #b44126,-46px 140px#F5926D, -45px140px #b44126,-22px 140px#F5926D, -21px140px #b44126,2px 140px #F5926D, 3px 140px #b44126, 151px 140px #F5926D, 152px 140px #b44126, 175px 140px #F5926D, 176px 140px #b44126, 199px 140px #F5926D, 200px 140px #b44126;
border-radius: 50%;
bottom: 252px;
left: 100px;
}
.decor::after {
width: 12px;
height: 6px;
background-color: #b44126;
border-radius: 6px 6px 00;
box-shadow: 12px0px #b44126,24px 0px #b44126, 36px 0px #b44126, 48px 0px #b44126,126px 0px #b44126, 138px 0px #b44126, 150px 0px #b44126,162px 0px #b44126, 174px 0px #b44126, -45px 138px #b44126, -33px 138px #b44126, -21px 138px #b44126, -9px 138px #b44126, 3px 138px #b44126,15px 138px #b44126, 27px 138px #b44126, 148px 138px #b44126, 160px 138px #b44126, 172px 138px #b44126, 184px 138px #b44126, 196px 138px #b44126, 208px 138px #b44126, 220px 138px #b44126;
bottom: 270px;
left: 88px;
}
.bell {
width: 15px;
height: 18px;
border-radius: 40px 40px 00;
background-color: #f9ed32;
box-shadow: 0px11px 0 10px #5EC6C4, 0px 11px 013px #b44126;
top: 46px;
left: 247px;
}
.bell::before {
width: 19px;
height: 4px;
background-color: #f9ed32;
top: 15px;
left: -2px;
}
.bell::after {
width: 2px;
height: 100px;
background-image: linear-gradient( #444444 50%, transparent 50%);
top: 161px;
left: 6px;
-o-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-webkit-transform: rotate(-35deg);
transform: rotate(-35deg);
animation: tock 60s infinite linear;
-o-animation: tock 60s infinite linear;
-ms-animation: tock 60s infinite linear;
-moz-animation: tock 60s infinite linear;
-webkit-animation: tock 60s infinite linear;
}
@keyframes tock {
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
.clock {
width: 10px;
height: 10px;
background-color: #444444;
border-radius: 50%;
border: 48pxsolid white;
box-shadow: 00 0 1px #b5acac, 0 0 07px #dbb9b9,0 0 0 17px #b44126;
top: 204px;
left: 201px;
}
.clock::before {
width: 4px;
height: 30px;
background-color: #444444;
border-radius: 2px 2px 00;
top: -28px;
left: 3px;
}
.clock::after {
width: 38px;
height: 4px;
background-color: #444444;
border-radius: 0 2px 2px0;
bottom: 3px;
left: 3px;
}
.pendulum {
width: 4px;
height: 340px;
background-color: #b44126;
top: 88px;
left: 252px;
-o-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
animation: tick 2s infinite ease;
-o-animation: tick 2s infinite ease;
-ms-animation: tick 2s infinite ease;
-moz-animation: tick 2s infinite ease;
-webkit-animation: tick 2s infinite ease;
}
@keyframes tick {
50% {
transform: rotate(30deg);
}
}
.pendulum::before {
width: 30px;
height: 30px;
border-radius: 15px;
background-color: #B44126;
bottom: -30px;
left: -12px;
}
.people {
width: 20px;
height: 20px;
border-radius: 20px 20px;
background-color: #444444;
box-shadow: 028px #444444,64px 0 #444444, 64px 28px #444444;
top: 128px;
left: 213px;
}
.people::before {
width: 30px;
height: 25px;
border-radius: 20px 20px 00;
background-color: #444444;
box-shadow: 64px0 #444444;
top: 17px;
left: -5px;
}
.people::after {
width: 26px;
height: 3px;
background-color: #444444;
box-shadow: 0-1px white,64px 0 #444444, 64px -1px white;
top: 6px;
left: -3px;
}
.door {
width: 49px;
height: 59px;
border-radius: 50px 47px 00;
background-color: #e7c5b4;
box-shadow: 63px0 0 #e7c5b4;
top: 117px;
left: 199px;
animation: cuckoo 60s infinite ease;
-o-animation: cuckoo 60s infinite ease;
-ms-animation: cuckoo 60s infinite ease;
-moz-animation: cuckoo 60s infinite ease;
-webkit-animation: cuckoo 60s 4s infinitelinear;
}
@keyframes cuckoo {
1% {
background-color: #e7c5b4;
box-shadow: 63px0 0 #e7c5b4;
}
2% {
background-color: transparent;
box-shadow: 63px0 0 transparent;
}
19% {
background-color: transparent;
box-shadow: 63px0 0 transparent;
}
20% {
background-color: #e7c5b4;
box-shadow: 63px0 0 #e7c5b4;
}
}
</style>
</head>
<body>
<div id="cuckoo">
<div class="pendulum"></div>
<div class="house"></div>
<div class="arches"></div>
<div class="clock"></div>
<div class="ornament"></div>
<div class="details"></div>
<div class="decor"></div>
<div class="trees"></div>
<div class="bell"></div>
<div class="people"></div>
<div class="door"></div>
</div>
</body>
</html>
0 0
- 纯css动态时钟
- html+css+js 动态时钟
- css+javascript特效：时钟（无图片纯div实现）
- 纯HTML+CSS编写动态下拉菜单
- 纯JavaScript时钟
- 纯JavaScript时钟
- 纯JavaScript时钟
- 纯as时钟
- 纯CSS3时钟
- 纯js数字时钟
- 纯java时钟
- 【CSS3】纯CSS代码实现模拟时钟，+js对时功能。
- 动态时钟
- 动态时钟
- 动态时钟
- 动态时钟
- 笔记 纯css绘制三角形原理动态演示链接地址
- css画圆, 如何用纯css实现一个动态画圆环效果
- 读书笔记--MySQL技术内幕(一)
- leetcode解题之 17. Letter Combinations of a Phone Number java 版（键盘排列）
- 从一个HashMap中把一个value为Set类型的元素取出来，然后add添加一个元素，Map也有新添加的元素了
- 使用selemium Remote调用firefox报"WebDriver: Cannot find firefox binary in PATH."的解决办法
- openGL 基本绘制方式比较
- 纯css动态时钟
- Tornado高并发处理方法
- Kali-WIFI攻防(六)----WPA密码破解之aircrack-ng
- JS实现多张图片绕中心点转动
- 串的模式匹配算法
- Windows下配置Git环境并Clone工程
- Linux常见命令
- Dojo2的本地安装
- Android Studio下JNI编程（引入外部或AS自行编译so文件）
