CSS3原生实现淡入淡出效果

最新推荐文章于 2024-07-17 10:41:16 发布

金州饿霸

最新推荐文章于 2024-07-17 10:41:16 发布

阅读量9.5k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/wangjian530/article/details/80572522

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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>

金州饿霸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3原生实现淡入淡出效果

&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,
复制链接

扫一扫