css3 制作一个遮罩

思路：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 制作一个遮罩的更多相关文章

使用CSS3 制作一个material-design 风格登录界面
心血来潮,想学学 material design 的设计风格,就尝试完成了一个登录页面制作. 这是整体效果. 感觉还不错吧,结尾会附上代码在编写的过程中,没有使用任何图片或者字体图标,全部使用css ...
CSS3 制作一个边框向周围散开的按钮效果
我们将要达到的是如下的效果(若效果未出现请刷新): 分析主要还是运用CSS3的transition, animation, transform还有渐变背景等特性. 由于按钮在鼠标进入时有不同的样式, ...
css3制作一个漂亮的按钮
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFMAAAA4CAIAAAAO41POAAAGWklEQVRogeWabWwTdRzH/8EwMb6Q69
移动端纯CSS3制作圆形进度条所遇到的问题
近日在开发的页面中,需要制作一个动态的圆形进度条,首先想到的是利用两个矩形,宽等于直径的一半,高等于直径,两个矩形利用浮动贴在一起,设置overflow:hidden属性,作为盒子,内部有一个与其宽高 ...
图解CSS3制作圆环形进度条的实例教程
圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程首先,当有人说你能不能 ...
css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片思路:1.制作之前呢,我们先来 ...
详解用CSS3制作圆形滚动进度条动画效果
主题今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...
CSS3制作心形头像
1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面.功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头像,然后显示在一个饼图上面.头像需要有一 ...
使用 jQuery & CSS3 制作美丽的照片画廊
在本教程中,我们将创建一个很好看的照片画廊效果.我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像.在照片堆栈视图,我们可以通过将最上面的图像移动到所 ...

随机推荐

HTML5绘制饼图示例（一）
原文地址:http://www.2cto.com/kf/201108/100251.html HTML5引入Canvas元素,用于图形的绘制,我们可以仅仅基于HTML和JavaScript就能绘制出原 ...
IRQL Ring0实现
一,IRQL的定义Interrupt ReQuest Level DDK对IRQL的定义是:中断请求级(IRQL)标示中断的优先级.处理器在一个IRQL上执行线程代码,IRQL是帮助决定线程如 ...
docker镜像创建redis5.0.3容器集群
拉取redis5.0.3镜像 # docker pull daocloud.io/library/redis:5.0.3 [root@localhost ~]# docker pull daoclou ...
（转）TP-LINK WR720N v3 刷OpenWrt
之前买了一台改过硬件的TP-Link WR841N-V7路由器,并且成功刷机OpenWrt也完成了FQ,WR841N-V7的更多详情可以看这里,但是可能卖家焊接的有问题,导致老是听到滋滋滋高频率的赤耳 ...
list函数
列表的切片: 获取: 1. [start:] 2. [:end] 3. [statr:end] 4. [statr: end: spet] 修改: listvar[:2] = ' 把0~1索引元素删除 ...
iOS NSUserDefaults
一.介绍 NSUserDefaults适合存储请练级的本地数据,对于一些简单的数据(NSString类型)来说是首选,但是如果我们自定义了一个对象,对象保存的是一些信息,这是就不能直接存储到NSUse ...
软硬链接ln
1:软链接 -- 快捷方式 I:ln -s 文件名快捷方式的名字文件名:使用绝对路径 II':目录也可以创建链接 2:硬链接 I: ln 文件名硬链接的名字
MySQL存储过程事务transaction
MySQL 中,单个 Store Procedure(SP) 不是原子操作,而 Oracle 则是原子的.如下的存储过程,即使语句2 失败,语句 1 仍然会被 commit 到数据库中: create ...
web端文字转语音的几种方案
最近在开发一个微信排队取号的的系统,其中对于服务员端(管理端) 需要有呼叫功能,即点按钮就播出"xxx号顾客请就座"的声音. 经过在网上一番搜索研究,web端实现指定文字的语音播 ...
深入Spring Boot：怎样排查 Cannot determine embedded database driver class for database type NONE
ref:https://www.journaldev.com/13830/spring-boot-cannot-determine-embedded-database-driver-class-for ...

css3 制作一个遮罩

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

随机推荐

热门专题