第二课模糊遮罩相框

一、效果

二、知识点

主要是用到css的几个属性

1、opacity：0-1;透明度。

2、filter： blur(3px) grayscale(0.8); 滤镜效果模糊半径灰度比例（0-1）。

3、float：left；左浮动横排显示效果在父级使用overflow：hidden；创建BFC环境解决父级塌陷问题。

4、使用<li>块包裹<img> 用li块去限定图片大小及属性，图片宽高定义成100%，主要为了自适应，提高维护性

5、利用鼠标选中伪类 :hover ,例子：.wrap:hover li:not(:hover){/*注意这个将选中的wrap区域中的单个li块除外，其他li都变化*/

三、源码

源码中用到的 1.jpg 2.jpg ....6.jpg 请自行找6张jpg图片在根目录创建images 文件夹放在其中

<!doctype html>
<html>
<head><meta charset="UTF-8"><meta name="keywords" content="模糊遮罩相框"><meta name="description" content="这是一个模糊遮罩相框"><title>模糊遮罩</title><style>body{margin: 0;padding: 0;}.wrap{overflow: hidden;/*1超出隐藏   2创建BFC环境可以解决父级塌陷*/width: 480px;height: 320px;margin: 50px auto;transition: 1s;}.wrap:hover li:not(:hover){/*注意这个 将选中的wrap区域中的单个li块除外，其他li都变化*/filter: blur(3px) grayscale(0.8);/*滤镜效果 模糊半径 灰度比例0-1*/opacity: 0.8;/* 透明度*/}ul{list-style: none;margin: 0;padding: 0;}.wrap li{float: left;/*左浮动 横排显示*/width: 150px;/*用li框限制图片宽度*/height: 150px;/*用li框限制图片高度*/margin: 5px;}.wrap img{width: 100%;/*自适应宽度*/height: 100%;/*自适应高度*/}</style>
</head>
<body><div class="wrap"><ul><li><img src='images/1.jpg' width="1920px" height="1080px" ></li><!-- 在这里定义原始的宽高，但宽高的变换在css中定义 --><li><img src='images/2.jpg' ></li><li><img src='images/3.jpg' ></li><li><img src='images/4.jpg' ></li><li><img src='images/5.jpg' ></li><li><img src='images/6.jpg' ></li></ul></div>
</body>
</html>

View Code

转载于:https://www.cnblogs.com/Liuxingtao/p/10307319.html

第二课模糊遮罩相框相关推荐

java 获取ip地址_老杜带你学Java【第二课】
上期链接:老杜带你学Java[第一课] 01 写在前面欢迎来到杜老师的「零基础学Java」课堂~今后,我们就是Java软件工程师了.(此处应该有掌声???)本专题为<零基础学Java>专 ...
管理学（第二课）笔记
管理学(第二课)笔记前言统计:60%想了解管理学.25%想考研.15%为其他. 有决定.有态度.有方法: 不划重点:慕课学习.上课学习: 不直接念PPT. 问卷,预访谈,沟通: 我的看法. 之前原 ...
第二课基础篇_SQL语法
第二课基础篇_SQL语法一.通用语法 1.SQL语句可以单行或多行书写,分号结尾. 2.SQL语句可以使用空格或缩进增强语句的可读性. 3.MySQL数据库库的SQL语句不区分大小写,关键字建议使 ...
手把手教你写电商爬虫-第二课实战尚妆网分页商品采集爬虫
系列教程手把手教你写电商爬虫-第一课找个软柿子捏捏如果没有看过第一课的朋友,请先移步第一课,第一课讲了一些基础性的东西,通过软柿子"切糕王子"这个电商网站好好的练了一次手,相 ...
android 集合内存泄漏,Android内存泄漏第二课--------（集合中对象没清理造成的内存泄漏）...
一.我们通常把一些对象的引用加入到了集合容器(比如ArrayList)中,当我们不需要该对象时,并没有把它的引用从集合中清理掉,这样这个集合就会越来越大.如果这个集合是static的话,那情况就更严重 ...
cdata节赋值变量_JS原生练习题：第二课第5~12节
第五节:函数传参,改变Div任意属性的值函数传参,改变Div任意属性的值属性名: 属性值: 确定重置在上方输入"属性名"和"属性值",点击确认按钮查看效 ...
0.0 目录-深度学习第二课《改善神经网络》-Stanford吴恩达教授
文章目录第五课第四课第三课第二课第一课第五课 <序列模型> 笔记列表 Week 1 循环序列模型 Week 1 传送门 -> 1.1 为什么选择序列模型 1.2 数学符号 ...
Coursera公开课笔记: 斯坦福大学机器学习第二课“单变量线性回归(Linear regression with one variable)”
Coursera公开课笔记: 斯坦福大学机器学习第二课"单变量线性回归(Linear regression with one variable)" 发表于 2012年05月6号由 ...
GIS讲堂第二课-地图切片简介以及OL中的调用
概述: 在大家的支持与帮助下,"GIS讲堂"第二课已落下帷幕,在此对大家的支持与帮助表示衷心的感谢,同时呢,也给大家致歉,由于感冒的缘故,讲课的时候的各种毛病还请大家多多包涵,下面 ...

第二课模糊遮罩相框

第二课模糊遮罩相框相关推荐

最新文章

热门文章

第二课 模糊遮罩相框

第二课 模糊遮罩相框相关推荐

最新文章

热门文章

第二课模糊遮罩相框

第二课模糊遮罩相框相关推荐