div+css实现2024年新年快乐动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现2024年新年快乐动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols+2&display=swap"); @import url("https://fonts.cdnfonts.com/css/segoe-script"); * { margin: 0; padding: 0; box-sizing: border-box; } html, body { overscroll-behavior-x: none; overscroll-behavior-y: none; } body { position: relative; color: #000; background: powderblue; font-family: "Segoe Script", sans-serif; font-size: max(20px, 4vw); font-weight: 500; width: 100vw; min-height: 100vh; text-align: center; line-height: 1; overflow: hidden; } main { position: relative; } section { position: relative; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } h1 { font-size: min(10vw, 45px); font-weight: normal; color: transparent; -webkit-background-clip: text; background-clip: text; background-image: url(https://images.unsplash.com/photo-1605707157753-c723b9d5af4a?&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTUxNDQ3MzB8&ixlib=rb-4.0.3&w=800&q=80&dpr=2); background-position: center; background-size: 200px auto; background-repeat: repeat; transform: translateZ(0); -webkit-animation: bg1 10s linear infinite alternate both; animation: bg1 10s linear infinite alternate both; filter: saturate(3); line-height: 1.5; -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.3); text-stroke: 0.5px rgba(0, 0, 0, 0.3); } #background { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; overflow: hidden; background-color: white; background-image: url(https://images.unsplash.com/photo-1528460033278-a6ba57020470?ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDQyNzcwMzd8&ixlib=rb-4.0.3&w=1000); background-size: cover; background-position: center; background-repeat: no-repeat; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; z-index: -1; } #background > div { --size: min(3vw, 24px); --symbol: "✽"; --pos_x: 0vw; --duration_move: 7s; --delay_move: 0s; --duration_rotate: 1.5s; --delay_rotate: 0s; --duration_clip: 10s; --delay_clip: 0s; --hue: 0deg; position: absolute; top: 0; left: 0; font-size: clamp(15px, var(--size), 80px); font-family: "Noto Sans Symbols 2", sans-serif; transform-origin: center top; -webkit-animation: move var(--duration_move) var(--delay_move) linear infinite normal both; animation: move var(--duration_move) var(--delay_move) linear infinite normal both; } #background span { display: block; position: relative; transform-origin: center; transform: rotate(0deg); -webkit-animation: rotate var(--duration_rotate) var(--delay_rotate) ease-in-out infinite alternate both; animation: rotate var(--duration_rotate) var(--delay_rotate) ease-in-out infinite alternate both; } #background span:after { content: var(--symbol); -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.2); text-stroke: 0.5px rgba(0, 0, 0, 0.2); line-height: 1.2; position: relative; display: block; color: transparent; -webkit-background-clip: text; background-clip: text; filter: brightness(1.2) hue-rotate(var(--hue)); background-image: url(https://images.unsplash.com/photo-1580822115965-0b2532068eff?&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTUxNDUzNzJ8&ixlib=rb-4.0.3&q=100&w=200&dpr=2); background-position: center; background-size: 200px auto; background-repeat: repeat; transform: translateZ(0); -webkit-animation: bg1 var(--duration_clip) var(--delay_clip) linear infinite alternate both; animation: bg1 var(--duration_clip) var(--delay_clip) linear infinite alternate both; } #background > div:nth-child(even) span:after { -webkit-animation-name: bg2; animation-name: bg2; } @-webkit-keyframes bg1 { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } } @keyframes bg1 { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } } @-webkit-keyframes bg2 { 0% { background-position: 100% 0%; } 100% { background-position: 0% 100%; } } @keyframes bg2 { 0% { background-position: 100% 0%; } 100% { background-position: 0% 100%; } } @-webkit-keyframes rotate { 0% { transform: rotate(115deg); } 100% { transform: rotate(245deg); } } @keyframes rotate { 0% { transform: rotate(115deg); } 100% { transform: rotate(245deg); } } @-webkit-keyframes move { 0% { transform: translate3d(var(--pos_x), calc(0vh - var(--size)), 0); } 100% { transform: translate3d(var(--pos_x), 100vh, 0); } } @keyframes move { 0% { transform: translate3d(var(--pos_x), calc(0vh - var(--size)), 0); } 100% { transform: translate3d(var(--pos_x), 100vh, 0); } } #background > div:nth-child(5n + 0) { --symbol: "🟄"; } #background > div:nth-child(5n + 1) { --symbol: "🟄"; } #background > div:nth-child(5n + 2) { --symbol: "🟉"; } #background > div:nth-child(5n + 3) { --symbol.........完整代码请登录后点击上方下载按钮下载查看
网友评论0