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 制作美丽的照片画廊
在本教程中,我们将创建一个很好看的照片画廊效果.我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像.在照片堆栈视图,我们可以通过将最上面的图像移动到所 ...
随机推荐
- IGMP Internet组管理协议 未完
一.IGMP Internet组管理协议 2.IGMP v2 3.IGMP三版本比较 4.1.1.4 IGMP v2 与 IGMP v1 的兼容 5.IGMP窃听(IGMP Snooping) IGM ...
- python中文件操作
打印进度条
- c#类的继承与包含的关系
基础例子 class Dept { private string name; private Emp emp; public string getName() { return this.name; ...
- 删除win7任务栏通知区域图标的方法
大家都知道程序运行后会在任务栏的通知区域显示表明正在运行,但是有很多失效的图标也会在此显示,那么怎么样删除那些没用的图标呢? 1.在开始运行里输入:regedit进入注册表编辑器 2.进入注册表编辑器 ...
- 第5章 IP地址和子网划分（3）_子网划分
6.子网划分 6.1 地址浪费 (1)IPv4公网地址资源日益紧张,为减少浪费,使IP地址能够充分利用,就要用到子网划分技术. (2)传统上一个C类地址,如212.2.3.0/24,其可用的地址范围为 ...
- Python: 如何写一个异常
例子1 try: #test area function() except Exception, e: print e.message 例子2:用raise抛出一个异常 if bool_var is ...
- SDOI2018物理实验
/* 向量运算不会呐 抄了一个长度几百行的模板 一直过不了编译 醉了 还是抄了大佬的代码 首先把所有的线段投影到 导轨上 然后用set 分上和下分别维护一下 距离导轨最近的线段 是能够照射到的 可以证 ...
- es6(14)--iterator for ...of循环
//iterator for ...of循环 { let arr=['hello','world']; let map=arr[Symbol.iterator](); console.log(map. ...
- [python,2018-01-15] 冒泡法排序
想写一个冒泡法排序,没什么思路,就先写了个java的 public static void main(String[] args) { int array[] = {88,2,43,12,34,8,6 ...
- springboot中JPA的应用
1.JPA JPA(Java Persistence API)是Sun官方提出的Java持久化规范.它为Java开发人员提供了一种对象/关联映射工具来管理Java应用中的关系数据.他的出现主要是为了简 ...