css实现半透明文本气泡效果代码-html代码-BFW代码库

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&amp;display=swap'>
  
<style>
:root {
  --padding: 2.5em;
  --radius: calc(var(--padding) * 2);
  --angle: calc(var(--padding) / 1.2);
  --one: rgba(230, 230, 250, 1);
  --two: 245, 20, 155;
  --three: 42, 255, 9;
  --four: 0, 102, 221;
  --bg-violet: 245, 20, 155;
  --bg-yellow: 211, 255, 109;
  --bg-pink: 245, 20, 155;
  --bg-green: 109, 255, 174;
}

body {
  display: grid;
  height: 100svh;
  font-family: Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
  margin: 0;
  place-items: center;
  background-color: #0e81d4;
  background-image: radial-gradient(55% 50% at 30% 30%, rgba(var(--bg-violet), 0.5) 9%, rgba(0, 0, 0, 0) 100%), radial-gradient(20% 30% at 30% 50%, rgba(var(--bg-green), 0.8) 5%, rgba(0, 0, 0, 0) 100%), radial-gradient(30% 30% at 50% 25%, rgba(var(--bg-yellow), 1) 20%, rgba(7, 58, 255, 0) 100%), radial-gradient(35% 35% at 70% 70%, rgba(var(--bg-pink), 0.8) 10%, rgba(0, 0, 0, 0) 100%), radial-gradient(60% 60% at 70% 40%, rgba(var(--bg-green), 0.8) 22%, rgba(0, 0, 0, 0) 100%), linear-gradient(180deg, #4eb5ff 0%, #0e81d4 100%);
  background-repeat: no-repeat;
}

h1 {
  color: #222;
  font-size: clamp(2rem, 1.3043rem + 3.4783vi, 4rem);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.bubble {
  background-color: rgba(255, .........完整代码请登录后点击上方下载按钮下载查看