CSS3原生实现淡入淡出效果_css3 visible 淡入淡出-程序员宅基地

技术标签: CSS  HTML  

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>淡入淡出效果</title>
<style type="text/css">
    #targetDiv
    {
        width: 150px;
        height:200px;
        text-align:center;
        padding-top:80px;
        background: #8a8a8a;
        color: #fff;
        
        position:absolute;
        opacity: 0;
        top:50px;
        left:-100px;
        -webkit-transition: all .5s ease-in;
        -moz-transition: all .5s ease-in;
        transition: all .5s ease-in;
    }
    #targetDiv.move
    {
        left: 10px;
        opacity: 1;
    }
  
    .btnout,.btnin
    {
        padding:10px 20px;
        background: #ff5a37;
        color: #fff;
        text-decoration: none;
    }
</style>
</head>
<body>
    <a href="javascript:;" class="btnout">滑出</a>
    <a href="javascript:;" class="btnin">滑入</a>

    <div id="targetDiv">
        淡入淡出面板
    </div>

<script>
    (function(){
        document.querySelector('body').addEventListener('click',function(e){
            if(e.target.className === 'btnin')
            {
                document.querySelector('#targetDiv').className = 'move';
            }
            else
            {
                document.querySelector('#targetDiv').className = '';
            }
        },false);
    })();
</script>
</body>
</html>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/liguo9860/article/details/56676927

智能推荐

Spark任务调度,Job的调度_spark 调度job执行-程序员宅基地

文章浏览阅读547次。Job,Stage,Task的区分DAG调度DAG:有向无环图每个job划分为多个stage(阶段)(a)倒推法划分 -栈从Job的最后一个RDD向前推依赖关系(b)判定子RDD和父RDD之间的依赖关系宽依赖,产生shuffle,划分stageTaskScheduler 任务调度task的调度调度各个Stage中Task的执行,按照从前往后顺序执行stage中的task即..._spark 调度job执行

jp@gc - PerfMon Metrics Collector:服务器性能监测控件-程序员宅基地

文章浏览阅读8.8k次,点赞4次,收藏39次。1.Jmeter插件下载安装安装下面三个插件 ,就可以像Loadrunner一样监控服务器CPU、内存等性能参数下载客户端插件JMeterPlugins-Standard和JMeterPlugins-Extras地址:https://jmeter-plugins.org/downloads/old/下载服务端插件:ServerAgent地址:https://github.com/undera/perfmon-agent/blob/master/README.md#supporte..._jp@gc - perfmon metrics collector

Javascript学习之null与undefined的使用_定义初始数据什么时候用null什么用undefined-程序员宅基地

