CSS特效（二）：利用html和css制作毛玻璃特效和按钮动画效果

最终的效果图片：

毛玻璃效果：在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>

CSS特效（二）：利用html和css制作毛玻璃特效和按钮动画效果相关推荐

【前端实例代码】霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE html> ...
【前端实例代码】霓虹灯按钮动画效果悬停| html CSS特效惊艳| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停| html CSS特效惊艳| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE html> & ...
HTML+CSS制作七夕跳动的红心动画效果
HTML+CSS制作七夕跳动的红心动画效果效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en">< ...
html5鱼游动动画,CSS和D3制作小鱼游动的交互动画效果
CSS和D3制作小鱼游动的交互动画效果发布时间:2020-05-13 13:54:35 来源:亿速云阅读:118 作者:Leah 本篇文章主要探讨如何用CSS和D3制作小鱼游动的交互动画效果.有一 ...
【每日一练】68—CSS实现一组渐变按钮动画效果
在之前,我们也练习过一些按钮动画的效果,今天我们再来练习一组CSS实现的按钮动画效果,下面是今天练习的最终效果: 接下来,我们再来看一下这个案例的源码. HTML代码: <!doctype ht ...
飞天特效手机软件下载后可以制作腾云驾雾特效视频吗？
飞天特效手机软件下载后可以制作腾云驾雾特效视频吗?腾云驾雾特效视频在手机软件上怎么制作呢? 飞天特效视频和腾云驾雾特效视频无论是影视剧还是各个小视频平台,都会经常看到,那么是怎么制作的呢?用手机软件可 ...
html卷轴展开动画,MAYA制作北京奥运卷轴展开动画效果
本教程是向脚本之家的朋友介绍利用MAYA制作北京奥运卷轴展开动画效果.教程难度一般.希望脚本之家的朋友们喜欢这篇教程.先看看最终的效果图: 具体制作步骤如下: 1.建一个nurbs面片,u轴向增加一定 ...
css3+jQuery制作导航菜单（带动画效果）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css ...
android动画效果 translate,Android利用translate、scale、alpha、rotate实现动画效果
Android利用translate.scale.alpha.rotate实现动画效果在Android中可以用animation实现动画效果,Android中的animation由四种类型组成: a ...

CSS特效（二）：利用html和css制作毛玻璃特效和按钮动画效果

CSS特效（二）：利用html和css制作毛玻璃特效和按钮动画效果相关推荐

最新文章

热门文章