html&css实验8.(4)CSS3实现

最新推荐文章于 2021-08-03 22:02:27 发布

清楼小刘

最新推荐文章于 2021-08-03 22:02:27 发布

阅读量725

点赞数

本文链接：https://blog.csdn.net/qq_33826977/article/details/70207608

版权

Web开发专栏收录该内容

18 篇文章 0 订阅

订阅专栏

(slides.html)采用CSS实现幻灯片：用一个相对定位的容器A包含并列摆放的图片，再用一个只显示一幅图的定宽容器B包裹容器A。采用动画方式不断改变容器A的水平位置就可以实现幻灯片。

完整代码如下：

<!doctype html>
<html>
<head>
    <title>slides</title>
    <style>
        #slideMain {
            margin: 0 auto;
            padding: 0;
			width:800px;
			overflow:hidden;
        }

        .slides {
            margin: 0;
            padding: 0;
			animation-name:action; /*动画的名称*/
			animation-duration:5s; /*规定动画完成一个周期所花费的秒或毫秒。默认是 0。*/
			animation-timing-function:linear;  /*规定动画的速度曲线。默认是 "ease"。*/
			animation-iteration-count:infinite;/* 规定动画被播放的次数。默认是 1。*/
        }

        .slide {
        }
        /* 
        CSS3 @keyframes 规则:
        	@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式 和动画将逐步从目前的样
                     式更改为新的样式。
                               当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
                                至少指定2个属性：规定动画的名称，规定动画的时长
        */
		@keyframes  action{
		    0%{ transform: translate(0px,0px);}
		    /* translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。*/
			100%{ transform: translate(-3100px,0px);}
			/* 
			请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 
			100%。0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，您应该
			始终定义 0% 和 100% 选择器。
			*/
			}
    </style>
</head>
<body>
    <div id="slideMain">
        <div class="slides">
            <img class="slide">
			<nobr> <!-- 禁止换行 -->
			<img src="images/img11.jpg">
			<img src="images/img12.jpg">
			<img src="images/img13.jpg">
			<img src="images/img14.jpg">
			</nobr>
        </div>
    </div>
</body>
</html>

4张图，每张的宽都是930px，所以如果左移的像素数量小于3 * 930 = 2790的话，最后一张图没有完整展现就会结束一个周期。还需要考虑每张图之间空白的宽度，可以自己去试试。overflow:hidden，就将不在800px内的图像都隐藏了。

清楼小刘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html&css实验8.(4)CSS3实现

(slides.html)采用CSS实现幻灯片：用一个相对定位的容器A包含并列摆放的图片，再用一个只显示一幅图的定宽容器B包裹容器A。采用动画方式不断改变容器A的水平位置就可以实现幻灯片。完整代码如下： slides #slideMain { margin: 0 auto; padding: 0;
复制链接

扫一扫