css鼠标悬浮渐变动画效果代码
代码语言:html
所属分类:动画
代码描述:css鼠标悬浮渐变动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@800&display=swap"); @property --turn { syntax: "<angle>"; inherits: false; initial-value: 1turn; } .gradient { width: 100vw; height: 100vh; overflow: hidden; position: absolute; z-index: -1; top: 0; left: 0; --turn: 0turn; -webkit-animation: rotate 20s linear infinite; animation: rotate 20s linear infinite; --color-1: #ffafcc; --color-2: #a2d2ff; --color-3: #bde0fe; --color-4: #cdb4db; background: conic-gradient(from var(--turn, 0turn), var(--color-1) 25%, var(--color-2) 25%, var(--color-2) 50%, var(--color-3) 50%, var(--color-3) 75%, var(--color-4) 75%); background-position: center center; --offset-x: calc(var(--x) * 1px); --offset-y: calc(var(--y) * 1px); background-position: calc(100% + var(--offset-x, -50%)) calc(100% + var(--offset-y, -50%)); backg.........完整代码请登录后点击上方下载按钮下载查看
网友评论0