简单的手表走动效果
代码语言:html
所属分类:动画
代码描述:简单的手表走动效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ overflow: hidden; } /* line 3, ../sass/s.scss */ #watch { position: relative; margin: 50px; } /* Bands */ /* Grippers */ /* line 11, ../sass/s.scss */ .grip { position: absolute; border: 1px solid #777; width: 12px; height: 30px; background: #eee; } /* line 18, ../sass/s.scss */ #tlg { top: -11px; left: 50px; border-radius: 8px 4px 0 0; border-left: none; box-shadow: inset 0 1px 0px #444444, inset 0 2px 0 white, inset 0 -6px 3px #444444; } /* line 25, ../sass/s.scss */ #trg { top: -11px; left: 150px; border-radius: 4px 8px 0 0; border-right: none; box-shadow: inset 0 1px 0 #444444, inset 0 2px 0 white, inset 0 -6px 3px #444444; } /* line 32, ../sass/s.scss */ #blg { top: 151px; left: 50px; border-radius: 0 0 4px 8px; border-left: none; box-shadow: inset 0 -1px 0px #444444, inset 0 -2px 0 white, inset 0 6px 3px #444444; } /* line 39, ../sass/s.scss */ #brg { top: 151px; left: 150px; border-radius: 0 0 8px 4px; border-left: none; box-shadow: inset 0 -1px 0px #444444, inset 0 -2px 0 white, inset 0 6px 3px #444444; } /* Material */ /* line 47, ../sass/s.scss */ .band { background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px, linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px, linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px, linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px, linear-gradient(90deg, #1b1b1b 10px, transparent 10px), linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424); background-color: #131313; background-size: 20px 20px; width: 87px; height: 600px; position: absolute; } /* line 54, ../sass/s.scss */ #topBand { top: -80px; left: 63px; } /* line 59, ../sass/s.scss */ #botBand { top: 140px; left: 63px; } /* Starting with the face of the watch */ /* line 65, ../sass/s.scss */ #face { background-color: #fefefe; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFEFEFE', endColorstr='#FFFFFFFF'); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fefefe), color-stop(17%, #dbd9da), color-stop(50%, #0b0d0c), color-stop(51%, #0b0e0c), color-stop(59%, #b0b1b5), color-stop(71%, #aeadbd), color-stop(84%, #cfcfcd), color-stop(100%, #ffffff)); background-image: -webkit-linear-gradient(top, #fefefe 0%, #dbd9da 17%, #0b0d0c 50%, #0b0e0c 51%, #b0b1b5 59%, #aeadbd 71%, #cfcfcd 84%, #ffffff 100%); background-image: -moz-linear-gradient(top, #fefefe 0%, #dbd9da 17%, #0b0d0c 50%, #0b0e0c 51%, #b0b1b5 59%, #aeadbd 71%, #cfcfcd 84%, #ffffff 100%); background-image: -o-linear-gradient(top, #fefefe 0%, #dbd9da 17%, #0b0d0c 50%, #0b0e0c 51%, #b0b1b5 59%, #aeadbd 71%, #cfcfcd 84%, #ffffff 100%); background-image: linear-gradient(top, #fefefe 0%, #dbd9da 17%, #0b0d0c 50%, #0b0e0c 51%, #b0b1b5 59%, #aeadbd 71%, #cfcfcd 84%, #ffffff 100%); margin: 20px; padding: 10px 0 0 10px; width: 160px; height: 160px; border: 1px solid #999; border-radius: 50%; box-shadow: inset 0 0 3px #000; position: relative; } /* line 78, ../sass/s.scss */ #face:after { content: " "; display: block; width: 14px; height: 22px; position: absolute; right: -15px; top: 74px; z-index: -9; border-radius: 10px; border: 1px solid #888; background-color: #aaa; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FF282828'); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(7%, #505050), color-stop(14%, #c5c7c6), color-stop(22%, #505050), color-stop(28%, #e6e4e7), color-stop(35%, #8d8c91), color-stop(42%, #e9e9e9), color-stop(49%, #8c8c8c), color-stop(57%, #e2e2e4), color-stop(65%, #c8c8c8), color-stop(72%, #808080), color-stop(76%, #b4b4b4), color-stop(85%, #fdfdfd), color-stop(92%, #b4b4b4), color-stop(100%, #282828)); background-image: -webkit-linear-gradient(top, #ffffff 0%, #505050 7%, #c5c7c6 14%, #505050 22%, #e6e4e7 28%, #8d8c91 35%, #e9e9e9 42%, #8c8c8c 49%, #e2e2e4 57%, #c8c8c8 65%, #808080 72%, #b4b4b4 76%, #fdfdfd 85%, #b4b4b4 92%, #282828 100%); background-image: -moz-linear-gradient(top, #ffffff 0%, #505050 7%, #c5c7c6 14%, #505050 22%, #e6e4e7 28%, #8d8c91 35%, #e9e9e9 42%, #8c8c8c 49%, #e2e2e4 57%, #c8c8c8 65%, #808080 72%, #b4b4b4 76%, #fdfdfd 85%, #b4b4b4 92%, #282828 100%); background-image: -o-linear-gradient(top, #ffffff 0%, #505050 7%, #c5c7c6 14%, #505050 22%, #e6e4e7 28%, #8d8c91 35%, #e9e9e9 42%, #8c8c8c 49%, #e2e2e4 57%, #c8c8c8 65%, #808080 72%, #b4b4b4 76%, #fdfdfd 85%, #b4b4b4 92%, #282828 100%); background-image: linear-gradient(top, #ffffff 0%, #505050 7%, #c5c7c6 14%, #505050 22%, #e6e4e7 28%, #8d8c91 35%, #e9e9e9 42%, #8c8c8c 49%, #e2e2e4 57%, #c8c8c8 65%, #808080 72%, #b4b4b4 76%, #fdfdfd 85%, #b4b4b4 92%, #282828 100%); } /* line 94, ../sass/s.scss */ #glass { box-shadow: inset 0 0 6px #000; background: #a6a39e; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFC8C5C0', endColorstr='#FFADA8A2'); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c8c5c0), color-stop(100%, #ada8a2)); background-image: -webkit-linear-gradient(top, #c8c5c0 0%, #ada8a2 100%); background-image: -moz-linear-gradient(top, #c8c5c0 0%, #ada8a2 100%); background-image: -o-linear-gradient(top, #c8c5c0 0%, #ada8a2 100%); background-image: linear-gradient(top, #c8c5c0 0%, #ada8a2 100%); width: 150px; height: 150px; border: 1px solid #999; border-radius: 80px; position: relative; /* Numbers */ } /* line 107, ../sass/s.scss */ #glass div { position: absolute; font-size: 14px; } /* line 111, ../sass/s.scss */ #glass div:nth-child(2n) { transform: rotate(-90deg); } /* line 115, ../sass/s.scss */ #glass #twelve { top: 3px; left: 65px; } /* line 116, ../sass/s.scss */ #glass #three { top: 66px; left: 135px; } /* line 117, ../sass/s.scss */ #glass #six { top: 135px; left: 67px; } /* line 118, ../sass/s.scss */ #glass #nine { top: 66px; left: 5px; } /* line 121, ../sass/s.scss */ #glass #center { background: #e1ddd2; box-shadow: inset 0 1px 1px #777777, inset 0 -1px 1px #777777; width: 110px; height: 110px; border-radius: 50%; top: 20px; left: 20px; } /* line 130, ../sass/s.scss */ #glass #center div { top: 55px; left: 55px; } /* line 134, ../sass/s.scss */ #glass #center #name, #glass #center #desc { top: 10px; left: 32px; font-variant: small-caps; font-size: 8px; } /.........完整代码请登录后点击上方下载按钮下载查看
网友评论0