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

用到两个css3 属性：transtion ,transform

用法：

1. transition:property duration timing-function delay;

property：变化的属性

duration：属性变化持续的时间

time-function：变化的效果

delay：延迟时间

 <!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;

             transition: width 3s;

         }

         div:hover {

             width: 500px;

         }

     </style>

 </head>

 <body>

     <div class="nihao"></div>

 </body>

 </html>

运行结果：

2. transform：none | transform-functions;

none：不进行转换

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

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

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

<!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 代码：

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

 </head>

 <body>

     <div class="box">

         <ul>

             <li>

                 <img src="img/110.jpg" width="190" height="190" alt="">

                 <div class="cover">

                     <a href=""><i></i></a>

                     <h4>Alice</h4>

                     <p>来自美国洛杉矶</p>

                 </div>

             </li>

             <li>

                 <img src="img/110.jpg" width="190" height="190" alt="">

                 <div class="cover">

                     <a href=""><i></i></a>

                     <h4>Alice</h4>

                     <p>来自美国洛杉矶</p>

                 </div>

             </li>

         </ul>

     </div>

 </body>

 </html>

css 代码：

    <style>

        * {

            margin:;

            padding:;

        }

        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:;

            top:;

            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>

运行结果：

css3 制作一个遮罩的更多相关文章

  1. 使用CSS3 制作一个material-design 风格登录界面

    心血来潮,想学学 material design 的设计风格,就尝试完成了一个登录页面制作. 这是整体效果. 感觉还不错吧,结尾会附上代码 在编写的过程中,没有使用任何图片或者字体图标,全部使用css ...

  2. CSS3 制作一个边框向周围散开的按钮效果

    我们将要达到的是如下的效果(若效果未出现请刷新): 分析 主要还是运用CSS3的transition, animation, transform还有渐变背景等特性. 由于按钮在鼠标进入时有不同的样式, ...

  3. css3制作一个漂亮的按钮

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFMAAAA4CAIAAAAO41POAAAGWklEQVRogeWabWwTdRzH/8EwMb6Q69

  4. 移动端纯CSS3制作圆形进度条所遇到的问题

    近日在开发的页面中,需要制作一个动态的圆形进度条,首先想到的是利用两个矩形,宽等于直径的一半,高等于直径,两个矩形利用浮动贴在一起,设置overflow:hidden属性,作为盒子,内部有一个与其宽高 ...

  5. 图解CSS3制作圆环形进度条的实例教程

    圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...

  6. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  7. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

  8. CSS3制作心形头像

    1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面.功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头像,然后显示在一个饼图上面.头像需要有一 ...

  9. 使用 jQuery & CSS3 制作美丽的照片画廊

    在本教程中,我们将创建一个很好看的照片画廊效果.我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像.在照片堆栈视图,我们可以通过将最上面的图像移动到所 ...

随机推荐

  1. 廖雪峰Java4反射与泛型-3范型-6super通配符

    1.super通配符 1.1super通配符第一种用法 泛型的继承关系 Pair<Integer>不是Pair<Number>的子类,如 static void set(Pai ...

  2. [UE4]更新Flag坐标

    UserWidget中也是有Event Tick事件,游戏运行每一帧都会调用这个事件 一.在MiniMapFlagData结构体中,添加Slot和ImageWidget变量 二.在StaticMini ...

  3. vs2015 编译google v8

    转自:http://blog.csdn.net/runningman2012/article/details/54692010 系统Win10 64位,vs2015 1. git 下载depot_to ...

  4. sql-datediff

    SQL中DateDiff的用法 DATEDIFF返回跨两个指定日期的日期和时间边界数. 语法DATEDIFF ( datepart , startdate , enddate ) 参数datepart ...

  5. JVM总结-invokedynamic

    前不久,“虚拟机”赛马俱乐部来了个年轻人,标榜自己是动态语言,是先进分子. 这一天,先进分子牵着一头鹿进来,说要参加赛马.咱部里的老学究 Java 就不同意了呀,鹿又不是马,哪能参加赛马. 当然了,这 ...

  6. Python Twisted系列教程3：初步认识Twisted

    作者:dave@http://krondo.com/our-eye-beams-begin-to-twist/ 译者:杨晓伟(采用意译) 可以从这里从头开始阅读这个系列. 用twisted的方式实现前 ...

  7. position:absolute溢出处理

    今天在做布局的时候发现把table设置了position:absolute后 overflow居然不管用了,溢出的部分依然溢出. 百度后,才想起来... ... position后,元素已经和父元素不 ...

  8. 关于QTcreator出现不能包含头文件的解决

    调试出现不能包含“某某.h文件”当增加次文件时候,还会出现另一个不能包含“某某.h”文件. 问题解决:由于VS2015和QT的冲突导致(不完全),下载不关联VS的QT版本再进行安装就可以啦.

  9. Spring和SpringBoot比较，解惑区别

    1.概述: 对于Spring和SpringBoot到底有什么区别,我听到了很多答案,刚开始迈入学习SpringBoot的我当时也是一头雾水,随着经验的积累.我慢慢理解了这两个框架到底有什么区别,我相信 ...

  10. atom编辑器适用

    因为要在多平台下适用node,同事推荐atom.所以下载了进行试用. 1.下载 https://atom.io/