css＜1＞-毛玻璃特效

最新推荐文章于 2024-08-26 16:38:21 发布

肉馅团子

最新推荐文章于 2024-08-26 16:38:21 发布

阅读量197

点赞数

分类专栏： html+css 文章标签：前端 css html

本文链接：https://blog.csdn.net/m0_56830409/article/details/122088949

版权

html+css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果图：

	<div class="signinpanel1">
		<div class="yhdl_font">
			<span class="dl">学校管理员登录</span>
		</div>
		<div class="username_div">
			<div class="username_user"></div>
			<input type="text" id="account" placeholder="请输入用户名" />
		</div>
		<div class="pwd_div">
			<div class="username_pwd"></div>
			<input type="password" id="password" placeholder="密码" />
		</div>
		<div class="yzm_div">
			<div class="username_yzm"></div>
			<input type="tel" name="verify" id="verify" placeholder="验证码" maxlength="4">
			<img id="imgVerify" src="/captcha" alt="更换验证码" onclick="getVerify(this);">
		</div>
		<div class="login_div">
			<input onclick="login()" class="btn-login" value="登录" type="button">
		</div>
	</div>

css样式：

.signinpanel1 {
      width: 460px;
      height: 370px;
      margin: 0 auto;
      background-size: 100% 100%;
      border: 1px solid;
      margin-top: 180px;
      box-shadow: 0 0 5px white;
      border-color: #ffffff;
      background-attachment: fixed;
      background: rgba(255, 255, 255, .3);
      box-shadow: 3px 3px 6px 3px rgba(235, 235, 235, 0.3);
      overflow: hidden;

    }
 .signinpanel::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    filter: blur(20px);
    z-index: -1;
    margin: -30px;
  }

给signinpanel1添加伪元素，将其定位在元素的下层，设置filter: blur(20px)

参考文章：html + css 毛玻璃特效 - 知乎先看一下效果图在看一下一下代码图 html： css：完整demo ，我们用的是filter：blur() 里面指越大模糊程度越大 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-…https://zhuanlan.zhihu.com/p/205021871

肉馅团子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css＜1＞-毛玻璃特效

效果图：login.html页面： <div class="signinpanel1"> <div class="yhdl_font"> <span class="dl">学校管理员登录</span> </div> <div class="username_div"> <div class="username_user"></div> <input type="t
复制链接

扫一扫

专栏目录