css实现背景图片滤镜模糊变色动画效果代码
代码语言:html
所属分类:背景
代码描述:css实现背景图片滤镜模糊变色动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Major+Mono+Display&display=swap" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> *:not(head, script, svg, svg *), *:not(head, script, svg, svg *)::before, *:not(head, script, svg, svg *)::after { all: unset; box-sizing: border-box; } body, html { overflow: hidden; } body { postion: relative; display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; overflow: hidden; margin: 0; background: black; color: white; } picture { position: relative; width: 100%; height: 100%; overflow: hidden; } picture img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } picture::before { position: absolute; top: 0; left: 0; width: 25%; height: 25%; background-color: transparent; content: ""; -webkit-animation: a 20s ease infinite; animation: a 20s ease infinite; } @-webkit-keyframes a { 0% { width: 25%; height: 25%; left: 0; right: 0; top: 0; bottom: 0; -webkit-backdrop-filter: blur(2vmin) hue-rotate(0deg); backdrop-filter: blur(2vmin) hue-rotate(0deg); } 12.49% { left: 0; } 12.5% { width: 100%; left: unset; -webkit-backdrop-filter: blur(0vmin) hue-rotate(150deg); backdrop-filter: blur(0vmin) hue-rotate(150deg); } 25% { width: 25%; height: 25%; -webkit-backdrop-filter: blur(2vmin) hue-rotate(300deg); backdrop-filter: blur(2vmin) hue-rotate(300deg); } 37.49% { top: 0; bottom: 0; } 37.5% { top: unset; height: 100%; -webkit-backdrop-filter: blur(0vmin) hue-rotate(150deg); backdrop-filter: blur(0vmin) hue-rotate(150deg); } 50% { width: 25%; height: 25%; -webkit-backdrop-filter: blur(2vmin) hue-rotate(0deg); backdrop-filter: blur(2vmin) hue-rotate(0deg); } 62.49% { left: unset; right: 0; } 62.5% { right: unset; width: 100%; height: 100%; -webkit-backdrop-filter: blur(0vmin) hue-rotate(150deg); backdrop-filter: blur(0vmin) hue-rotate(150deg); } 74.9% { top: unset; bottom: 0; } 75% { width: 25%; height: 25%; top: unset; -webkit-backdrop-filter: blur(2vmin) hue-rotate(300deg); backdrop-filter: blur(2vmin) hue-rotate(300deg); } 87.49% { top: unset; bottom: 0; } 87.5% { height: 100%; top: 0; -webkit-backdrop-filter: blur(0vmin) hue-rotate(150deg); backdrop-filter: blur(0vmin) hue-rotate(150deg); } 100% { width: 25%; height: 25%; top: 0; left: 0; -webkit-backdrop-filter: blur(2vmin) hue-rotate(0deg); backdrop-filter: blur(2vmin) hue-rotate(0deg); } } @keyframes a { 0% { width: 25%; height: 25%; left: 0; right: 0; top: 0; bottom: 0; -webkit-backdrop-filter: blur(2vmin) hue-rotate(0deg); backdrop-filter: blur(2vmin) hue-rotate(0deg); } 12.49% { left: 0; } 12.5% { width: 100%; left: unset; -webkit-backdrop-filter: blur(0vmin) hue-rotate(150deg); backdrop-filter: blur(0vmin) hue-rotate(150deg); } 25% { width: 25%; height: 25%; -webkit-backdrop-filter: blur(2vmin) hue-rotate(300deg); backdrop-filter: blur(2vmin) hue-rotate(300deg); } 37.49% { top: 0; bottom: 0; } 37.5% { top: unset; height: 100%; -webkit-backdrop-filter: blur(0vmin) hue-rotate(150deg); backdrop-filter: blur(0vmin) hue-rotate(150deg); } 50% { width: 25%; height: 25%; -webkit-backdrop-filter: blur(2vmin) hue-rotate(0deg); backdrop-filter: blur(2vmin) hue-rotate(0deg); } 62.49% { left: unset; right: 0; } 62.5% { right: unset; width: 100%; height: 100%; -webkit-backdrop-filter: blur(0vmin) hue-rotate(150deg); backdrop-filter: blur(0vmin) hue-rotate(150deg); } 74.9% { top: unset; bottom: 0; } 75% { width: 25%; height: 25%; top: unset; -webkit-backdrop-filter: blur(2vmin) hue-rotate(300deg); backdrop-filter: blur(2vmin) hue-rotate(300deg); } 87.49% { top: unset; bottom: 0; } 87.5% { height: 100%; top: 0; -webkit-backdrop-filter: blur(0vmin) hue-rotate(150deg); backdrop-filter: blur(0vmin) hue-rotate(150deg); } 100% { width: 25%; height: 25%; top: 0; left: 0; -webkit-backdrop-filter: blur(2vmin) hue-rotate(0deg); backdrop-filter: blur(2vmin) hue-rotate(0deg); } } picture::after { position: absolute; top: 0; left: 0; width: 25%; height: 25%; background-color: transparent; content: ""; -webkit-animation: b 10s ease infinite; animation: b 10s ease infinite; } @-webkit-keyframes b { 0% { width: 25%; height: 25%; left: 0; right: 0; top: 0; bottom: 0; -webkit-backdrop-filter: blur(2vmin) hue-rotate(0deg); backdrop-filter: blur(2vmin) hue-rotate(0deg); } 12.49% { top: 0; } 12.5% { height: 100%; top: unset; -webkit-backdrop-filter: blur(0vmin) hue-rotate(150deg); backdrop-filter: blur(0vmin) hue-rotate(150deg); } 25% { width: 25%; height: 25%; -webkit-backdrop-filter: blur(2vmin) hue-rotate(300deg); backdrop-filter: blur(2vmin) hue-rotate(300deg); } 37.49% { left: 0; right: 0; } 37.5% { left: unset; width: 100%; -webkit-backdrop-filter: blur(0vmin) hue-rotate(150deg); backdrop-filter: blur(0vmin) hue-rotate(.........完整代码请登录后点击上方下载按钮下载查看
网友评论0