纯css实现手表时间走动动画效果
代码语言:html
所属分类:动画
代码描述:纯css实现手表时间走动动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { font-size: 10px; background-size: 500px; background-position: 51% -6%; } @media (max-width: 599px) { body { font-size: 6px; background: #fff; } } body .watch { width: 40em; height: 69em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } body .watch .band .top { width: 26em; height: 5.93em; position: absolute; background: transparent; top: 27%; left: 18%; background-repeat: no-repeat; } body .watch .band .top:after { content: ''; position: absolute; top: -10em; left: 50%; transform: translate(-50%, 0); width: 18em; height: 15em; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 48%, transparent 54%) 50% 17.3%/16.6em 15em, linear-gradient(92deg, #fff 48%, transparent 54%) 0% 0%/1.7em 6.8em, linear-gradient(-92deg, #fff 48%, transparent 54%) 100% 0%/1.7em 6.8em, linear-gradient(#333 48%, #333 54%) 50% 17.3%/16.6em 15em; background-repeat: no-repeat; } body .watch .band .top:before { width: 26em; height: 5.93em; content: ''; background: linear-gradient(-97deg, #fff 50%, rgba(51, 51, 51, 0.4) 52%, transparent 53%) 100% 17.3%/4.6em 100%, linear-gradient(97deg, #fff 50%, rgba(51, 51, 51, 0.4) 52%, transparent 53%) 0% 17.3%/4.6em 100%, linear-gradient(to right, rgba(255, 255, 255, 0.2), #EFD5B2, rgba(255, 255, 255, 0.2)) 0% 17.3%/100% 100%, linear-gradient(to bottom, #D2B394, #C7A582) 0% 17.3%/100% 100%, #edd3b0; position: absolute; top: -3em; background-repeat: no-repeat; } body .watch .band .bottom { width: 26em; height: 8.3em; position: absolute; background: red; top: 54%; left: 18%; background-repeat: no-repeat; } body .watch .band .bottom:after { content: ''; position: absolute; top: 10em; left: 50%; transform: translate(-50%, 0); width: 18em; height: 25em; background: linear-gradient(-94deg, transparent 48%, #fff 54%) 0% 100%/1.7em 18em, linear-gradient(94deg, transparent 48%, #fff 54%) 100% 100%/1.7em 18em, linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 9%, rgba(255, 255, 255, 0.05) 12%, transparent, transparent) 50% 100%/100% 85%, linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 9%, rgba(128, 128, 128, 0.1) 13%, rgba(128, 128, 128, 0.1) 60%, #000) 50% 100%/100% 85%, linear-gradient(#333 48%, #333 54%) 50% 100%/100% 85%, linear-gradient(to right, rgba(51, 51, 51, 0.2), transparent, transparent, transparent, rgba(51, 51, 51, 0.2)) 50% 12%/14em 5em, linear-gradient(to right, #8a6d5c, #8A6D5C) 50% 12%/14em 5em, linear-gradient(to bottom, white 50%, transparent 51%) 50% 12%/16.6em 10em; background-repeat: no-repeat; } body .watch .band .bottom:before { width: 26em; height: 9.5em; position: absolute; top: 8em; content: ''; background: linear-gradient(97deg, transparent 50%, rgba(51, 51, 51, 0.4) 52%, #fff 53%) 100% 17.3%/4.6em 100%, linear-gradient(-97deg, transparent 50%, rgba(51, 51, 51, 0.4) 52%, #fff 53%) 0% 17.3%/4.6em 100%, linear-gradient(to right, rgba(255, 255, 255, 0.2), #EFD5B2, rgba(255, 255, 255, 0.2)) 0% 17.3%/100% 100%, linear-gradient(to bottom, #D2B394, #C7A582) 0% 17.3%/100% 100%, #edd3b0; background-repeat: no-repeat; } .goldring { z-index: 3; width: 35em; height: 35em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: linear-gradient(to bottom, rgba(164, 120, 81, 0.3), rgba(174, 135, 96, 0.7)), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(174, 135, 96, 0.3)), linear-gradient(to bottom, rgba(208, 170, 133, 0.4), rgba(174, 135, 96, 0.3)), linear-gradient(to bottom, #ECCCA5, #ECCCA5); background-repeat: no-repeat; } .goldring:before { content: ''; border-radius: 50%; width: 32.5em; height: 32.5em; left: 50%; top: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 70% 100%, rgba(255, 255, 255, 0.04), rgba(19, 20, 25, 0.2)) 50% 50%/100% 100%, radial-gradient(circle at 50% 50%, rgba(42, 44, 52, 0.4) 50%, rgba(0, 0, 0, 0.4) 70%, transparent) 50% 50%/100% 100%, radial-gradient(circle at 50% 50%, black, #28292f, transparent) 50% 50%/100% 100%, radial-gradient(circle at 50% 50%, #191c23, #191c23, transparent) 50% 50%/100% 100%; position: absolute; background-repeat: no-repeat; } .goldring:after { content: ''; width: 1.4em; height: 5em; left: 102%; top: 51.4%; transform: translate(-50%, -50%); position: absolute; background-repeat: no-repeat; } .goldring .time { width: 32.5em; height: 32.5em; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); position: relative; width: 32.5em; height: 32.5em; border-radius: 50%; padding: 0; list-style: none; } .goldring .time > * { display: block; position: absolute; top: 50%; left: 50%; margin: -0.25em; width: 0.5em; height: 0.5em; } .goldring .time > *:nth-of-type(1) { transform: rotate(0deg) translate(16.25em) rotate(0deg); } .goldring .time > *:nth-of-type(2) { transform: rotate(30deg) translate(16.25em) rotate(-30deg); } .goldring .time > *:nth-of-type(3) { transform: rotate(60deg) translate(16.25em) rotate(-60deg); } .goldring .time > *:nth-of-type(4) { transform: rotate(90deg) translate(16.25em) rotate(-90deg); } .goldring .time > *:nth-of-type(5) { transform: rotate(120deg) translate(16.25em) rotate(-120deg); } .goldring .time > *:nth-of-type(6) { transform: rotate(150deg) translate(16.25em) rotate(-150deg); } .goldring .time > *:nth-of-type(7) { transform: rotate(180deg) translate(16.25em) rotate(-180deg); } .goldring .time > *:nth-of-type(8) { transform: rotate(210deg) translate(16.25em) rotate(-210deg); } .goldring .time > *:nth-of-type(9) { transform: rotate(240deg) translate(16.25em) rotate(-240deg); } .goldring .time > *:nth-of-type(10) { transform: rotate(270deg) translate(16.25em) rotate(-270deg); } .goldring .time > *:nth-of-type(11) { transform: rotate(300deg) translate(16.25em) rotate(-300deg); } .goldring .time > *:nth-of-type(.........完整代码请登录后点击上方下载按钮下载查看
网友评论0