我用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. Neural Network Virtual Machine

    深度学习Stack 为什么提出NNVM? 深度学习框架现状 - “碎片化” 目前,深度学习应用框架呈现出高度的“碎片化(fragmentation)”倾向,这主要是由于下述两个原因: 1. 深度学习正 ...

  2. CodeWarrior 10 自定义关键字模版

    ==============================================版本信息开始============================================ 相关作 ...

  3. Django继承AbstractUser新建UserInfor Model时出现fields.E304错误

    错误详情: SystemCheckError: System check identified some issues: ERRORS:app01.UserInfo.groups: (fields.E ...

  4. 走进MyBatis的世界

    1.MyBatis可框架及ORM 1.Mybatis框架简介 MyBatis是一个开源的数据持久层框架.它内部封装了通过了JDBC访问数据库的操作,支持普通的SQL查询,存储过程和高级映射,几乎消除了 ...

  5. cacti 流量图合并

    cacti 安装:https://www.cnblogs.com/weijie0717/p/4072711.html 一.需求介绍 由于交换机的多端口跑同一种流量,需要汇总统计.因此需要见多个端口的流 ...

  6. 转-CVE-2016-10190浅析-FFmpeg堆溢出漏洞

    本文转载自CVE-2016-10190 FFmpeg Heap Overflow 漏洞分析及利用 前言 FFmpeg是一个著名的处理音视频的开源项目,使用者众多.2016年末paulcher发现FFm ...

  7. python的os模块fnmatch模块介绍

    一.先介绍一下os模块 import os print(os.getcwd()) # E:\python\test\python_models # 获取当前的目录 print(os.listdir(& ...

  8. Smartforms

    Include text Populate indicator in program perform get_text using '0002' ls_detail-vbeln"Header ...

  9. 【转】重写Equals为什么要同时重写GetHashCode

    .NET程序员都知道,如果我们重写一个类的Equals方法而没有重写GetHashCode,则VS会提示警告 :“***”重写 Object.Equals(object o)但不重写 Object.G ...

  10. PHP整理--PHP语法

    PHP是一门动态交互的计算机语言,动态交互都需要服务器; 我们所了解过的静态交互都有:html,css,js: 1.我们学习PHP需要服务器,当我们没有服务器的条件时,PHPstudy给我们提供了一个 ...