我用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. jQuery之animate中的queue

    queue.dequeue clearQueue  清空 用队列完成之前动画的操作:

  2. vue 自定义组件使用v-model（组件通信方式1）

    父组件通过v-model传递值给子组件时,会自动传递一个value的prop属性,在子组件中通过this.$emit(‘input’,val)自动修改父组件v-model绑定的值 child: < ...

  3. Swagger2 header 添加token

    @Bean public Docket apiDocument() { return new Docket(DocumentationType.SWAGGER_2) .groupName(" ...

  4. php用PDO查询mysql数据库结果中文乱码

    中文都变成问号了 解决方法:在实例化pdo对象时语句中加上charset=utf8 $db = new PDO('dblib:host=your_hostname;dbname=your_db;cha ...

  5. 爬虫学习--MOOC爬取豆瓣top250

    scrapy框架 scrapy是一套基于Twisted的异步处理框架,是纯python实现的爬虫框架,用户只需要定制开发几个模块就可以轻松实现一个爬虫,用来抓取网页内容或者各种图片. scrapy E ...

  6. Laravel 学习笔记

    1. 简介 2. 运行环境要求 2.1 PHP版本 >= 5.5.9 2.2 Mcrypt PHP 扩展 --------------------------php的加密扩展,提供多种加密算法 ...

  7. Opencv-Python学习笔记（一）

    学习和研究计算机视觉,必然绕不开OpenCV. 于是我下载了它的C++源码,用cmake编译遇到一些错误. 然后结合网上一些帖子看源码看了好几天,发现有点不知从何处入手. 于是准备从其python版本 ...

  8. CodeForces 900D Unusual Sequences

    题目链接: https://codeforces.com/contest/900/problem/D 题意 假设有distinct 正整数序列{a1,a2,,,an},满足gcd(a1, a2, .. ...

  9. Loadrunner 11.00录制App脚本篇（Win10）

    参考博文1:https://www.cnblogs.com/mxqh2016/p/6016866.html 参考博文2:https://blog.csdn.net/myohmy2008/article ...

  10. 安装使用aria2下载百度网盘内容（转）

    原文地址:https://blog.csdn.net/wudi1107/article/details/80728891 安装使用aria2下载百度网盘内容 目前在Linux中没有好用的百度网盘客户端 ...