我们依据上一篇文章的html代码结构,来实现一般焦点图片跳转时候的效果.
<div class="outer_box"> <div class="inner_box"></div> </div>
.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 ,欢迎大家传播与分享.
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
619
收藏