文章浏览阅读394次。我们学习javascript的时候,首先需要学习的就是数据类型,只要说到Number 、 String 、 Boolean 和 Object 等数据类型,就会涉及到null 和 undefined。初学者对于null 和 undefined可能会有点混乱,本文就整了了一些null 和 undefined的使用与异同点,一起来看看吧。null  null 值表示一个指向不存在或无效的 对象 或地址(..._定义初始数据什么时候用null什么用undefined

12c双机rac oracle_Oracle 12C RAC集群原理与管理实战-程序员宅基地

文章浏览阅读417次。Oracle集群(也叫OracleRAC)推出已经很多年了,其技术本来比较复杂,再加上12C中的新概念,难上加难!我们正是想给你首先介绍12CRAC的基本概念,接着做几个完整的实验,通过实验,加深你对12C概念的理解。12CRAC涉及很多技术(主机、网络设备、存储、操作系统、clusterware、Oracledatabase软件),通过本课的学习,你将彻底的明白12CRAC的原理,并能够..._oracle rac双机培训

Python之网络编程-程序员宅基地

文章浏览阅读93次。一、服务端和客户端BS架构 (腾讯通软件:server+client)CS架构 (web网站)C/S架构与socket的关系:我们socket就是为了完成C/S架构的开发二、OSI七层模型互联网协议按照功能不同分为osi七层或tcp/ip五层或tcp/ip四层每层运行常见物理设备socket入手互联网协议:1.首先:目标就是教会你如何基于sock..._server.recvfrom接收的默认格式

macos可以升级到指定版本吗_错过Mac OS升级,找不到旧OS版本怎么办?-程序员宅基地

文章浏览阅读2.9k次。如果Mac错过了OS升级,或还原后版本太低,无法更新或升级到后续版本。在App Store是只能搜索到最新版本的(是无法搜索到除最新版的其它版本OS),版本太旧是无法通过App Store进行更新的,不更新就用不了最新的App,SO,你正在找的2个旧版本OS链接已为你准备好,请惠存。App Store link(10.12: "Sierra" (June 13, 2016)):Get macOS ..._macoslion12.7升级到

随便推点

android开机解锁设备,Android – 唤醒和解锁设备-程序员宅基地

文章浏览阅读289次。应用描述:该应用程序旨在作为特定客户端的安全程序(不公开部署)。当应用程序在一段时间内没有检测到移动时,应用程序应该发出警报,并且如果它在后台或设备处于睡眠状态,则将自己带到前台。问题:在设备睡眠和锁定的情况下,我们需要唤醒并解锁设备。使用这里发现的各种技术在SO和其他地方,我们已经能够(部分)唤醒和解锁设备,但只有当设备物理插入到计算机时,这只是正常。如果设备本身被拔出,并且我们测试唤醒解锁,没..._android注册唤醒输入设备

小风黑客工具包 2016完整版【申明:来源于网络】-程序员宅基地

文章浏览阅读339次。小风黑客工具包 2016完整版【申明:来源于网络】地址:http://www.ddooo.com/softdown/76687.htm 转载于:https://www.cnblogs.com/yearHeaven/p/6741381.html...

Python Web框架-程序员宅基地

文章浏览阅读53次。本节对Python Web框架学习一、MTVModel: 存放所有数据库相关文件Template:模板文件,存放html文件View: 业务处理,即函数文件二、MVCmodel: 存放数据库相关文件view: 存放所有的html文件controler: 存放所有的函数文件三、DjangoDjango基于MTV模式的web框架1、下载安装https://www.djangopro..._os.system("python manage.py runserver 127.0.0.1:8000")

c语言程序设计基础实验目的,《程序设计基础》实验1(C语言的编程环境)-程序员宅基地

文章浏览阅读693次。C语言的编程环境[实验目的]1、了解Turbo C 的基本操作方法,学会独立使用该系统。2、掌握在该系统上如何编辑、编译、运行一个C程序。3、通过运行C程序,初步了解C程序的特点。[实验内容]1、使用TC2、调试运行简单的C程序[实验步骤]1、启动TurboC进入Turbo C集成环境后,首先在屏幕上显示Turbo C主菜单窗口,在该窗口,有8个菜单条目。每一个菜单的意义如下:File处理文件(包..._程序设计训练的实验目的

在Word中创建CommandBar并显示winform窗体-程序员宅基地

文章浏览阅读1.1k次。前段时间有一个需求需要在一个Word文档中选定文字后在右键菜单中添加一个按钮点击后弹出一个WinForm窗体,由于在实际做的过程中遇到了两个问题因此记录下来,主要就是CommandBar按钮事件只触发一次的问题以及如何是Winform窗体弹出的时候在Word之上。

嵌入式学习总结之STM32(二)stm32GPIO口的使用_stm32gpio口的应用-程序员宅基地

文章浏览阅读2.9k次。学习网址:https://www.bilibili.com/video/BV1m7411H7oT学习内容由于上一次总结仿真软件的时候已经操作过GPIO口了,所以这次就不再重新操作,这次总结的是GPIO口的功能。GPIO口内部构造,上方是输入,下方是输出下图是GPIO端口配置输出模式的几个功能第一个是输出电压,有两个选择一个是低一个是高,如果设置为低电压,那么当IO口输出时就会输出低电压,不输出时就会默认高电压。设置为高电压则相反。第二个是推挽输出和开漏输出1.开漏输出就是不输出电_stm32gpio口的应用