tailwind布局炫酷动态背景价格套餐代码
代码语言:html
所属分类:布局界面
代码描述:tailwind布局炫酷动态背景价格套餐代码
代码标签: tailwind 布局 炫酷 动态 背景 价格 套餐 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600&family=Inter:wght@300;400;500&display=swap" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script> <style> html, body { margin: 0; padding: 0; overflow: hidden; height: 100%; width: 100%; } body { width: 100vw; height: 100vh; background: #111; } #shader-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: block; z-index: 0; background: #111; } .glass-effect { backdrop-filter: blur(14px) brightness(0.91); -webkit-backdrop-filter: blur(14px) brightness(0.91); } .gradient-text { background-clip: text; -webkit-background-clip: text; color: transparent; } .card-divider { height: 1px; background-image: linear-gradient(90deg, transparent, rgba(255,255,255,0.09) 20%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.09) 80%, transparent ); } .icon-circle { height: 2rem; width: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); } </style> <script> window.onload = function() { const canvas = document.ge.........完整代码请登录后点击上方下载按钮下载查看
网友评论0