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 制作美丽的照片画廊
在本教程中,我们将创建一个很好看的照片画廊效果.我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像.在照片堆栈视图,我们可以通过将最上面的图像移动到所 ...
随机推荐
- 廖雪峰Java4反射与泛型-1反射-1Class类
1.Class类与反射定义 Class类本身是一种数据类型(Type),class/interface的数据类型是Class,JVM为每个加载的class创建了唯一的Class实例. Class实例包 ...
- ie6下a标签click事件无法触发加载iframe
ie6下a标签click事件无法触发加载iframe,把a换成span或者别的,就可以了
- mybatis 整合spring之mapperLocations配置的问题(转)
以防忘记,收集一下别人的文章吧 https://www.cnblogs.com/1xin1yi/p/7373739.html 今天尝试spring整合mybatis时遇到这么一个问题,就是在配置sql ...
- The type android.support.v4.view.ScrollingView cannot be resolved. It is indirectly referenced from
前几天另一个项目使用RecyclerView控件,引用类库然后继承一切都很顺序 详细:http://www.cnblogs.com/freexiaoyu/p/5022602.html 今天打算将另一个 ...
- [UE4]虚幻引擎UE4如何制作可拖动（Drag and Drop）的背包（Scrollbox）（转载）
最终效果 由于隐私保护,不想截实际的效果图,下面给出了示意图,左边是背包A,右边是背包B,将其中的子项目从左侧拖往右侧的背包,然后在插入位置放置. 第一步: 制作一个user widget(在内容浏览 ...
- [UE4]客户端-服务器模式
客户端负责表现.服务器端负责数据. 以掉血为例: 一.玩家A砍了B一刀 二.服务器计算伤害,修改B的血量 三.把B的血量发给B,A砍B的动作发给所有能看到的玩家 四.客户端播放掉血量(如果允许可见), ...
- Hibernate c3p0的整合
Hibernate整合c3p0 Hibernate中可以使用默认jdbc连接池,但是无论功能还是性能都不如c3p0 在pom添加jar包: <!-- hibernate-c3p0 --> ...
- C#语言时间
string x = "abcdefg"; 定义字符串 int length = x.Length; 定义长度 string y = x.Substring(1, 2); 意思的从 ...
- Linux下Mysql的odbc配置
在安装配置之前,需要先大概了解一下MyODBC的架构. MyODBC体系结构建立在5个组件上,如下图所示: Driver Manager: 负责管理应用程序和驱动程序间的通信,主要功能包括:解析DSN ...
- ORA-28000账户被锁和解锁
sqlplus "/as sysdba" 或者 sqlplus /nolog --不在cmd或者terminal当中暴露密码的登陆方式 conn /as sysdba 查看用户信息 ...