我用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. vue之表单输入绑定

  2. haproxy监控页面添加及参数简介（转）

    环境: [root@localhost 13:55:31 haproxy]# cat /etc/redhat-release CentOS release 6.8 (Final) [root@loca ...

  3. php 安装最新的redis连接扩展

    用于与redis连接的Php扩展[RC表示公测,我们用的是不带RC的稳定版本]下载包地址:http://pecl.php.net/package/redis 最新稳定版本:4.3.0 下载包:# wg ...

  4. Java 中的日志

    参考:https://www.cnblogs.com/gavanwanggw/p/7305218.html 日志框架: 提供日志调用的接口,实际的日志输出托付给日志系统实现 JCL:比较流行的日志框架 ...

  5. Makefile 命令解析

    1.$(patsubst %.c,%.o, a.c b.c) 把字串“a.c b.c”符合模式[%.c]的单词替换成[%.o],返回结果是“a.o b.o” 2.$(VAR:A=B) 对于一个已经定义 ...

  6. java mail 接收邮件

    package com.mw.utils; import com.mw.bean.SmsAlarmLogBean; import javax.mail.*; import javax.mail.int ...

  7. 1. NES简介

    NES(Nintendo Entertainment System)简介 NES是北美地区对任天堂发行的第三代家用游戏机的简称. 1.CPU NES使用一颗理光[1]制造的8位2A03 NMOS处理器 ...

  8. Node.js前端程序通过Nginx部署后刷新出现404问题的解决办法

    方案一 (这种方式容易被第三方劫持) location / { root /data/nginx/html; index index.html index.htm; error_page 404 /i ...

  9. Json格式获取接口返回的值

    关键字:Set Variable       Get Json Value       to json        Get From Dictionary     具体关键字用法不再说明,可百度一下 ...

  10. 通过js获取外部css样式

    通过js获取外部样式表中的属性,比如.box在style.css样式表中有个属性叫font-size:16px; 通过js获取.box的这个属性: js代码为: <script> wind ...