效果

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>

纯css DIV弹出动画相关推荐

纯CSS三级弹出菜单
以前收藏的代码,贴出来分享下.兼容IE\FF. CSS: <style type="text/css"> /**//*common styling*/.menu{}{f ...
html悬浮弹窗后面背景变深,JS+CSS实现Div弹出窗口同时背景变暗的方法
本文实例讲述了JS+CSS实现Div弹出窗口同时背景变暗的方法.分享给大家供大家参考.具体实现方法如下: 代码如下: JS+CSS实现的Div弹出窗口,同时背景变暗 function locki ...
css关闭窗口按钮的代码,JS+CSS实现带关闭按钮DIV弹出窗口的方法
这篇文章主要介绍了JS+CSS实现带关闭按钮DIV弹出窗口的方法,实例分析了div弹出层窗口的实现技巧,非常具有实用价值,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了JS+CSS实现带关 ...
php mysql js弹出登陆小窗口_基于Jquery+div+css实现弹出登录窗口(代码超简单)_jquery...
具体代码详情如下所示: 基本思路先隐藏(dispaly:none)再显示,半透明蒙版层通过 z-index:9998; z-index:9999; 值越大越在前面 index.html jquery点 ...
html 弹出层边框半透明,js+CSS实现弹出居中背景半透明div层的方法
本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法.分享给大家供大家参考.具体实现方法如下: js+CSS弹出居中的背景半透明div层 body{margin:0px;} #bg{widt ...
纯JavaScript实现弹出选择第几个单选按钮
为什么80%的码农都做不了架构师?>>> 纯JavaScript实现弹出选择第几个单选按钮 <div id="a" name="aa&quo ...
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操 ...
html鼠标可拖动窗体,javascript div 弹出可拖动窗口
javascript div 弹出可拖动窗口更新时间:2009年02月26日 21:50:37 作者: 创建弹出div窗口. /* * 创建弹出div窗口. 1.接口说明:DivWindow(i ...
【技能】使用纯CSS+html写出方向箭头，简单大方，好看
使用纯CSS+html写出方向箭头,贴出来就可以用,100%原创 <html><head><title></title><meta http-eq ...

纯css DIV弹出动画

效果

css核心代码

示例全部代码

纯css DIV弹出动画相关推荐

最新文章

热门文章