我用2种方法写了底图与蒙版的过渡效果

方法一：用js方法

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>transition</title>

    </head>

    <body>

        <div class="part" id="part" style="width: 30%;margin: 0 auto;position: relative;">

    <!--此处为底图-->

    <img src="http://sandbox.runjs.cn/uploads/rs/322/57sddaje/ayqgy4nj.png" style="width: 100%">

    <!--此处为蒙版部分-->

            <div class="maskPart" id="maskPart" style="width: 100%;position: absolute;left: 0;bottom: 0;display:none;">

        <!--蒙版图片-->

        <img src="http://sandbox.runjs.cn/uploads/rs/322/57sddaje/j5fe3wv3.png" style="width: 100%;">

        <!--蒙版文字-->

        <div style="position: absolute;bottom: 0;left: 0;width: 95%;text-align: center;margin: 0 auto;color: #FFFFFF;padding-bottom: 1em;">

            <p style="margin: 0;padding: 0;">此处为标题部分</p>

            <p style="margin: 0;padding: 0;">此处为副标题部分</p>

        </div>

    </div>

</div>

        <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

    </body>

</html>
        $("#part").hover(function () {

            $("#maskPart").fadeIn('solw')

        },function () {

            $("#maskPart").fadeOut('slow')

        });

效果图：http://runjs.cn/detail/cqzb6bir

方法二：用css方法

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>transition</title>

    </head>

    <body>

        <div class="part" id="part" style="width: 30%;margin: 0 auto;position: relative;">

    <!--此处为底图-->

    <img src="http://sandbox.runjs.cn/uploads/rs/322/57sddaje/ayqgy4nj.png" style="width: 100%">

    <!--此处为蒙版部分-->

    <div class="maskPart" id="maskPart" style="width: 100%;position: absolute;left: 0;bottom: 0;opacity: 0;">

        <!--蒙版图片-->

        <img src="http://sandbox.runjs.cn/uploads/rs/322/57sddaje/j5fe3wv3.png" style="width: 100%;">

        <!--蒙版文字-->

        <div style="position: absolute;bottom: 0;left: 0;width: 95%;text-align: center;margin: 0 auto;color: #FFFFFF;padding-bottom: 1em;">

            <p style="margin: 0;padding: 0;">此处为标题部分</p>

            <p style="margin: 0;padding: 0;">此处为副标题部分</p>

        </div>

    </div>

</div>

        <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

    </body>

</html>
        $("#part").hover(function () {

            console.log("opacity=0");

            $("#maskPart").css({

                "transition": "opacity 1s",

                "-webkit-transition": "opacity 1s",

                "-moz-transition": "opacity 1s",

                "-o-transition": "opacity 1s",

                "-ms-transition": "opacity 1s",

                "opacity": "1"

            });

        },function () {

            console.log("opacity=1");

            $("#maskPart").css({

                "opacity": "0"

            });

        });

效果图：http://runjs.cn/detail/yvc7rajt

--------------------------------

我尝试用transition方法写display方法，好像是行不通。于是用opacity方法代替

用js方法：当鼠标 悬浮与离开 的操作来回重复多次切速度很快，js方法会多次调用，有点繁琐

用css方法：当鼠标执行相同的操作，css只会调用最后一次的操作，比较简洁

底图与蒙版的过渡效果transition的更多相关文章

  1. CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)

    刚开始W3C CSS Workgroup拒绝将CSS3 transition与animation加入官方标准,一些成员认为过渡效果和动画并非样式属性,而且已经可以用脚本实现.所以请大家明白,特别是We ...

  2. CSS3的过渡效果(transition)与动画(animation)

    1.Transition Transition是一种直观上的效果,让DOM元素的某个属性在固定时间内从一旧值到一新值.目前Firefox.Opera.Safari和Chrome都支持transitio ...

  3. CSS过渡效果transition和动画

    一.过渡效果 可以在不适用Flash和js 的情况下实现过渡效果 属性 描述 transition 简写属性,用于在一个属性中设置四个过渡属性 transition-property 规定应用过渡的c ...

  4. Bootstrap 过渡效果 transition.js源码分析

    前言: 阅读建议:去github下载一个完整dom然后把,本篇代码复制进去然后运行就好了以地址 Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,那么判 ...

  5. css动画效果之transition（动画过渡效果属性）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. css3 transition animation nick

    时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...

  7. CSS中2d转换：transition过渡放在:hover伪类中与应用在整个元素中区别

    css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...

  8. CSS3动画--过渡效果

    CSS3动画--过渡效果 transition                               设置四个过渡属性 transition-property          过渡的名称 tr ...

  9. css过渡效果和盒子缩放大小的结合

    给盒子一个鼠标经过时放大里面的图片效果在css中使用过渡效果transition结合 <html lang="en"> <head> <meta ch ...

随机推荐

  1. 《DOM Scripting》学习笔记-——第九章 CSS-DOM

    本章内容: 一.style属性 二.如何检索样式信息 三.如何改变样式 属性: 包含位置信息:parentNode , nextSibling , previousSibling , childNod ...

  2. 知识点---前端处理支持emoji表情

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. ssh登录locale报错：cannot change locale (zh_CN.UTF-8): No such file or directory

    一.登录ssh报错: Last :: from 172.28.146.109 -bash: warning: setlocale: LC_ALL: cannot change locale (en_C ...

  4. TOMCAT程序的层级目录

    web | |---------js,jsp,html,css(资源文件在web根目录下面 可以被浏览器直接访问) |---------WEB-INF(配置文件web.xml   lib---jar ...

  5. springboot项目js文件404

    如果检查路径没有问题,其他的js都可以引入,只有新改动的js报404的话,可以尝试重启IDE,并清除缓存.

  6. mysql学习笔记--遇到的坑

    一.navcat 连接不支持密码输入 1. 先通过命令行进去mysql的root账户 mysql -uroot -p'password' 2. 更改加密方式 alter user 'root'@'lo ...

  7. Hillstone目的地址转换DNAT配置

    目的地址映射主要用于将内网的服务器对外进行发布(如http服务,ftp服务,数据库服务等),使外网用户能够通过外网地址访问需要发布的服务. 常用的DNAT映射有一对一IP映射,一对一端口映射,多对多端 ...

  8. net core中动态给log4net添加日志类型

    private static object m_Lock = new object(); /// <summary> /// 根据类型获取对应的日志操作类 /// </summary ...

  9. Zookeeper使用--命令行

    一.前言 在学习了Zookeeper相关的理论知识后,下面接着学习对Zookeeper的相关操作. 二.Zookeeper部署 Zookeeper的部署相对来说还是比较简单. Zookeeper有三种 ...

  10. Python并发解决方案

    一.subprocess模块 call():执行命令,返回程序返回码(int) import subprocess print(subprocess.call("mspaint") ...