你好，玻璃拟态
玻璃拟态是目前市面上的新风格，越来越受欢迎，新拟态 (Neumorphism) 模仿受到挤压的塑料材质，这种新的视觉风格更加注重垂直空间z轴的使用。它的典型特征是：
透明度；
物体漂浮，通过前后关系表现层次感；
鲜艳的颜色突出了模糊的透明度；
半透明物体边缘的微妙处理，采用细腻的边框表现玻璃质感。
这些空间注重空间感的典型象征，意味着这种风格有助于用户建立界面的层次结构和深度。
Dribbble 上的案例
废话不多说，代码伺候！
1、HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="card"> <h1>TiKi Platinum</h1> <h2>6228 8076 2232 8768</h2> <h3>van conf banck</h3> <h4>03 / 29</h4> </div> </body> </html>
2、CSS代码
* { margin: 0; padding: 0; } .card { color: rgba(255, 255, 255, 0.8); position: absolute; right: 100px; bottom: 100px; z-index: 10; font-family: sans-serif; text-align: center; width: 300px; height: 500PX; border-bottom: 1px solid rgba(255, 255, 255, 0.4); border-left: 1px solid rgba(255, 255, 255, 0.4); background:linear-gradient ( to top right, rgba(90, 149, 207, 0.5), rgba(58, 76, 99, 0.8) ); box-shadow: 10px -10px 20px rgba(0, 0, 0, 0.2), -10px 10px 20px rgba(255, 255, 255, 0.1); backdrop-filter: blur(6px); border-radius: 20px; transform: rotate(-15deg); } h1 { margin-top: 50px; } h2{ margin-top: 250px; } h3, h4{ padding-left: 60px; text-align: left; } h3 { margin-top: 40px; text-transform: uppercase; } h4 { margin-top: 10px; } .circle { width: 160px; height: 160px; position: absolute; right: 240px; bottom: 520px; background: linear-gradient(to top left, rgb(135 116 249), rgb(75 162 237)); border-radius: 80px; } .rect { width: 160px; height: 160px; position: absolute; right: 110px; bottom: 520px; background: linear-gradient( to top left rgba(135 116 249 0.9), rgba(75 162 237 0.9) ); border-radius: 20px; } body { height: 100vh; background: radial-gradient( circle at 60% 90%, rgba(46 103 161 1), transparent 60% ), radial-gradient( circle at 20px 20px, rgba(46 103 161 0.8), transparent 25% ), #182336 }
设置合适的背景
body { height: 100vh; background: radial-gradient( circle at 60% 90%, rgba(46 103 161 1), transparent 60% ), radial-gradient( circle at 20px 20px, rgba(46 103 161 0.8), transparent 25% ), #182336 }
效果图
细节调整
我们可以尝试为透明层添加一个带有透明度的1px边框。
