css filter滤镜实现地球效果
代码语言:html
所属分类:布局界面
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background: #000; height: 100vh; display: -webkit-box; display: flex; color: white; z-index: 1; position: relative; overflow: hidden; } body > *, body > *:after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .cc { width: 40vw; height: 40vw; border-radius: 50%; } .layer-1 { color: teal; background: linear-gradient(teal, #cbb4d4 70%), linear-gradient(135deg, white, black 60%); background-blend-mode: color; } .layer-2, .layer-3 { overflow: hidden; } .layer-2 { mix-blend-mode: multiply; -webkit-transform: rotate(120deg); transform: rotate(120deg); } .layer-3 { background: teal; mix-blend-mode: overlay; } .layer-3:after { content: ""; -webkit-filter: url(#turbulence); filter: url(#turbulence); } .clouds { -webkit-transform: rotate(25deg); transform: rotate(25deg); } .clouds-shadow { -webkit-filter: drop-shadow(3px 3px 1px rgba(0, 0, 0, 0.4)); filter: drop-shadow(3px 3px 1px rgba(0, 0, 0, 0.4)); mix-blend-mode: darken; } .clouds image { -webkit-transform: translateX(12%); transform: translateX(12%); } .shadows { border-radius: 50%; box-shadow: inset 2vw 2vw 5vw -1vw white, inset .25vw .25vw .5vw .05vw white, inset 2vw 2vw 5vw -1vw #ffffff99, -1px -1px 0 2px #fff, 0 0 1vw 0 #6c6ab1, 0 0 8vw -1vw #6c6ab1, 0 0 8vw -1vw #6c6ab1cc; mix-blend-mode: lighten; -webkit-filter: blur(0.5px); filter: blur(0.5px); } .over { width: 100vw; height: 100vw; background-image: linear-gradient(135deg, transparent 30%, black 55%); background-size: 100vw 100vw; z-index: 1000; } </style> </head> <body translate="no"> <svg viewBox="0 0 100 100" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"> <filter id="turbulence" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB"> <feTurbulence type="turbulence" baseFrequency="0.01 0.01" numOctaves="10" seed="1" stitchTiles="stitch" result="turbulence" /> <feFlood flood-color="#333" flood-opacity="1" result="flood" /> <feComposite in="flood" in2="turbulence" operator="in" result="composite1" /> </filter> </svg> <div class="layer-1 cc"></div> <div class="layer-2 cc"> <svg viewBox="0 0 166 100" width="100%" height="100%" preserveAspectRatio="xMidYMid sli.........完整代码请登录后点击上方下载按钮下载查看
网友评论0