1、将对应的大图小图存放在同一个li标签中（鼠标悬浮到小图时，方便定位到大图）。
2、内部样式中利用"display:none"隐藏大图所在div。
3、鼠标悬浮到相应区域时，修改同li标签下大图所在div的display属性("display:block")。
小结：1、最上层的div必须定位，否则无法约束子元素。
2、li标签设置浮动时，图片会重叠，无法排成一列。浮动必须落实到图片。
3、小照片放在span标签中，变成了内联元素。需为其添加"display: block"转换为块级元素，才能设置图片外边距.
以下是代码：
[html] view plain copy
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0px
padding: 0px }
/*相框背景*/
#all{
width: 800px
height: 800px
background: greenyellow
position: relative
/*父元素必须定位，否则无法约束子元素*/
}
/*相册大图*/
#all ul li .big img{
width: 500px
height: 400px
}
#all ul li .big{
position: absolute
left: 70px
top: 130px
display: none/*内部样式中隐藏大图所在div*/
}
/*小图设置*/
#all ul li .smallhover img{
width: 70px
height: 50px
position: absolute
right: 100px
float: left/*设置浮动，可使图片排成一列*/
}
#all ul li .smallhover{
/*因为小照片放在span标签中，变成内联元素。设置display: block将其转换为块级元素，才能设置图片外边距*/
display: block
margin-top: 40px
overflow: hidden
}
/*实现效果，鼠标悬浮在小图片时，相应的大图片显示*/
#all ul li:hover .big{
display: block
}
</style>
</head>
<body>
<div id="all">
<ul>
<li>
<!--小图-->
<span class="smallhover"><img src="img/lotus1.jpg" /></span>
<!--大图-->
<div class="big" style="display: block" >
<!--设置初始图片-->
<img src="img/lotus1.jpg" />
</div>
</li>
<li>
<span class="smallhover"><img src="img/lotus2.jpg" /></span>
<div class="big"><img src="img/lotus2.jpg" /></div>
</li>
<li>
<span class="smallhover"><img src="img/lotus3.jpg" /></span>
<div class="big"><img src="img/lotus3.jpg" /></div>
</li>
</ul>
</div>
</body>
</html>
第一步：编辑菜单的HTML代码。
菜单包含三个列表项，分别取名为“Menu1”、“Menu2”、“Menu3”。
XML/HTML Code<div class="css3Menus">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
</ul>
</div>
第二步：设置菜单的背景。
在该步骤中，把导航的背景设置为黑色。宽度、高度和内边距为可选项，可以不设置。
CSS Code
.<span style="width: auto height: auto float: none" id="4_nwp"><a style="text-decoration: none" mpid="4" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=e2fbae28688be8a0&k=css3&k0=css3&kdi0=0&luki=10&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=a0e88b6828aefbe2&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F2453%2Ehtml&urlid=0" id="4_nwl"><span style="color:#0000fffont-size:14pxwidth:autoheight:autofloat:none">css3</span></a></span>Menus {
background: #14080a
width:506px
height:260px
padding:20px
}
如下图：
第三步：利用border-radius，制作圆形导航。
该步中，利用CSS3的一些酷的功能，尤其是border-radius ，将每个列表项的背景设置为黄色，形状为圆形。
CSS Codeul {
list-style: none
}
li {
float:left
font: 14px/10px Arial, Verdana, sans-serif
color:#FFF
background-color:#CCCC00
width: 80px
height: 80px
padding:20px
margin:0 30px 0 0
-webkit-border-radius: 60px
-moz-border-radius: 60px
border-radius: 60px
}
菜单看起来呈下面样子：
第四步：设置菜单的对齐方式。
本步骤中，将为每个列表项设置特定的背景颜色与位置：
CSS Codeli#menu1 {
background-color: #00FFCC
}
li#menu2 {
background-color: #CC9900
margin-top:100px
}
li#menu3 {
background-color: #33FF66
margin-top:50px
}
现在菜单看起来呈下面样子：
第五步：设置菜单中链接的对齐方式。
CSS Codeli a {
color:#FFF
text-decoration:none
display:<span style="width: auto height: auto float: none" id="2_nwp"><a style="text-decoration: none" mpid="2" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=e2fbae28688be8a0&k=block&k0=block&kdi0=0&luki=7&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=a0e88b6828aefbe2&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F2453%2Ehtml&urlid=0" id="2_nwl"><span style="color:#0000fffont-size:14pxwidth:autoheight:autofloat:none">block</span></a></span>
width: 80px
height: 45px text-align: center
padding:35px 0 0 0
margin:0 40px 0 0
-webkit-border-radius: 40px
-moz-border-radius: 40px
border-radius: 40px
}
li#menu1 a {
background-color: #FF0000
}
li#menu2 a {
background-color: #660033
}
li#menu3 a {
background-color: #66CCCC
}
菜单现阶段的样子：
第六步：定义另一种效果，当鼠标悬浮在链接上时进行展现。
CSS Codeli a:hover,
li a:focus,
li a:active {
width: 120px
height:65px
padding:55px 0 0 0
margin:-20px 0 0 -20px
-webkit-border-radius: 60px
-moz-border-radius: 60px
border-radius: 60px
}
菜单样式如图：
第七步：最后为导航增加动画效果。
CSS Codeli a:hover,
li a:focus,
li a:active {
-webkit-animation-name:bounce
-webkit-animation-duration:1s
-webkit-animation-iteration-count:4
-webkit-animation-direction:alternate
}
@-webkit-keyframes bounce{<span style="width: auto height: auto float: none" id="1_nwp"><a style="text-decoration: none" mpid="1" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=e2fbae28688be8a0&k=from&k0=from&kdi0=0&luki=2&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=a0e88b6828aefbe2&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F2453%2Ehtml&urlid=0" id="1_nwl"><span style="color:#0000fffont-size:14pxwidth:autoheight:autofloat:none">from</span></a></span>{margin:0 40px 0 0}
to{margin:120px 40px 0 0}
}
菜单所产生的动画效果：
2017-百度前端技术学院编码任务： 鼠标悬浮模糊效果
DEMO
项目源码
这个任务主要是学习和使用 CSS3 大部分的属性，主要使用的属性如下：
其实刚开始，我就在结构上面犯了错误。如果把图片作为背景图片使用，当使用 filter 模糊效果的时候，任何子元素都会产生模糊效果，那么后面文字和边框都是模糊不清的，所以应该采用单独使用图片元素 img 来显示背景图片。
首先设置背景图片为线性渐变 linear-gradient ，设置方向为从左到右并且设置2段相同的颜色节点，0%和100%为相同的颜色，这样才可以更好的实现文字流光的效果。
渐变的方向其实是通过设置角度来控制，角度是通过水平线和渐变线之间产生的。默认方向从下到上就是 0deg 、从左到右就是 90deg 。
我们发现整个背景都是渐变色，我们只是需要文字的颜色变为渐变而已。我们开始利用 -webkit-background-clip 属性来背景剪裁为文字，同时设置文字的 -webkit-text-fill-color 或者 color 属性让其文字颜色为透明色，这样才有让文字显示为渐变色。
这里需要注意的是：背景裁剪为文字当前只有webkit内核浏览器支持，同时设置-webkit-text-fill-color和color，那么前者会覆盖后者属性值。
另外我们需要设置 background-size: 200% 100%，因为渐变颜色设置为2段相同的颜色节点，目的是为了重复2段相同的颜色，实现动画文字流光效果。
目前就差动画了，首先需要设置动画规则 keyframes ，然后设置 animation 动画周期时间、速度曲线和播放次数。因为背景长度为200%，所以动画规则设置 100% {background-position: -100% 0} ，让其沿着X轴变化从而产生流动效果。
到此文字流光效果实现了
背景图模糊处理是设置 filter: blur(3px)，CSS3的filter(滤镜) 属性主要是针对图片进行处理，比如黑白、对比和亮度等等。
这样背景模糊的效果就实现了。
刚开始没什么思路，后来搜索才知道通过伪元素 ::before 和 ::after 可以实现这样的效果。思路是通过绝对定位设置前后伪元素来显示上下和左右边框，设置元素上下边框的伪元素 left：50% ，左右 top：50% ，通过改变其定位、宽度和高度来实现效果。
隐藏和显示是通过设置 opacity 属性来实现,初始状态为0，鼠标滑动为1来实现。
CSS3的许多新特效非常酷炫，可以实现非常复杂的效果和动画，值得大家好好看看。
当我想鼠标移动到a元素上面时产生手指效果，但是却发现无效。通过排查是伪元素覆盖在a元素上面，导致根本无法接触。那么怎么能改变其它们的层叠关系呢？我想到了 z-index 属性，因为这个问题我重新学习了z-index属性的使用。
对于一个已经定位的元素（即position属性值是非static的元素)
我们现在div(A)和div(B)中再分别创建一个小的div(c)和div(d)
我们试试把div(A)的Z-index设置成auto。
再试试只把div(a)设置为auto
其实主要是找到对比元素之间的基准堆叠上下文，以此数字越大层级越高。
取值：
auto : 元素不会建立一个新的本地堆叠上下文。当前堆叠上下文中新生成的元素和父元素堆叠层级相同。
<integer>: 整型数字是生成的元素在当前堆叠上下文中的堆叠层级。元素同时会创建一个堆叠层级为0的本地堆叠上下文。这意味着子元素的 z-indexes 不与元素外的其余元素的 z-indexes 进行对比。
通俗说，设置auto时元素堆叠等级和父元素一样，遇到堆叠上下文之后根据大小来判断层级。设置具体数字的元素同样遇到堆叠上下文根据大小来判断层级，它的子元素和外界元素进行比较时,采用父元素的Z-index进行比较, 和兄弟元素比较采用自身的Z-index。
CSS3的许多新特效非常酷炫，可以实现非常复杂的效果和动画，值得大家好好看看。
