css时间翻转项链悬浮动画效果代码
代码语言:html
所属分类:动画
代码描述:css时间翻转项链悬浮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html { --bg-clr: #222; --rotate-speed: 4s; --red: #740001; --gold: #D3A625; min-height: 100vh; display: grid; place-items: center; background-color: var(--bg-clr); background: linear-gradient(to right, var(--red) 33%, var(--gold) 33%, var(--gold) 66%, var(--red) 66%), var(--bg-clr); background-size: 5vw 3vw, 100% 100%; background-position: 0 100%, 0 0; background-repeat: repeat-x; } body { margin: 0; position: relative; width: 300px; aspect-ratio: 1 / 1; perspective: 1000px; filter: drop-shadow(0 0 5px black) drop-shadow(0 0 5px black); } p { position: absolute; top: 110%; width: 100%; text-align: center; font-family: system-ui, sans-serif; font-weight: 100; color: gray; } #chain { width: 25px; height: 25px; border-radius: 50%; border: 10px solid goldenrod; position: absolute; left: 50%; top: 0; transform: translate(-50%, calc(-100% + 10px)); z-index: 150; } #chain:before, #chain:after { content:''; width: 10px; height: 50vh; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-100%); transform-origin: 50% 100%; } #chain:before { transform: translate(-50%,-100%) skewX(8deg); background: radial-gradient(closest-side, transparent 2px, goldenrod 3px, darkgoldenrod 5px, transparent 6px); background-repeat: repeat-y; background-size: 10px 10px; } #chain:after { transform: translate(-50%,-100%) skewX(-8deg); background: radial-gradient(closest-side, transparent 2px, darkgoldenrod 3px, goldenrod 5px, transparent 6px); background-repeat: repeat-y; background-size: 10px 10px; } .circle { width: 100%; height: 100%; position: absolute; border-radius: 50%; box-sizing: border-box; border: 10px solid Goldenrod; } #outer { z-index: 100; } #mid { transform: scale(.85); animation: mid var(--rotate-speed) linear infinite; } #outer:before, #outer:after, #mid:before, #mid:after { content:''; width: 15px; height: 15px; background-color: goldenrod; background-image: linear-gradient(to bottom, goldenrod, rgba(255,255,255,.35), goldenrod); position: absolute; top: calc(50% - 7.5px); border-radius: 3px; } #mid:before, #outer:before { left: -25px; /* animation: mid var(--rotate-speed) linear infinite; */ } #mid:after, #outer:after { left: calc(100% + 10px); /* animation: mid var(--rotate-speed) linear infinite; */ } #inner { background: linear-gradient(to bottom right, transparent 25%, rgba(255,255,255,.25) 40%, transparent 55%), radial-gradient(50% 100% at 75% 20%, var(--bg-clr) 5%, transparent 6%), radial-gra.........完整代码请登录后点击上方下载按钮下载查看
网友评论0