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 制作美丽的照片画廊
在本教程中,我们将创建一个很好看的照片画廊效果.我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像.在照片堆栈视图,我们可以通过将最上面的图像移动到所 ...
随机推荐
- php的基本内容
php是一门后台语言,不能直接用浏览器打开,浏览器是他的载体, php的环境时apache,我们现在用的时phpstudy的继承环境,文件目录应放在apache中的www的根目录下: js的环境为no ...
- 淘宝购买的“公网IP盒子”企业版存在很多问题
现在罗列了几点问题希望官方尽快能得到解决 1:不支持PPPoE拨号(必须让路由器先拨号后再用这个设备上网)2:不支持双线双IP接入3:配置界面不能设置密码(知道内网IP就可以进了)4:不能代理独立IP ...
- MySQL并发复制系列一：binlog组提交 (转载)
http://blog.csdn.net/woqutechteam/article/details/51178803 MySQL Binary log在MySQL 5.1版本后推出主要用于主备复制的 ...
- [UE4]虚幻UE4 .uproject文件无关联 右键菜单少了
前一段时间因为一些事,重装系统 然后重新安装UE4跟VS ,突然发现...竟然之前的UE4原先的项目找不到了,然后用UE4打开就提示 “该文件没有与之关联的程序来执行该操作,请先安装一个程序... ...
- [UE4]控制台命令，生成机器人
在关卡蓝图中: 运行游戏的手,按“·”键(键盘第二行第一个键,数字1前面的一个键)呼出控制台输入界面,输入“ce 事件名称 参数值”,然后回车. 可以添加一个Trigger Box作为机器人的出生点
- win10家庭版怎么开启Administrator超级管理员帐户
一.win10家庭版开启administrator方法: 1.通过Cortana搜索cmd,匹配出“命令提示符”,右键以管理员身份运行: 2.在打开的命令提示符窗口输入net user admin ...
- 第9章 应用层（2）_动态主机配置协议（DHCP）
2. 动态主机配置协议(DHCP) 2.1 静态地址和动态地址的应用场景 (1)静态地址应用场景 ①IP地址不经常更改的设备(如服务器地址) ②使用有规律的IP地址以便于管理(如学校机房为方便教师管理 ...
- KVM总结-KVM性能优化之内存优化
我们说完CPU方面的优化(http://blog.csdn.net/dylloveyou/article/details/71169463),接着继续第二块内容,也就是内存方面的优化.内存方面有以下四 ...
- Fragment与Radiogroup联动，经典的主界面布局。使用show和hide的方式实现；
Fragment+RadioGroup经典的主界面布局,方便实用: 1.使用replace方式: 直接上代码,先是布局文件: <?xml version="1.0" enco ...
- asp.net网站中增删文件夹会导致Session或cache等等丢失
因为这会导致网站资源本身重新加载. 如果要改变文件和文件夹,一般应该是对 app_data 下进行操作.