首頁 > web前端 > css教學 > 主體

CSS中display實現淡入淡出過渡效果的實例

黄舟
發布: 2017-10-27 10:24:14
原創
7140 人瀏覽過

display實作淡入淡出過渡效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            position: relative;
        }
        input {/*按钮样式*/
            cursor: pointer;
            border: none;
            outline: none;
            background: #34BC9D;
            color: #fff;
            height: 40px;
        }
        img {
            position: absolute;
            transition: 1s;
            left: 0;
            top: 100%;
            opacity: 0;
            cursor: pointer;
            display: none;
        }
    </style>
</head>
<body>
    <p>
        <input id="root" type="button" onclick="show()" value="点击显示图片">
        <img id="img" src="http://www.qianduanzhan.com/zb_users/upload/2017/07/201707161500184837405094.png" alt="">
    </p>
<script>
    var root = document.getElementById("root");
    var img = document.getElementById("img");
    function show(){
        if(root.value === "点击显示图片"){
            root.value = "点击隐藏图片";
            /*设置setTimeout,让display先执行,opacity后执行*/
            img.style.display = "block";
            setTimeout(function () {
                img.style.opacity = 1;
            },.1);
        }else{
            root.value = "点击显示图片";
            img.style.opacity = 0;
            /*隐藏需要先执行opacity,再执行display,否则无效*/
            setTimeout(function () {
                img.style.display = "none";
            },900);
        }
    }
</script>
</body>
</html>
登入後複製

以上是CSS中display實現淡入淡出過渡效果的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!