css实现彩色风扇吹动动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现彩色风扇吹动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> *, *::before, *::after { box-sizing: border-box; } body, html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100vh; overflow: hidden; margin: 0; background: #aaa; } figure { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 0em 2em; width: calc(100% - 3em); height: calc(100% - 3em); font-size: 100%; background: #111; background-size: cover; background-position: center; margin: 0; overflow: hidden; } object, i { all: unset; } object { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 30%; height: auto; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } object:nth-child(1), object:nth-child(3) { z-index: 1; } object:nth-child(2) { z-index: 2; } i { position: absolute; font-size: 35em; line-height: 0.8em; border-radius: 100%; background: radial-gradient(circle at 50% 50%, var(--colors)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-position: center; background-size: 100%; color: transparent; mix-blend-mode: var(--mode); outline: 0.02em solid var(--borderColor); -webkit-animation: spinner var(--speed) linear infinite; animation: spinner var(--speed) linear infinite; } /*--------------------------------------------------*/ /* EDIT SPINNER BORDER, SPEED, AND BLEND MODES HERE */ /*--------------------------------------------------*/ i:nth-child(1) { --borderColor: blue; --speed: 5s; --mode: darken; } i:nth-child(2) { --borderColor: gold; --speed: 8s; --mode: lighten; animation-direction: reverse; } i:nth-child(3) { --borderColor: mediumspringgreen; --speed: 11s; --mode: soft-light; } /*--------------------------------*/ /* SPINNER 1 BACKGROUND COLORS */ /*--------------------------------*/ object:nth-child(1) i:nth-child(1) { --colors: #178fff, #0094ff, #00a1ff, #00b4ff, #00c8ff, #00dbf1, #00ebc4, #00f791, #7bfe61, #c2ff3a, #ecff1f, #fbff14; } object:nth-child(1) i:nth-child(2) { --colors: #ff8f26, #ff8c29, #ff8233, #ff7242, #ff5c58, #ff4273, #ff2792, #ff1bb3, #ff2ad2, #ee3cea, #da49fa, #d24dff; } object:nth-child(1) i:nth.........完整代码请登录后点击上方下载按钮下载查看
网友评论0