纯css DIV弹出动画

最新推荐文章于 2024-06-12 11:13:48 发布

K歌、之王

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量2.5k

点赞数 3

分类专栏： css 文章标签：前端 css css3

本文链接：https://blog.csdn.net/u010568976/article/details/121670276

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果

在这里插入图片描述

css核心代码

animation-slide-left 从左边弹出
animation-slide-right 从右边弹出
animation-scale-up 从上边弹出
animation-scale-down 从下边弹出
animation-shake 蛇形弹出
animation-reverse 翻转弹出

/* Animation css */
[class*=animation-] {
    animation-duration: .5s;
    animation-timing-function: ease-out;
    animation-fill-mode: both
}

.animation-fade {
    animation-name: fade;
    animation-duration: .8s;
    animation-timing-function: linear
}

.animation-scale-up {
    animation-name: scale-up
}

.animation-scale-down {
    animation-name: scale-down
}

.animation-slide-top {
    animation-name: slide-top
}

.animation-slide-bottom {
    animation-name: slide-bottom
}

.animation-slide-left {
    animation-name: slide-left
}

.animation-slide-right {
    animation-name: slide-right
}

.animation-shake {
    animation-name: shake
}

.animation-reverse {
    animation-direction: reverse
}

@keyframes fade {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes scale-up {
    0% {
        opacity: 0;
        transform: scale(.2)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes scale-down {
    0% {
        opacity: 0;
        transform: scale(1.8)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes slide-top {
    0% {
        opacity: 0;
        transform: translateY(-100%)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slide-bottom {
    0% {
        opacity: 0;
        transform: translateY(100%)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0)
    }

    10% {
        transform: translateX(-9px)
    }

    20% {
        transform: translateX(8px)
    }

    30% {
        transform: translateX(-7px)
    }

    40% {
        transform: translateX(6px)
    }

    50% {
        transform: translateX(-5px)
    }

    60% {
        transform: translateX(4px)
    }

    70% {
        transform: translateX(-3px)
    }

    80% {
        transform: translateX(2px)
    }

    90% {
        transform: translateX(-1px)
    }
}

@keyframes slide-left {
    0% {
        opacity: 0;
        transform: translateX(-100%)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes slide-right {
    0% {
        opacity: 0;
        transform: translateX(100%)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

示例全部代码

<html>

<head>
    <style type="text/css">
        /* Animation css */
        [class*=animation-] {
            animation-duration: .5s;
            animation-timing-function: ease-out;
            animation-fill-mode: both
        }

        .animation-fade {
            animation-name: fade;
            animation-duration: .8s;
            animation-timing-function: linear
        }

        .animation-scale-up {
            animation-name: scale-up
        }

        .animation-scale-down {
            animation-name: scale-down
        }

        .animation-slide-top {
            animation-name: slide-top
        }

        .animation-slide-bottom {
            animation-name: slide-bottom
        }

        .animation-slide-left {
            animation-name: slide-left
        }

        .animation-slide-right {
            animation-name: slide-right
        }

        .animation-shake {
            animation-name: shake
        }

        .animation-reverse {
            animation-direction: reverse
        }

        @keyframes fade {
            0% {
                opacity: 0
            }

            100% {
                opacity: 1
            }
        }

        @keyframes scale-up {
            0% {
                opacity: 0;
                transform: scale(.2)
            }

            100% {
                opacity: 1;
                transform: scale(1)
            }
        }

        @keyframes scale-down {
            0% {
                opacity: 0;
                transform: scale(1.8)
            }

            100% {
                opacity: 1;
                transform: scale(1)
            }
        }

        @keyframes slide-top {
            0% {
                opacity: 0;
                transform: translateY(-100%)
            }

            100% {
                opacity: 1;
                transform: translateY(0)
            }
        }

        @keyframes slide-bottom {
            0% {
                opacity: 0;
                transform: translateY(100%)
            }

            100% {
                opacity: 1;
                transform: translateY(0)
            }
        }

        @keyframes shake {

            0%,
            100% {
                transform: translateX(0)
            }

            10% {
                transform: translateX(-9px)
            }

            20% {
                transform: translateX(8px)
            }

            30% {
                transform: translateX(-7px)
            }

            40% {
                transform: translateX(6px)
            }

            50% {
                transform: translateX(-5px)
            }

            60% {
                transform: translateX(4px)
            }

            70% {
                transform: translateX(-3px)
            }

            80% {
                transform: translateX(2px)
            }

            90% {
                transform: translateX(-1px)
            }
        }

        @keyframes slide-left {
            0% {
                opacity: 0;
                transform: translateX(-100%)
            }

            100% {
                opacity: 1;
                transform: translateX(0)
            }
        }

        @keyframes slide-right {
            0% {
                opacity: 0;
                transform: translateX(100%)
            }

            100% {
                opacity: 1;
                transform: translateX(0)
            }
        }
    </style>
    <style>
        body,
        html {
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        .main {
            height: 100%;
            position: relative;
        }

        .main h3 {
            text-align: center;
            
        }

        .main h3:hover{
            cursor: pointer;
            color: green;
        }
 
        .main .b1:hover ~ .v1 {
            display: block !important;
        }

        .main .b2:hover ~ .v2 {
            display: block !important;
        }

        .main .b3:hover ~ .v3 {
            display: block !important;
        }

        .main .b4:hover ~ .v4 {
            display: block !important;
        }


        .main .v1 {
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            right: 70%;
            bottom: 0;
            background-color: greenyellow;
        }

        .main .v2 {
            display: none;
            position: absolute;
            left: 70%;
            top: 0;
            right: 0;
            bottom: 0;
            background-color:hotpink;
        }

        .main .v3 {
            display: none;
            position: absolute;
            bottom: 70%;
            top: 0;
            right: 0;
            left: 0;
            background-color:indianred;
        }

        .main .v4 {
            display: none;
            position: absolute;
            top: 70%;
            bottom: 0;
            right: 0;
            left: 0;
            background-color:khaki;
        }
    </style>
</head>

<body>
    <div class="main">
        <h3 class="b1" style="padding-top: 400px;">
            左边
        </h3>
        
        <h3 class="b2">
            右边
        </h3>
        <h3 class="b3">
            上边
        </h3>
        <h3 class="b4">
            下边
        </h3>
        

        <div class="v1 animation-slide-left">

        </div>

        <div class="v2 animation-slide-right">

        </div>

        <div class="v3 animation-slide-top">

        </div>

        <div class="v4 animation-slide-bottom">

        </div>
    </div>
</body>

</html>

K歌、之王

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
纯css DIV弹出动画

/*Animation 微动画基于ColorUI组建库的动画模块 by 文晓港 2019年3月26日19:52:28*//* css 滤镜控制黑白底色gif的 */.gif-black{mix-blend-mode: screen;}.gif-white{mix-blend-mode: multiply;}/* Animation css /[class=animation-] {animation-duration: .5s;animation-timing-function
复制链接

扫一扫