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 制作美丽的照片画廊
在本教程中,我们将创建一个很好看的照片画廊效果.我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像.在照片堆栈视图,我们可以通过将最上面的图像移动到所 ...
随机推荐
- Scrapy学习篇（三）之创建项目和Scrapy的安装
安装Scrapy 了解了Scrapy的框架和部分命令行之后,创建项目,开始使用之前,当然是安装Scrapy框架了. 关于Scrapy框架的安装,请参考:https://cuiqingcai.com/5 ...
- typescript类与继承
/* 1.vscode配置自动编译 1.第一步 tsc --inti 生成tsconfig.json 改 "outDir": "./js", 2.第二步 任务 ...
- GDAL 地图切片层级计算公式
作者: 蔡建良 2016-7-6 地图瓦片起始层数: xMin=栅格数据最小经度 xMax=栅格数据最大经度 起始层数=Log(第0层经纬度跨度/当前地图的经纬度跨度,2) minzoom = (in ...
- POJ 多项式加法
题解: 采用顺序表.考虑到题目中没有规定指数上界,为避免RE,拟不采用数组.参考了http://blog.csdn.net/inlovecy/article/details/15208473后,最终采 ...
- ubuntu18.04 LTS解决/boot空间不足
1. 查看磁盘占用情况 df -h Filesystem Size Used Avail Use% Mounted on/dev/nvme0n1p5 181M 141M 27M ...
- Ubuntu 16.04.3 LTS 部署 Cloud Torrent
下载安装程序 apt install -y curl sudo curl https://i.jpillora.com/cloud-torrent! | bash 写配置文件 sudo vim /et ...
- SOLR缓存调优
缓存在 Solr 中充当了一个非常重要的角色,Solr 中主要有这三种缓存: Filter cache(过滤器缓存),用于保存过滤器(fq 参数)和层面搜索的结果 Document cache(文档缓 ...
- 函数的嵌套+nonlocal和global关键字(重点)
1.在函数中声明函数 在内部函数中使用变量的时候, 查找顺序: 先找自己 -> 上一层 -> 上一层..全局 -> 内置 # 函数的互相调用 # def func1(): # pri ...
- android开发 一个更优的listView的写法
布局xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:androi ...
- [转] 高频 mos 选择需要考虑相关资料
节选自 http://www.dianyuan.com/bbs/987183.html [草根大侠]贴 关于MOS管导通内阻和米勒电容(Qgd)差异对效率的影响 http://www.epc.com. ...