Maison > Article > interface Web > Exemples d'implémentation d'affichage d'effets de transition de fondu entrant et sortant en CSS

Exemples d'implémentation d'affichage d'effets de transition de fondu entrant et sortant en CSS

黄舟original: 2017-10-27 10:24:147141parcourir

affichageréaliser un fondu entrant et sortanteffet de transition

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Un exemple d'utilisation de CSS pour implémenter une boule à mouvement circulaireArticle suivant：Un exemple d'utilisation de CSS pour implémenter une boule à mouvement circulaire

Articles Liés

Voir plus