我用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. 2018-2019-2 20175213实验一 《Java开发环境的熟悉》实验报告

    第一部分实验要求:1 建立“自己学号exp1”的目录2 在“自己学号exp1”目录下建立src,bin等目录3 javac,java的执行在“自己学号exp1”目录4 提交 Linux或Window或 ...

  2. Tensorflow的验证码识别

    最近在弄深度学习,从网上找了一些资料.这是基于Tensorflow的深度学习的验证码识别.https://cuijiahua.com/blog/2018/01/dl_5.html http://blo ...

  3. 【笔记】Python基础一 ：变量，控制结构，运算符及数据类型之数字，字符串，列表，元组，字典

    一,开发语言介绍 高级语言:Java,C#,Python  ==>产生字节码 低级语言:C,汇编                   ==>产生机器码 高级语言开发效率高,低级语言运行效率 ...

  4. netty(八) netty中自带channelhandler

    SslHandler:负责对请求进行加密和解密,是放在ChannelPipeline中的第一个ChannelHandler HttpClientCodec和HttpServerCodec:HttpCl ...

  5. python 获取list的下标

    print(your_list.index('your_item')) #your_list为列表名称 your_item为需要修该的数据

  6. AUDIOqueue 为什么会播放一段时间就听不到声音

    转自简书:非常有用 AudioQueue缓冲区为空时,那么AudioQueueOutputCallback回调不会再调用 这个其实很好理解,AudioQueue的回调本事就是数据播完了才回调的 Aud ...

  7. JVM性能优化读后笔记

    java性能优化权威指南读后笔记 三重境界 1.花似雾中看:对于遇到的额问题还看不清,不知道真真假假,是是非非. 2.悠然见南山:虽然刚开始对这个领域还不清楚,但随着时间推移,你对它有许多自己的见解, ...

  8. docker容器composer 部署 laravel框架

    首先yum install docker     安装docker service docker start   启动docker docker pull  docker.io/skiychan/ng ...

  9. Android Studio 的 build 过程

    如图, 编译器将源代码(包括 Application Module 及其所依赖的所有 Library 源代码)转换成 DEX(Dalvik Executable)文件(其中包括运行在 Android ...

  10. rest_framework的视图组件继承过哪些类？