网站图片往往有很多显示效果，使用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图片特效的更多相关文章

  1. DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理

    推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...

  2. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  3. HTML5+CSS3鼠标悬停图片特效

    点击预览效果            下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...

  4. 8个超级震憾的Jquery图片特效欣赏，考验你的浏览器！

    这次主要是来分享几个个人觉得十分震憾的图片特效,有jQuery的,有CSS3的,有很萌的乌鸦动画,也有简单朴实的图片播放动画,当然有些你可能已经看到过了,不过也没关系,你能路过就算是对我的支持了. j ...

  5. 10个超漂亮的CSS 3D特效

    10个超漂亮的CSS 3D特效 一.总结 一句话总结: 后面有空得好好练一练,也可以作为录课素材 二.10个超漂亮的CSS 3D特效 转自或参考:10个超漂亮的CSS 3D特效https://blog ...

  6. 《基于JQuery和CSS的特效整理》系列分享专栏

    <基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201724.html 文章 一款基于jQue ...

  7. 几种垂直居中的方式及CSS图片替换技术

    由于块级元素的高度是可以设置的,所以对于块级元素的垂直居中比较简单. 方法一: 在不定高的情况下,把元素的上下内边距设为同一个值即可实现,即padding :10px   0; 以上方法针对块级元素和 ...

  8. css图片叠加和底部定位

    css图片叠加和底部定位 css图片叠加 两张图片需要叠在一起显示,如何定位 容器先对定位 第一张图片正常摆放 第二张图片绝对定位,top:0px 这样便实现了两张图片叠加在一起了,设置z-index ...

  9. Web 开发最有用的50款 jQuery 插件集锦——《图片特效篇》

    <Web 开发最有用的50款 jQuery 插件集锦>系列文章向大家分享最具创新的50款 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插 ...

随机推荐

  1. graylog 市场

    https://marketplace.graylog.org/addons/246dc332-7da7-4016-b2f9-b00f722a8e79

  2. CH上的Think Bear#1模拟赛

    题目:http://www.contesthunter.org/contest/CH%20Round%20%2352%20%20Thinking%20Bear%20%231%20(NOIP%E6%A8 ...

  3. Ubuntu 16.04修复PDF默认使用ImageMagick打开无法设置其它默认的问题（默认打开程序设置）

    打开:~/.config/mimeapps.list 去掉以下几项: image/pdf=display-im6.desktop image/pdf=display-im6.q16.desktop;d ...

  4. MAPZONE GIS SDK接入Openlayers3之三——瓦片数据集接入

    瓦片数据集接入实现思路: 1.构造ol.source.TileImage数据源,构造该数据源需要以下几项: 1)空间参考,通过如下代码构造 2)TileGrid,构造需要以下几项: a)原点 b)分辨 ...

  5. SpriteBuilder&amp;Cocos2D使用CCEffect特效实现天黑天亮过度效果

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 假设认为写的不好请多提意见,假设认为不错请多多支持点赞.谢谢! hopy ;) 在动作或RPG类游戏中我们有时须要天黑和天亮过度的效果来完毕场 ...

  6. Wincc操作数据库SQLSERVER

     WINCC写数据库 在WINCC的图形编辑器中,在输入域的属性中.选择事件.再选择键盘的释放动作,在动作代码框中写下例如以下代码: Dim conn,rs Dim strsql Dim a a=HM ...

  7. 【Cocos2dx游戏开发】CCTableView实现滑动列表

    在游戏中,经常需要用到列表展示,例如我现在做的卡牌游戏中就有卡牌列表和好友列表需要用到CCTableView,下面简单介绍一下使用方法. CCTableView位于扩展库文件cocos-ext.h中, ...

  8. FFmpeg滤镜使用指南

    文件夹 1. FFmpeg滤镜文档 2. 演示样例   2.1 缩放   2.2 视频加速   2.3 滤镜图,链和滤镜关系   2.4 多个输入覆盖同一个2x2 网格   2.5 转义字符   2. ...

  9. Codeforces Round #311 (Div. 2)A Ilya and Diplomas

    [比赛链接]click here~~ [题目大意] n个人,获取一到三等文凭,每门文凭有大小范围.求最后文凭各颁发多少 [解题思路]直接枚举了, 看完题,赶紧写了一发代码,发现竟然错过注冊时间.系统提 ...

  10. Bing Maps进阶系列三：使用地图图像服务（ImageryService）

    Bing Maps进阶系列三:使用地图图像服务(ImageryService) 地图图像服务(ImageryService)提供了根据地理位置(经度和纬度)坐标和地图的缩放级别解析出对应于地图图片系统 ...