思路：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. selector的小箭头去除

    selector的小箭头去除 .not-arrow{ -webkit-appearance:none; -moz-appearance:none; appearance:none; /*去掉下拉箭头* ...

  2. centos7安装Jenkins及其卸载

    首先安装好Java(Java_home) 查看Java版本 # java -version 如果没安装,依照以下我的另一篇博客进行安装 https://www.cnblogs.com/djlsunsh ...

  3. TextView-- 测量文字宽度

    https://my.oschina.net/lengwei/blog/637380; http://blog.csdn.net/mare_blue/article/details/51388403; ...

  4. VMware安装CentOS7踩坑

      1.VMware安装Centos7加载界面不显示,但有快照 单击“开始”,运行中输入cmd. 然后输入命令 netsh winsock reset. 重启计算机. 2.nat模式网络问题     ...

  5. HDFS高级功能

    HDFS的六大高级特性: 安全模式 安全模式是HDFS所处的一种特殊状态,在这种状态下,文件系统只接受读数据请求,而不接受删除.修改等变更请求.在NameNode主节点启动时,HDFS首先进入安全模式 ...

  6. ElasticSearch索引

    简介 索引是具有相同结构的文档集合.在Elasticsearch中索引是个非常重要的内容,对Elasticsearch的大部分操作都是基于索引来完成的.同时索引可以类比关系型数据库Mysql中的数据库 ...

  7. Android WebView无法播放视频或直播，关闭界面后任在播放的问题；

    1.设置webview属性: webView.setWebChromeClient(new MyWebChromeClient());         webSettings = webView.ge ...

  8. Apache服务器下phalcon项目报Mod-Rewrite is not enabled问题

    问题如图: 项目已经按照官网的教程修改了.htaccess文件,仍旧报此错误,判断可能是apache未添加mod_rewrite,通过查询资料,经以下两步解决此问题: 1.执行sudo a2enmod ...

  9. Celery 在Windows下启动worker时出现错误：ValueError: not enough values to unpack (expected 3, got 0)

    在公司Linux环境下没有出现问题,在回到家后直接在Windows10下运行出现错误: ValueError: not enough values to unpack (expected 3, got ...

  10. 【死磕 Spring】—— IoC 之 Spring 统一资源加载策略

    本文主要基于 Spring 5.0.6.RELEASE 摘要: 原创出处 http://svip.iocoder.cn/Spring/IoC-load-Resource/ 在学 Java SE 的时候 ...