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, viewport-fit=cover"> <style> * { box-sizing: border-box; } html, body { height: 100%; } body { display: grid; place-content: center; grid-template-areas: "body"; overflow: hidden; } body::before, body::after { --size: 150vmax; --duration: 8s; content: ""; grid-area: body; width: var(--size); height: var(--size); -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } body::before { -webkit-animation-name: rotate; animation-name: rotate; -webkit-animation-duration: var(--duration); animation-duration: var(--duration); background: linear-gradient(to left, var(--palette)); } body::after { -webkit-animation-name: rotate, fade; animation-name: rotate, fade; -webkit-animation-duration: calc(var(--duration) / 2), var(--duration); animation-duration: calc(var(--duration) / 2), var(--duration); background: linear-gradient(to right, var(--palette)); } @-webkit-keyframes rotate { to { transform: rotate(1turn); } } @keyframes rotate { to { transform: rotate(1turn); } } @-webkit-keyframes fade { 50% { opacity: 0; } } @keyframes fade { 50% { opacity: 0; } } /* Gradients generated at https://learnui.design/tools/gradient-generator.html */ body { --rotate: 0deg; --palette: #1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b; } [data-color="1"] { --rotate: 90deg; --palette: #004466, #006080, #007e90, #009b97, #29b794, #74d18b, #b7e881, #fffb80; } [data-color="2"] { --rotate: 180deg; --palette: #f3ff17, #ffde00, #ffb900, #ff8f39, #ff6062, #ff298b, #ff00b5, #ff1fdd; } [data-color="3"] { --rotate: 270deg; --palette: #054ce6, #0072ff, #008fff, #00a5ff, #00b8e4, #00c9bb, #00d890, #36e367; } /* Controls */ .controls { --offset: 0.5rem; position: fixed; top: var(--offset); left: var(--offset); right: var(--offset); width: calc(100% - var(--offset) * 2); display: flex; justify-content: space-between; padding-left: min(5vmin, env(safe-area-inset-left)); padding-right: min(5vmin, env(safe-area-inset-right)); z-index: 1; } button { display: flex; align-items: center; font-family: system-ui; font-size: inherit; padding: 1rem; color: white; fill: currentcolor; background-color: transparent; border: none; cursor: pointer; touch-action: manipulation; } button:active { transform: translateY(1px); } .btn-colors [data-icon] { width: 1.4em; transform: rotate(var(--rotate)); } .btn-fullscreen [data-icon] { width: 1.2em; } [data-icon="close"] { display: none; } .is-fullscreen [data-icon="open"] { display: none; } .is-fullscreen [data-icon="close"] { display: block; } </style> </head> <body > <div class="controls"> <button id="colors" class="btn-colors" aria-label="Change colors" title="Change colors"> <svg data-icon=".........完整代码请登录后点击上方下载按钮下载查看
网友评论0