div+css实现彩带飘逸效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现彩带飘逸效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* colors */ /*dimensions */ /* Presets */ *, *:before, *:after { padding: 0; margin: 0; box-sizing: border-box; } body { height: 100vh; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; perspective: 700px; perspective-origin: 0% 0%; background-color: #f2f2f2; } div:before, div:after { display: block; content: ""; position: absolute; } div.stripes { width: 90vh; height: 60vh; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; background-color: #fff; border: solid 10px #f2f2f2; position: relative; overflow: hidden; display: flex; justify-content: start; align-items: start; background: linear-gradient #fff, 0vh, #fff 100vh; } div.stripes:before { width: 100vh; height: 100vh; display: flex; transform: rotateZ(-38deg) translateX(15vh) translateY(-40vh); background: radial-gradient(ellipse, #fff 25vh, transparent 25vh) 32vh 13vh/49.5vh 59vh no-repeat, radial-gradient(ellipse, #ED4920 25vh, transparent 25vh) 28vh 11.5vh/50vh 61vh no-repeat, radial-gradient(ellipse, #fff 25vh, transparent 25vh) 26vh 13vh/49.5vh 60vh no-repeat, radial-gradient(ellipse, #EE854A 25vh, transparent 25vh) 22vh 11.5vh/50vh 62vh no-repeat, radial-gradient(ellipse, #fff 25vh, transparent 25vh) 20vh 13vh/50vh 62vh no-repeat, radial-gradient(ellipse, #F4D109 25vh, transparent 25vh) 16vh 11.5vh/50vh 64v.........完整代码请登录后点击上方下载按钮下载查看
网友评论0