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>Documenttitle>
 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>

运行结果:

css3 制作一个遮罩_第1张图片

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>Documenttitle>
 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">5555div>
24 body>
25 html>

css3 制作一个遮罩_第2张图片

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>Documenttitle>
    <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">5555div>
body>
html>

css3 制作一个遮罩_第3张图片

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>Documenttitle>
 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>Aliceh4>
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>Aliceh4>
25                     <p>来自美国洛杉矶p>
26                 div>
27             li>
28         ul>
29     div>
30 body>
31 html>

css 代码:

    

运行结果:

css3 制作一个遮罩_第4张图片

 

转载于:https://www.cnblogs.com/huanying2015/p/8289342.html

你可能感兴趣的:(css3 制作一个遮罩)