css3 制作一个遮罩

思路：1.显示两块图片，2.图片区域（初始隐藏），3.鼠标移入，遮罩显示，此时遮住图片，4.鼠标移出，遮罩恢复初始状态

用到两个css3 属性：transtion ,transform

用法：

1. transition:property duration timing-function delay;

property：变化的属性

duration：属性变化持续的时间

time-function：变化的效果

delay：延迟时间

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         div {
10             width: 200px;
11             height: 200px;
12             background: #ccc;
13             transition: width 3s;
14         }
15         div:hover {
16             width: 500px;
17         }
18     </style>
19 </head>
20 <body>
21     <div class="nihao"></div>
22 </body>
23 </html>

运行结果：

2. transform：none | transform-functions;

none：不进行转换

transform-functions：包括rotate()----旋转；skew()---------倾斜；scale()-------缩放；translate()------移动

transform的属性包括：rotate() / skew() / scale() / translate() ，分别还有x、y之分，比如：rotateX() 和 rotateY() ，以此类推。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         div {
10             width: 200px;
11             height: 200px;
12             background: #ccc;
13             text-align: center;
14         }
15         div:hover {
16             /* transform: scale(1.5); */
17             transform: translateX(30px);
18             transition: 2s;
19         }
20     </style>
21 </head>
22 <body>
23     <div class="nihao">5555</div>
24 </body>
25 </html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: #ccc;
            text-align: center;
        }
        div:hover {
            transform: scale(1.5);
            /* transform: translateX(30px); */
            transition: 2s;
        }
    </style>
</head>
<body>
    <div class="nihao">5555</div>
</body>
</html>

3. 用transtion 和transform 设置遮罩

html 代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <div class="box">
11         <ul>
12             <li>
13                 <img src="img/110.jpg" width="190" height="190" alt="">
14                 <div class="cover">
15                     <a href=""><i></i></a>
16                     <h4>Alice</h4>
17                     <p>来自美国洛杉矶</p>
18                 </div>
19             </li>
20             <li>
21                 <img src="img/110.jpg" width="190" height="190" alt="">
22                 <div class="cover">
23                     <a href=""><i></i></a>
24                     <h4>Alice</h4>
25                     <p>来自美国洛杉矶</p>
26                 </div>
27             </li>
28         </ul>
29     </div>
30 </body>
31 </html>

css 代码：

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            font-family: "Microsoft yahei", Arial;
            background: #abc;
        }
        .box {
            width: 500px;
            height: 500px;
            margin: 50px auto;
        }
        .box ul li {
            float: left;
            width: 190px;
            height: 190px;
            background: #979797;
            border: solid 10px #979797;
            margin: 10px;
            list-style: none;
            position: relative;
            /* 超出li显示部分进行隐藏 */
            overflow: hidden;
        }
        .box ul li .cover a {
            width: 30px;
            height: 30px;
            background: #ffffff;
            display: block;
            border-radius: 50%;
            line-height: 30px;
            margin: 30px auto;
        }
        .box ul li .cover {
            width: 190px;
            height: 190px;
            background: rgba(255, 39, 42, 0.7);
            position: absolute;
            left: 0;
            top: 0;
            text-align: center;
            color: #ffffff;                                
            /* 设置旋转元素的基点位置： */
            transform-origin: right bottom;
            -webkit-transform-origin: right bottom;          /*兼容 Safari and Chrome */
            -moz-transform-origin: right bottom;             /*兼容  Firefox 4 */
            -o-transform-origin: right bottom;               /*兼容  Opera */
            /* 旋转90度,这样 */
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg);                /*兼容 Safari and Chrome */
            -moz-transform: rotate(90deg);                   /*兼容  Firefox 4 */
            -o-transform: rotate(90deg);                     /*兼容  Opera */
            /* 对所有属性进行变形 */
            transition: all 0.35s;
            -webkit-transition: all 0.35s;                   /*兼容 Safari and Chrome */
            -moz-transition: all 0.35s;                      /*兼容  Firefox 4 */
            -o-transition: all 0.35s;                        /*兼容  Opera */
        }
        .box ul li .cover p {
            margin-top: 10px;
            font-size: 14px;
        }
        .box ul li:hover .cover {
            /* 鼠标移入时,所有属性旋转到0度 */
            transform: rotate(0deg);
            -webkit-transform: rotate(0deg);                /*兼容 Safari and Chrome */
            -moz-transform: rotate(0deg);                   /*兼容  Firefox 4 */
            -o-transform: rotate(0deg);                     /*兼容  Opera */
        }
    </style>

运行结果：

posted on 2018-01-15 18:37 huanying2015 阅读(346) 评论(0) 编辑收藏举报