在线直播源码，CSS磨砂玻璃效果和渐变主题色文字

HTML

<div class="card"><br>  <h2 class="gradient"><br>  </h2><br>  <div><br>    <p>.welcome{</p><br>    <p class="indent">"CSDN:lqj_本人"</p><br>    <p class="indent"><br>    <p>}</p><br>  </div><br>  <a href="#" class="gradient"><br></div>

CSS

body {<br>display: flex;<br>justify-content: center;<br>align-items: center;<br>margin: 0;<br>padding: 0;<br>width: 100vw;<br>min-height: 100vh;<br>background: url(https://img0.baidu.com/it/u=1049144354,3589714554&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800) no-repeat;<br>background-size: cover;<br>}<br> <br>.card {<br>display: flex;<br>flex-direction: column;<br>justify-content: center;<br>align-items: center;<br>padding: 20px;<br>width: 300px;<br>height: 400px;<br>box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);<br>border-top: 1px solid rgba(255, 255, 255, 0.1);<br>border-left: 1px solid rgba(255, 255, 255, 0.1);<br>border-radius: 15px;<br>background: rgba(255, 255, 255, .9);<br> <br>//   background: rgba(255, 255, 255, .3);<br>//   backdrop-filter: blur(20px) brightness(150%);<br>@supports (backdrop-filter: blur(20px) brightness(150%)) {<br>background: rgba(255, 255, 255, .3);<br>backdrop-filter: blur(20px) brightness(150%);<br>}<br> <br>h2 {<br>font-size: 1.8em;<br>color: transparent;<br>-webkit-background-clip: text;<br>background-clip: text;<br>}<br> <br>p {<br>font-size: 1em;<br>color: #1b263b;<br>font-weight: 300;<br> <br>&.indent {<br>text-indent: 1em;<br>}<br>}<br> <br>a {<br>padding: 15px 50px;<br>border-radius: 30px;<br>color: white;<br>text-decoration: none;<br>font-weight: 500;<br>// background-image: linear-gradient(<br>//     45deg,<br>//     hsl(220deg 67.24% 60%),<br>//     hsl(333.91deg 50% 60%)<br>// );<br>box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);<br>        transition: filter .5s;<br> <br>&:hover {<br>filter: brightness(120%);<br>}<br>}<br>}

function rgbToHsl(r, g, b) {<br>  r /= 255;<br>  g /= 255;<br>  b /= 255;<br> <br>  let max = Math.max(r, g, b);<br>  let min = Math.min(r, g, b);<br>  let h, s, l = (max + min) / 2;<br> <br>  if (max === min) {<br>    h = s = 0;<br>  } else {<br>    let d = max - min;<br>    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);<br> <br>    switch (max) {<br>      case r:<br>        h = (g - b) / d + (g < b ? 6 : 0);<br>        break;<br>      case g:<br>        h = (b - r) / d + 2;<br>        break;<br>      case b:<br>        h = (r - g) / d + 4;<br>        break;<br>    }<br> <br>    h /= 6;<br>  }<br> <br>  return [h * 360, s * 100, l * 100];<br>}<br>const gradientBtn = () => {<br>const img = new Image();<br>img.addEventListener('load', function() {<br>const colorThief = new ColorThief();<br>let palette = colorThief.getPalette(img, 3);<br>palette.forEach((item, index) => {<br>palette[index] = rgbToHsl(...item);<br>})<br>// document.getElementById('button').style.backgroundImage = `linear-gradient(<br>        //     45deg,<br>        //     hsl(${palette[1][0]}deg 60% 60%),<br>        //     hsl(${palette[2][0]}deg 60% 60%)<br>        // )`;<br>        document.querySelectorAll('.gradient').forEach(el => el.style.backgroundImage = `linear-gradient(<br>            45deg,<br>            hsl(${palette[1][0]}deg 60% 60%),<br>            hsl(${palette[2][0]}deg 60% 60%)<br>        )`);<br>        // document.getElementById('button').style.backgroundImage = `linear-gradient(<br>        //     45deg,<br>        //     hsl(${palette[1][0]}deg ${palette[1][1]}% ${palette[1][2]}%),<br>        //     hsl(${palette[2][0]}deg ${palette[2][1]}% ${palette[2][2]}%)<br>        // )`;<br>// document.getElementById('button').style.backgroundImage = `linear-gradient(<br>        //     45deg,<br>        //     rgb(${palette[1][0]}, ${palette[1][1]}, ${palette[1][2]}),<br>        //     rgb(${palette[2][0]}, ${palette[2][1]}, ${palette[2][2]})<br>        // )`;<br>});<br>img.crossOrigin = 'anonymous';<br>img.src = 'https://img0.baidu.com/it/u=1049144354,3589714554&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800 no-repeat';<br>}<br> <br>gradientBtn(); 