css+div布局2种文字气泡效果代码
代码语言:html
所属分类:布局界面
代码描述:css+div布局2种文字气泡效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Walter+Turncoat&display=swap" rel="stylesheet"> <style> :root { --red: #d52b21; --orange: #ffa500; --main-bg: #3b3b4f; --stroke-color: #2e2141; --rays-light: var(--orange); --rays-dark: var(--red); --polka-dots: var(--stroke-color); --polka-bg: var(--main-bg); } html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0; } body { font-family: "Walter Turncoat", cursive; background-color: var(--main-bg); color: var(--stroke-color); } .section { display: flex; justify-content: center; align-items: center; height: 100vh; padding: 30px; } .section--rays { position: relative; } .section--rays::before, .section--rays::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: linear-gradient(75deg, transparent 50%, var(--rays-light) 50%), linear-gradient(60deg, transparent 50%, var(--rays-dark) 50%), linear-gradient(45deg, transparent 50%, var(--rays-light) 50%), linear-gradient(30deg, transparent 50%, var(--rays-dark) 50%), linear-gradient(15deg, transparent 50%, var(--rays-light) 50%), linear-gradient(0deg, transparent 50%, var(--rays-dark) 50%), linear-gradient(-15deg, transparent 50%, var(--rays-light) 50%), linear-gradient(-30deg, transparent 50%, var(--rays-dark) 50%), linear-gradient(-45deg, transparent 50%, var(--rays-light) 50%), linear-gradient(-60deg, transparent 50%, var(--rays-dark) 50%), linear-gradient(-75deg, transparent 50%, var(--rays-light) 50%), linear-gradient(-90deg, transparent 50%, var(--rays-dark) 50%); background-size: 200% 100%; z-index: -1; } .section--rays::after { left: auto; right: 0; transform: rotate(180deg); } .section--polka { background-color: var(--polka-bg); background-image: radial-gradient(var(--polka-dots) 25%, transparent 25%), radial-gradient(var(--polka-dots) 25%, transparent 25%); background-size: 20px 20px, 20px 20px; background-position: 0 0, 10px 10px; } /* simple-bubble */ .simple-bubble { min-width: 300px; min-height: 225px; } .simple-bubble__main { display: flex; justify-content: center; align-items: center; width: 300px; height: 180px; background-color: #ffffff; border-radius: 50%; border: 5px solid var(--stroke-color); font-size: 2rem; } .simple-bubble__tail { width: 100px; height: 50px; margin: -5px auto 0; background: radial-gradient( circle at 0 0, transparent 0%, transparent 46%, rgba(255, 255, 255, 1) 46% ); border: 5px solid var(--stroke-color); border-top: none; border-left: none; border-radius: 0 10% 100% 0; transform: rotate(-7deg); } .simple-bubble__tail::before { content: ""; display: block; width: 50px; height: 50px; margin-bottom: -5p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0