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 制作美丽的照片画廊
在本教程中,我们将创建一个很好看的照片画廊效果.我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像.在照片堆栈视图,我们可以通过将最上面的图像移动到所 ...
随机推荐
- typescript静态属性,静态方法,抽象类,多态
/* 1.vscode配置自动编译 1.第一步 tsc --inti 生成tsconfig.json 改 "outDir": "./js", 2.第二步 任务 ...
- 结对编程——paperOne基于java的四则运算 功能改进
项目成员:张金生 张政 由于新的需求,原本使用JSP的实现方式目前改为Java实现,即去除了B/S端. 需求分析: 1.四则运算要满足整数运算.分数运算两种: 2.运算题目随机,并且可以打印题 ...
- 解决sql中上下左右backspace不能用的方法
一. 解决输入 BACKSPACE 键变成 ^h 的问题 #su - oracle $stty erase ^h. 要永久生效,可以加入到用户环境配置文件 .bash_profile 中 , 加入如下 ...
- 使用SecureCRT软件运维的配置习惯
使用 SecureCRT 软件运维的配置习惯 作者:Eric 微信:loveoracle11g 选项--->全局选项 配置文件存放路径 默认CRT配置的配置文件在C盘 常规--->默认会话 ...
- time random sys os 模块
时间模块 在Python中,通常有这三种方式来表示时间:时间戳.元组(struct_time).格式化的时间字符串: (1)时间戳(timestamp) :通常来说,时间戳表示的是从1970年1月1日 ...
- mysql：视图，触发器，事务，存储过程，函数。
一 视图 1 什么是视图:视图其实就是通过查询得到一张表并且保存下来,就是一张虚拟的表,并非真实存在,比如我们将两个表在终端通过(inner join)内链接起来,那么我们得到的这个表就叫做视图,其 ...
- JVM总结-synchronized
在 Java 程序中,我们可以利用 synchronized 关键字来对程序进行加锁.它既可以用来声明一个 synchronized 代码块,也可以直接标记静态方法或者实例方法. 当声明 synchr ...
- centos磁盘挂载|centos虚拟机硬盘不够怎么办?|centos虚拟机硬盘的扩展
Centos6磁盘挂载 添加一块磁盘 分区,格式化,挂载新磁盘 磁盘挂载 df -lh fdisk -l fdisk /dev/sdb 这个命令执行后依次输 n p 回车 回车 w fdisk -l ...
- uva-10905-贪心
题意:对于输入的数字,拼接成一个最大的数字 解法:把数字当成字符串处理,排序,输出即可 import java.io.FileInputStream; import java.io.FileNotFo ...
- 阿里云SQLSTATE[HY000] [2002] php_network_getaddresses: getaddrinfo failed: Temporary failure in name resolution
如果是阿里云的服务器 SQLSTATE[HY000] [2002] php_network_getaddresses: getaddrinfo failed: Temporary failure in ...