css图片特效
网站图片往往有很多显示效果,使用css是实现图片特效的比较简便的方式。下面记录一段css鼠标指向的多重特效:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.anli li {
float: left;
position: relative;
width: 320px;
height: 320px;
background-color: red;
margin-top: 20px;
overflow: hidden;
}
/* li+li 选择紧接在 <li> 元素之后的所有 <li> 元素。此处指后两个 li 标签*/
.anli li+li {
margin-left: 20px;
} .mask {
position: absolute;
top: 0px;
left: 0px;
width: 320px;
height: 320px;
background-color: black;
opacity: 0;
transition: 0.8s;
z-index: 8;
} .anli img {
width: 320px;
transition: 0.8s;
z-index: 5;
position: relative;
/*height: 320px;*/
}
.anli .text{
color: white;
z-index: 10;
position: absolute;
top: 0px;
left:0px;
padding: 20px;
}
.text .move{
margin-top: 245px;
transition: 0.8s;
}
/* li:hover .move 鼠标移上后 move 标签的动画效果*/
.anli li:hover .move{
margin-top: 80px;
}
.anli li:hover .move+.move{
margin-top: 20px;
}
.anli li:hover img{
transform: scale(1.1);
}
.anli li:hover .mask{
opacity: 0.5;
}
</style>
</head>
<body>
<ul class="anli">
<li>
<div class="mask"></div>
<img src="1e.jpg" />
<div class="text">
<h2 class="move">秦凯&何姿西安婚礼</h2>
<p class="move">高雅灰+轻奢粉,婚礼围绕「涟漪」这一主题,整体呈现了“流动的水”这一概念。</p>
<p class="move">酒店 西安豪享来温德姆至尊酒店</p>
<p class="move">嘉宾 300人以上</p>
</div>
</li>
<li></li>
<li></li>
</ul>
</body>
</html>
css图片特效的更多相关文章
- DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理
推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...
- js,jquery,css,html5特效
包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...
- HTML5+CSS3鼠标悬停图片特效
点击预览效果 下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...
- 8个超级震憾的Jquery图片特效欣赏,考验你的浏览器!
这次主要是来分享几个个人觉得十分震憾的图片特效,有jQuery的,有CSS3的,有很萌的乌鸦动画,也有简单朴实的图片播放动画,当然有些你可能已经看到过了,不过也没关系,你能路过就算是对我的支持了. j ...
- 10个超漂亮的CSS 3D特效
10个超漂亮的CSS 3D特效 一.总结 一句话总结: 后面有空得好好练一练,也可以作为录课素材 二.10个超漂亮的CSS 3D特效 转自或参考:10个超漂亮的CSS 3D特效https://blog ...
- 《基于JQuery和CSS的特效整理》系列分享专栏
<基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201724.html 文章 一款基于jQue ...
- 几种垂直居中的方式及CSS图片替换技术
由于块级元素的高度是可以设置的,所以对于块级元素的垂直居中比较简单. 方法一: 在不定高的情况下,把元素的上下内边距设为同一个值即可实现,即padding :10px 0; 以上方法针对块级元素和 ...
- css图片叠加和底部定位
css图片叠加和底部定位 css图片叠加 两张图片需要叠在一起显示,如何定位 容器先对定位 第一张图片正常摆放 第二张图片绝对定位,top:0px 这样便实现了两张图片叠加在一起了,设置z-index ...
- Web 开发最有用的50款 jQuery 插件集锦——《图片特效篇》
<Web 开发最有用的50款 jQuery 插件集锦>系列文章向大家分享最具创新的50款 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插 ...
随机推荐
- 工作流框架Activiti
最近在看一些项目设计方面的文章,涉及到了工作流技术,于是了解一下. 1.概念 工作流(Workflow),就是“业务过程的部分或整体在计算机应用环境下的自动化”,它主要解决的是“使在多个参与者之间按照 ...
- jQyery 整体架构
jQuery的模块 一.jQuery一共有13个模块: 1. 核心方法 2. 回调模块(callbacks) 3. 数据缓存 4. 异步队列(Deffered) 5. 选择器操做 6. 属性操作 7. ...
- C#之插入排序
算法描述 1.假定数组第一位为有序序列,抽出后一位元素与有序序列中元素依次比较: 2.如果有序序列元素大于抽出元素,将该元素向后移位: 3.重复前面步骤依次抽取无序序列中首位元素进行比较,直到所有数值 ...
- Oracle 闪回区满解决的方法
闪回区满: OS: rm -rf [archivelog autobackup backupset controlfile flashback onlinelog] eg : archive ...
- SVN提交代码冲突解决方法总结
在近期svn提交代码时遇到多种情况的问题,现做一个解决办法的总结如下: 插播一条:idea下被svn版本控制各类文件的颜色区分,红棕色,未加入版本控制:绿色,已经加入控制暂未提交:蓝色,加入,已提交, ...
- Android中相机拍照
Android中调用系统相机的api接口在android.hardware包中.包里面类主要用到了Camera类.该类里面包含几个内部类:Camera.Parameters.Camera.Camera ...
- linux系统下用到的小知识点积累
preface:在ubuntu下做事情,在终端下执行一些命令.或者在vim里面做一些操作.自然而然须要用到一些小知识点,没有怎么系统地看<鸟哥的菜>,基本上是遇到了什么问题想要实现什么功能 ...
- GPS时间
GPS信息里面包含一个时间戳. phonegap(即cordova)的地理位置API Geolocation 提供了对设备GPS传感器的访问,返回的数据中,除了坐标,还有一个时间戳timestamp. ...
- linux替换目录下所有文件中的某字符串
linux替换目录下所有文件中的某字符串 比如,要将目录/modules下面所有文件中的zhangsan都修改成lisi,这样做: sed -i "s/zhangsan/lisi/g&quo ...
- ASP.NET Overview
https://msdn.microsoft.com/en-us/library/4w3ex9c2.aspx ASP.NET is a unified统一的 Web development model ...