div+css实现彩带飘动背景动画效果代码
代码语言:html
所属分类:背景
代码描述:div+css实现彩带飘动背景动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> body{ background: black; } @media only screen and (max-width: 900px) { .compassrose { bottom: -150px; } .container .curveWrap { bottom: -20vh; } } .spinOut { -webkit-transition: 5s; transition: 5s; -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translate(400px, 200px); transform: translate(400px, 200px); } .curveWrap { opacity: 1; width: 135vw; height: 100vh; position: absolute; bottom: -10vh; -webkit-transform: translateX(-15vw) rotate(-25deg); transform: translateX(-15vw) rotate(-25deg); will-change: transform; } .curveWrap .curve { stroke-linecap: round; stroke-opacity: 0; } .curveWrap .curve path { -webkit-transform-origin: center; transform-origin: center; will-change: transform; transform-box: fill-box; } .curveWrap .curve path:nth-child(1) { stroke-width: 45; -webkit-animation: curve 40s linear 1.4s infinite; animation: curve 40s linear 1.4s infinite; } .curveWrap .curve path:nth-child(5n + 1) { stroke: goldenrod; } .curveWrap .curve path:nth-child(5n + 2) { stroke: GreenYellow; } .curveWrap .curve path:nth-child(5n + 3) { stroke: cornflowerBlue; } .curveWrap .curve path:nth-child(5n + 4) { stroke: darkgreen; } .curveWrap .curve path:nth-child(5n + 5) { stroke: olive; } .curveWrap .curve path:nth-child(2) { stroke-width: 16; -webkit-animation: curve 40s linear 2.8s infinite; animation: curve 40s linear 2.8s infinite; } .curveWrap .curve path:nth-child(5n + 1) { stroke: goldenrod; } .curveWrap .curve path:nth-child(5n + 2) { stroke: GreenYellow; } .curveWrap .curve path:nth-child(5n + 3) { stroke: cornflowerBlue; } .curveWrap .curve path:nth-child(5n + 4) { stroke: darkgreen; } .curveWrap .curve path:nth-child(5n + 5) { stroke: olive; } .curveWrap .curve path:nth-child(3) { stroke-width: 78; -webkit-animation: curve 40s linear 4.2s infinite; animation: curve 40s linear 4.2s infinite; } .curveWrap .curve path:nth-child(5n + 1) { stroke: goldenrod; } .curveWrap .curve path:nth-child(5n + 2) { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0