时钟挂钟走动效果
代码语言:html
所属分类:动画
代码描述:时钟挂钟走动效果
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { font-size:62.5%; margin:1em; background:#232425 } ul { list-style:none; margin:0; padding:0 } #watch { font-size:1em; position:relative } #watch .frame-face { position:relative; width:30em; height:30em; margin:2em auto; border-radius:15em; background:-webkit-linear-gradient(top, #f9f9f9,#666); background:-moz-linear-gradient(top, #f9f9f9,#666); background:linear-gradient(to bottom, #f9f9f9,#666); box-shadow:rgba(0,0,0,.8) .5em .5em 4em; } #watch .frame-face:before { content:''; width:29.4em; height:29.4em; border-radius:14.7em; position:absolute; top:.3em; left:.3em; background: -webkit-linear-gradient(135deg, rgba(246,248,249,0) 0%,rgba(229,235,238,1) 50%,rgba(205,212,217,1) 51%,rgba(245,247,249,0) 100%), -webkit-radial-gradient(center, ellipse cover, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 65%,rgba(205,212,217,1) 66%,rgba(245,247,249,1) 100%); background: -moz-linear-gradient(135deg, rgba(246,248,249,0) 0%,rgba(229,235,238,1) 50%,rgba(205,212,217,1) 51%,rgba(245,247,249,0) 100%), -moz-radial-gradient(center, ellipse cover, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 65%,rgba(205,212,217,1) 66%,rgba(245,247,249,1) 100%); background: linear-gradient(135deg, rgba(246,248,249,0) 0%,rgba(229,235,238,1) 50%,rgba(205,212,217,1) 51%,rgba(245,247,249,0) 100%), radial-gradient(ellipse at center, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 65%,rgba(205,212,217,1) 66%,rgba(245,247,249,1) 100%); } #watch .frame-face:after { content:''; width:28em; height:28em; border-radius:14.2em; position:absolute; top:.9em; left:.9em; box-shadow:inset rgba(0,0,0,.2) .2em .2em 1em; border:.1em solid rgba(0,0,0,.2); background:-webkit-linear-gradient(top, #fff, #ccc); background:-moz-linear-gradient(top, #fff, #ccc); background:linear-gradient(to bottom, #fff, #ccc); } #watch .minute-marks li { display:block; width:.2em; height:.6em; background:#929394; position:absolute; top:50%; left:50%; margin:-.4em 0 0 -.1em; } #watch .minute-marks li:first-child {transform:rotate(6deg) translateY(-12.7em)} #watch .minute-marks li:nth-child(2) {transform:rotate(12deg) translateY(-12.7em)} #watch .minute-marks li:nth-child(3) {transform:rotate(18deg) translateY(-12.7em)} #watch .minute-marks li:nth-child(4) {transform:rotate(24deg) translateY(-12.7em)} #watch .minute-marks li:nth-child(5) {transform:rotate(36deg) translateY(-12.7em)} #watch .minute-marks li:nth-child(6) {transform:rotate(42deg) translateY(-12.7em)} #watch .minute-marks li:nth-child(7) {transform:rotate(48deg) translateY(-12.7em)} #.........完整代码请登录后点击上方下载按钮下载查看
网友评论0