css布局实现漫画语音泡泡效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现漫画语音泡泡效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Rubik+Bubbles&display=swap'> <style> :root { --c1: #fbfdfa; --c2: #cbdce5; } body { margin: 0; padding: 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(45deg, #ccd9e2, #eaedf2); } body * { box-sizing: border-box; } .wrapper { width: 90vmin; height: 90vmin; display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; align-content: space-around; margin-top: -5vmin; filter: drop-shadow(-0.1vmin 0.2vmin 0.01vmin #7ea2bc90) drop-shadow(-0.2vmin 0.3vmin 0.01vmin #7ea2bc80) drop-shadow(-0.3vmin 0.4vmin 0.01vmin #7ea2bc70) drop-shadow(-0.4vmin 0.5vmin 0.01vmin #7ea2bc60) drop-shadow(-0.5vmin 0.6vmin 0.01vmin #7ea2bc50) drop-shadow(-0.6vmin 0.7vmin 0.01vmin #7ea2bc40) drop-shadow(-0.7vmin 0.8vmin 0.01vmin #7ea2bc30) drop-shadow(-0.8vmin 0.9vmin 0.01vmin #7ea2bc20) drop-shadow(-0.9vmin 1vmin 0.01vmin #7ea2bc10); } .bubble { width: 20vmin; height: 20vmin; border-radius: 1vmin; position: relative; background: linear-gradient(25deg, var(--c1), var(--c2)); box-shadow: -0.25vmin 0.25vmin 0.25vmin 0.05vmin #fff inset; } .bubble.circle { border-radius: 100%; } .bubble.square { width: 20vmin; } .bubble.rectangle { width: 30vmin; } .bubble.rounded { border-radius: 5vmin; } .bubble.oval { width: 30vmin; border-radius: 10vmin; } .bubble.oval.rounded { width: 30vmin; border-radius: 100%; } .bubble.egg {.........完整代码请登录后点击上方下载按钮下载查看
网友评论0