div+css实现时钟秒针数字闪现旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现时钟秒针数字闪现旋转动画效果代码
代码标签: div css 时钟 秒针 数字 闪现 旋转 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; } * { box-sizing: border-box; } .config { display: flex; align-items: center; justify-content: center; overflow: hidden; } .container { width: 100vw; height: 100vh; background: linear-gradient(to bottom, #d5d5d5 25%, #e7e7e7 100%); } .wrapper { width: 500px; height: 500px; background-color: #fdfffe; border-radius: 50%; box-shadow: 0 0 150px -100px, 0 0 200px -50px inset; position: relative; } .round-wrapper { animation: mainRound 60s linear forwards infinite; transform-origin: 50px 250px; position: absolute; top: 0; left: 200px; } @keyframes mainRound { 100% { transform: rotate(360deg); } } .round { width: 125px; height: 125px; border-radius: 50%; overflow: hidden; position: relative; opacity: 0.5; } .round .circle { background-color: #000000; border-radius: 50%; height: 125px; width: 125px; animation: leave 1s forwards ease-out infinite; transform-origin: 220px; } .round-back { height: 100%; width: 100%; background-color: #326dcf; border-radius: 50%; position: absolute; animation: shrinkCircle 1s forwards infinite; } @keyframes shrinkCircle { 40% { transform: scale(1); } 100% { filter: hue-rotate(-400deg); opacity: 0; transform: scale(0); } } @keyframes removeHidden { 0% { overflow: hidden; } 40% { overflow: initial; } 100% { overflow: initial; } } @keyframes leave { 0% { transform: translate(-250px, 250px) scale(0.2) rotate(200deg); } 100% { background-color: #c3c3c3; transform: translate(0, 0) rotate(0); } } .number { height: 125px; width: 125px; animation: roundNumber 60s forwards linear infinite; position: absolute; font-size: 60px; font-weight: 600; left: 0; top: 0; border-radius: 50%; font-family: sans-serif, Arial, Helvetica, "Courier New", Courier, monospace; color: #1e4cd1; filter: grayscale(0.65); } .number span { opacity: 0; pointer-events: none; animation: showNumber 60s forwards infinite; position: absolute; } @keyframes roundNumber { 100% { filter: hue-rotate(360deg); transform: rotate(-360deg); } } @keyframes showNumber { 0% { transform: scale(0.6) translate(-120px) rotate(-25deg); opacity: 0; } 1.4% { transform: scale(0.45) translate(-20px) rotate(-45deg); opacity: 0; } 1.8% { transform: scale(1); filter: blur(0); opacity: 1; } 2.7% { transform: scale(1.45); filter: blur(1px); opacity: 0; } 100% { opacity: 0; } } .number span:nth-of-type(2) { animation-delay: 1s; } .number span:nth-of-type(3) { animation-delay: 2s; } .number span:nth-of-type(4) { animation-delay: 3s; } .number span:nth-of-type(5) { animation-delay: 4s; } .number span:nth-of-type(6) { animation-delay: 5s; } .number span:nth-of-type(7) { animation-delay: 6s; } .number span:nth-of-type(8) { animation-delay: 7s; } .number span:nth-of-type(9) { animation-delay: 8s; } .number span:nth-of-type(10) { animation-delay: 9s; } .number span:nth-of-type(11) { animation-delay: 10s; } .number span:nth-of-type(12) { animation-delay: 11s; } .number span:nth-of-type(13) { animation-delay: 12s; } .number span:nth-of-type(14) { animation-delay: 13s; } .number span:nth-of-type(15) { animation-delay: 14s; } .number span:nth-of-type(16) { animation-delay: 15s; } .number span:nth-of-type(17) { animation-delay: 16s; } .number span:nth-of-type(18) { animation-delay: 17s; } .number span:nth-of-type(19) { animation-delay: 18s; } .number span:nth-of-type(20) { animation-delay: 19s; } .number span:nth-of-type(21) { animation-delay: 20s; } .number span:nth-of-type(22) { animation-delay: 21s; } .number span:nth-of-type(23) { animation-delay: 22s; } .number span:nth-of-type(24) { animation-delay: 23s; } .number span:nth-of-type(25) { animation-delay: 24s; } .number span:nth-of-type(26) { animation-delay: 25s; } .number span:nth-of-type(27) { animation-delay: 26s; } .number span:nth-of-type(28) { animation-delay: 27s; } .number span:nth-of-type(29) { animation-delay: 28s; } .number span:nth-of-type(30) { animation-delay: 29s; } .number span:nth-of-type(31) { animation-delay: 30s; } .number span:nth-of-type(32) { animation-delay: 31s; } .number span:nth-of-type(33) { animation-delay: 32s; } .number span:nth-of-type(34) { animation-delay: 33s; } .number span:nth-of-type(35) { animation-delay: 34s; } .number span:nth-of-type(36) { animation-delay: 35s; } .number span:nth-of-type(37) { animation-delay: 36s; } .number span:nth-of-type(38) { animation-delay: 37s; } .number span:nth-of-type(39) { animation-delay: 38s; } .number span:nth-of-type(40) { animation-delay: 39s; } .number span:nth-of-type(41) { animation-delay: 40s; } .number span:nth-of-type(42) { animation-delay: 41s; } .number span:nth-of-type(43) { animation-delay: 42s; } .number span:nth-of-type(44) { animation-delay: 43s; } .number span:nth-of-type(45) { animation-d.........完整代码请登录后点击上方下载按钮下载查看
网友评论0