学编程 ❀(๑╯◡╰๑)❀ 就上soxunxi.cn!这里有CMS,CSS,NET,PHP,Linux,HTML,JAVA,MySQL,Python等教程.
当前位置: CSS > CSS实现轮播图效果(附代码)_css教程,css,轮播图

CSS盒子模型是什么意思?_css教程

CSS盒子模型都具备内容content、内边距padding、边框border、外边距margin这些属性,这些属性可以用日常生活中的常见事物“盒子”作一个比喻来理解,所以称作为盒子模型。

CSS实现轮播图效果(附代码)

理论基础

CSS3 animation 属性和 @keyframes 规则

主体思想

1、准备相同大小的多个图片

2、将要展示图片横排放在一个图片容器里面

3、在图片容器外再加一个展示容器,展示容器大小为图片大小

4、给图片容器添加自定义动画,在动画不同阶段设置递增的偏移值

注意事项

  • 动画效果分为切换和停留两部分

  • 自定义动画阶段与图片数量相关

  • 动画各阶段偏移值与图片大小相关

    什么是BFC?有什么用?_css教程

    css快速入门:BFC即块格式化上下文,它是页面CSS视觉渲染的一部分,用于决定块盒子的布局及浮动相互影响的一个区域。作用:1、阻止外边距折叠;2、包含浮动的元素;3、阻止元素被浮动元素覆盖。

  • 本文中示例最后一个图片到第一个图片没有切换效果,一个思路是可以由最后一个图片再挨个切换到第一个图片

HTML

<p id="container">
    <p id="photo">
        <img src="1.png" />
        <img src="2.png" />
        <img src="3.png" />
    </p>
</p>

解析:
这里创建了三个 img 元素,img 元素外面是图片容器,图片容器外面是展示容器。

CSS

#container {
	width: 400px;
	height: 300px;
	overflow: hidden;
}

#photo {
	width: 1200px;
	animation: switch 5s ease-out infinite;
}

#photo > img {
	float: left;
	width: 400px;
	height: 300px;
}

@keyframes switch {
	0%, 25% {
		margin-left: 0;
	}
	35%, 60% {
		margin-left: -400px;
	}
	70%, 100% {
		margin-left: -800px;
	}
}

解析:

1、展示容器大小和图片大小一致

2、图片添加 float 效果,不用考虑麻烦的 margin 问题

3、由于示例只有三个图片,所以添加了三个动画阶段,每一阶段都是通过设置递增的 margin-left 值达到切换的效果

4、设置的动画阶段(如:35%~60%)是动画停留部分,和上一阶段空余时间(如25%~35%)即为动画切换部分,各部分时间长短需要自己把控

运行效果

感谢大家的阅读,希望大家收益多多。

本文转自:https://blog.csdn.net/u011848617/article/details/80468463

推荐教程:《CSS教程》

以上就是CSS实现轮播图效果(附代码)的详细内容,更多请关注ki4网其它相关文章!

CSS 布局之两端布局实现_css教程

这篇文章主要介绍了css 布局 之 两端布局 (利用父级负的margin)的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"CSS实现轮播图效果(附代码)_css教程,css,轮播图"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线