最终的效果图片:
毛玻璃效果:在style标签中,在form表单的before中利用filter的blur属性以及box-shadow的值设置,就可以做出form表单后面的毛玻璃效果背景,还要记得设置form表单的display为flex布局,position为relative,form表单后的毛玻璃特效的position为absolute,所谓”子绝父相“。
按钮动画效果:利用的是button的before和after,设置display为block,设置其filter属性blur的值,获得静态的模糊效果,然后改变其hover之前和之后的transform中的translateX属性,转变时间transition设置为1s,即可看到动画效果。
做出这个效果后,我的感悟是:要特别注意position的设置以及overflow:hidden,先规划好整体布局,设置好静态效果,再做动态效果以及更加细节的部分。
<!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"> <title>Document</title> <style> body { margin: 0; padding: 0; } .contain { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background: url(../img/night.jpg) fixed no-repeat; background-size: cover; } .log { width: 240px; height: 220px; display: flex; flex-direction: column; text-align: center; padding: 40px; position: relative; background: inherit; /* overflow很重要 如果没有它的话 毛玻璃特效 特别模糊 虽然不知道为啥 */ overflow: hidden; border-radius: 16px; z-index: 100; } .log::before { content: ""; width: calc(100% + 20px); height: calc(100% + 20px); display: block; position: absolute; left: -10px; top: -10px; background: inherit; box-shadow: inset 0 0 200px rgba(255, 255, 255, 0.25); filter: blur(6px); overflow: hidden; border-radius: 14px; z-index: -1; } h2 { font-size: 20px; font-weight: 400; color: rgb(21, 33, 32); } .log input, #btn { height: 32px; margin: 6px 0; background-color: rgba(255, 255, 255, 0.2); border-radius: 6px; border: none; } #btn{ margin-top: 20px; cursor:pointer; position: relative; overflow: hidden; transition: 0.7s; } #btn:hover{ background-color: rgb(144, 160, 167); } #btn::before,#btn::after{ content: ""; height:90px; width: 100px; display: block; background-color: mediumaquamarine; opacity: 0.5; filter: blur(30px); position: absolute; overflow: hidden; left:0; top:0; transform: skewX(-20deg); transform: translateX(-100px); } #btn::after{ filter:blur(6px); width: 40px; left:60px; opacity: 0; background-color: rgba(64, 224, 208, 0.307); } #btn:hover::before{ transform: translateX(320px); transition: 1s; opacity: 1; } #btn:hover::after{ transform: translateX(320px); transition: 1s; opacity: 1; } </style> </head> <body> <div class="contain"> <form action="#" class="log"> <h2>登录</h2> <input type="text" name="username" placeholder="username"> <input type="text" name="password" placeholder="password"> <button id="btn">登录</button> </form> </div> </body> </html>