一,滤镜效果
1.灰度
写法:fiter:grayscale(20%);
就是表示元素的灰度 (可以用来做按钮点击的立体感)
那么他一般都用作什么呢?
比如说:所有网页的灰度 如纪念日等....
<style>
div{
width: 100px;
height: 100px;
margin: 50px auto;
background-color: red;
}
div:hover{
filter: grayscale(20%);
}
</style>
</head>
<body>
<div>
</div>
上面代码时写一个当鼠标滑入时,调滤镜效果.(在这里我觉得可以用来做按钮的点击效果(JavaScript))
鼠标没进入前
鼠标进入后
2.模糊度
写法:filter:blur(5px);
可以使背景图片变模糊.
<style>
div{
width: 100px;
height: 100px;
margin: 50px auto;
background-color: red;
}
div:hover{filter:blur(5px);
}
</style>
</head>
<body>
<div>
</div>
这里的例子就不用图片来进行演示了
鼠标进入前
鼠标进入后
3.反色
写法:filter:invert(0);
0 表示不反色显示原图，1表示100％完全反色
二,网页的自适应
什么是网页的自适应呢? 也可以说是留白部分 可以随着浏览器窗口大小的变化而使布局美观.如小米官网的设计
例图
当浏览器窗口变小时 留白就不见了
例图
那么这样的写法需要怎么写呢 ?
只需要在外面在套一个盒子写上宽度百分百 ,将子集设置一个margin:auto;即可以实现这样的效果。
width: 100%;
}
.box{
width: 200px;
height: 200px;
background-color: red;
margin: auto;
}
三,自适应
理解即可,这个自适应涉及到服务器,是后端的事情,前端需了解
千万不要和上面的网页的自适应搞混了,这个是设备的自适应
手机 电脑 安卓 给每个设备设置网页大小
**针对用户设备的不同,提供不同的代码,从而保证在不同设备下都能完美的展现网页.**
网友评论