纯css制作遮罩层特效

css本身的功能就挺强大的,尤其是css3出来之后,大部分特效只用css3就能完成了,无需再费心思去想js怎么怎么做jQuery怎么怎么做。下面是用纯css制作的遮罩层效果:

原始页面,放了三张图片:

纯css制作遮罩层特效_第1张图片

鼠标滑过第一张图片:瞬间加上遮罩层

纯css制作遮罩层特效_第2张图片

鼠标滑过第二张图片:遮罩层缓慢下拉下来

纯css制作遮罩层特效_第3张图片

鼠标滑过第三张图片:遮罩层缓慢的从中心位置旋转变大

纯css制作遮罩层特效_第4张图片

除了以上遮罩层的效果外,还可以配合css3的其他过渡效果、动画效果来完成更多复杂却很有趣的特效。

例子中完整代码如下:

<DOCTYPE html>
<html>
<head>
    <title>遮罩层title>
    <meta charset="utf-8">
    <style type="text/css">
        .box{
            text-align: center;
        }
        .list{
            display: inline-block;
            width: 200px;
            height: 250px;
            margin:5px;
            position: relative;
        }
        .list::before{/*无需再嵌套div来做遮罩层*/
            width: 200px;
            height: 0px;
            display: inline-block;
            background: #fff;
            opacity: 0;
            content: ' ';
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 9;
        }
        #list1:hover::before{
            height: 250px;
            opacity: 0.6;
        }
        #list2:hover::before{
            height: 250px;
            opacity: 0.6;
            transition:all 0.5s linear;/*加个过渡效果*/
        }
        #list3::before{
            width: 10px;
            height: 10px;
            position: absolute;
            top: 120px;/*居中*/
            left: 95px;/*居中*/
        }
        #list3:hover::before{
            opacity: 0.6;
            transform:rotate(360deg) scale(20,25);/*旋转并放大*/
            transition:all 0.5s linear;
        }
        .list img{
            width: 100%;
            height: 100%;
            margin:0px;
            z-index: 1;
        }
    style>
head>
<body>
    <div class="box">
        <div class="list" id="list1"><img src="img/1.jpg">div><div class="list" id="list2"><img src="img/2.jpg">div><div class="list" id="list3"><img src="img/3.jpg">div>
    div>
body>
html>

你可能感兴趣的:(css)