react实现磨砂玻璃文字卡片引言效果代码
代码语言:html
所属分类:布局界面
代码描述:react实现磨砂玻璃文字卡片引言效果代码
下面为部分代码预览,完整代码请点击下载或在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=Roboto+Slab:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"> <style> @charset "UTF-8"; :root { --background: #EDEEF7; --gray: #EDEEF7; --white: #ffffff; --poppins: "Poppins", sans-serif; --shadow-opacity: 0.30; --blur: 10px; } *, *:before, *:after { box-sizing: border-box; outline: none; } html { font-family: "Roboto", sans-serif; font-size: 16px; font-smooth: auto; font-weight: 300; line-height: 1.5; color: #444; } body { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; background: url("//repo.bfw.wiki/bfwrepo/image/64300e0d8afd4.png"); background-position: center center; background-size: cover; text-align: center; z-index: 0; } body::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.25); z-index: -1; } .header { position: fixed; top: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.5); } .header__title { color: #fff; } .button { position: fixed; bottom: 20px; left: 50%; display: inline-flex; margin-bottom: 16px; padding: 20px 80px; background: #70a9a1; border: 2px solid #70a9a1; border-radius: 99px; color: #fff; font-size: 20px; font-weight: bold; text-transform: uppercase; transform: translateX(-50%); transition: all 0.3s ease; cursor: pointer; } .button:hover { background: #fff; color: #70a9a1; transition: all 0.3s ease; } .advice { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; width: 100%; max-width: 550px; margin: auto; padding: 50px; background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(var(--blur)); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.08); filter: drop.........完整代码请登录后点击上方下载按钮下载查看
网友评论0