Maison > interface Web > tutoriel HTML > le corps du texte

CSS动画: (向下滑)slide down效果_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-21 08:57:44
original
3057 Les gens l'ont consulté

我们依据上一篇文章的HTML代码结构,来实现一般焦点图片跳转时候的效果.

HTML

 <div class="outer_box">    <div class="inner_box"></div> </div>
Copier après la connexion

CSS

.outer_box {

width: 100px;

height: 100px;

border: #bbb 5px solid;

margin: 200px auto;

}

.inner_box {

background-color: #44b549;

width: 100%;

height: 100%;

position: relative;

animation: slide_down 2s linear infinite;

transform-origin: 200% 100%;

}

焦点图片的跳转,可以有很多效果的实现,比如渐渐消失,3D效果转换,渐渐缩小,或者向下滑落消失.

我们就来看向下滑落的效果.这个效果主要还是利用定位Position,然后根据需要来控制top,left,或者bottom,right这四个方位的值.

向下滑动的效果,主要是依靠top这个属性值,top从0到整个box的高度.这个时候最简单的slidedown效果就出来了.

代码名称

@keyframes slide_down {

from {

top: 0;

}

to {

top: 100%;

}

}

CSS代码是不是很简单.下面 最终效果:

其他的效果,比如向右滑动,向左滑动或者向上滑动等等,可以在现有的代码上,做加工.

本文属于吴统威的博客, 微信公众号:bianchengderen,QQ群:186659233 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=200 ,欢迎大家传播与分享.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal