css+div实现渐变线条流动动画效果代码
代码语言:html
所属分类:动画
代码描述:css+div实现渐变线条流动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,800,900'> <style> @property --hue { syntax: "<integer>"; inherits: true; initial-value: 0; } @property --deg { syntax: "<angle>"; inherits: true; initial-value: 0deg; } @-webkit-keyframes rotate { 0% { --hue: 0; --deg: 0deg; } 100% { --hue: 360; --deg: 360deg; } } @keyframes rotate { 0% { --hue: 0; --deg: 0deg; } 100% { --hue: 360; --deg: 360deg; } } .box { -webkit-animation: rotate 3s linear infinite; animation: rotate 3s linear infinite; border: 2px solid transparent; border-image-slice: 1; border-image-width: 2px; border-image-source: conic-gradient(from var(--deg), hsla(calc(var(--hue) + 180), 100%, 75%, 0) 33%, hsla(calc(var(--hue) + 180), 100%, 75%, 0.5) 66%, hsla(calc(var(--hue) + 360), 100%, 60%, 1) 100%); width: 20vh; height: 40vh; } .box2 { transform: translate(-50%, -50%) scaleX(-1); -webkit-animation-delay: -1.5s; animation-delay: -1.5s; position: absolute; top: 50%; left: 50%; width: 40vh; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0