搜索
您的当前位置:首页正文

CSS3的animation实现简易幻灯片轮播特效

2023-11-28 来源:学路情感网
这篇文章主要为大家详细介绍了CSS3 animation实现简易幻灯片轮播特效,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

CSS3有个别特性,可以触发硬件GPU来加速渲染,而不是调用默认浏览器引擎渲染;

但是很多属性,默认都是不开启硬件加速的;需要触发条件,一个最简单的触发条件就是使用3D属性(对Z轴的操作)

效果图

代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3幻灯片</title> <style type="text/css" media="screen"> .items { width: 280px; height: 150px; border: 1px solid #ddd; box-sizing: border-box; border-radius:10px; background-size: cover; -webkit-transform: translateZ(0); transform: translateZ(0); background-repeat: no-repeat; -webkit-animation: slider 15s linear infinite alternate; animation: slider 15s linear infinite alternate; -webkit-transform-origin: center center; transform-origin: center center; } @-webkit-keyframes slider { 0% { background-image: url(1.jpg) ; } 25% { background-image: url(2.jpg) ; } 50% { background-image: url(3.jpg) ; } 75% { background-image: url(4.jpg); } 100% { background-image: url(5.jpg); } } @keyframes slider { 0% { background-image: url(1.jpg) ; } 25% { background-image: url(2.jpg) ; } 50% { background-image: url(3.jpg) ; } 75% { background-image: url(4.jpg); } 100% { background-image: url(5.jpg); } } </style></head><body> <p class="slider"> <p class="items"></p> </p></body></html>

小编还为您整理了以下内容,可能对您也有帮助:

如何使用css3实现图片的自动轮播特效(附完整代码)

本文在介绍如何使用css3实现图片的轮播特效的基础上,重点探讨了其具体步骤,本文内容紧凑,希望大家可以有所收获。

大家在浏览网页的过程中,会遇见一种名叫图片轮播的特殊效果:在同样的位置不同的图片会根据时间的变化循环播放,达到一种类似于播放幻灯片的效果。那么我们在网页开发的过程中如何实现图片的轮播特效呢?本文将向大家展示一下如何使用css3实现图片的轮播特效。

使用css3实现轮播特效的主体思想

我们会在同样的位置准备好多个大小相同的图片,并且横放在div容器内,然后在div容器之上设置一个展示容器,其中展示容器的大小和图片大小相同,最后给图片容器添加自定义动画,并且在动画不同阶段设置递增的偏移值。

注意

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

动画的偏移值和图片大小相关。

使用css3实现轮播特效的原理

首先必须保证展示容器大小与图片大小相同,再为图片添加float效果,然后确定插入的图片数量并且为每个图片设置动画阶段,其中每个阶段都是通过使用keyframes设置递增的margin-left值达到切换的效果。

使用css3实现图片轮播特效的步骤(代码)

步骤一:使用HTML添加图片

<div id="container">

<div id="photo">

<img src="1.png" />

<img src="2.png" />

<img src="3.png" />

</div>

</div>步骤二:使用css3设置动画阶段

#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;

}

}实现图片轮播的效果图

更多炫酷CSS3、javascript特效代码,尽在:js特效大全

使用html和css实现轮播图的两种方法

animation-name: 规定需要绑定到选择器的 keyframe 名称。
animation-ration: 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function: 规定动画的速度曲线。
animation-delay: 规定在动画开始之前的延迟。
animation-iteration-count: 规定动画应该播放的次数。
animation-direction: 规定是否应该轮流反向播放动画。

@keyframes{

}

给每个动画及暂停分配时间,按照总时间的百分比分配;

以三张图片为例制作轮播图,若将最后的数值设置为100%,出现问题在于最后一张到第一张的切换没有动画;尝试给最后一张图片到第一张图片的动画时间,但是中间的切换效果是从最后一张向右滑动直到显示出第一张图,其效果*,不美观;但是,通过尝试在最后的一张图片后面在添加一张与第一张相同的图片,可实现循环的效果;

方法与一中大致相同,唯一更改的地方是css3的@keyframes规则里面的内容

若只将要显示的三张图片导入,会出现最后一张图片到第一张图片没有动画效果;通过尝试在最后的一张图片后面在添加一张与第一张相同的图片,可实现循环的效果;

问题在于图片一直处于切换状态,中间没有停顿;

使用html和css实现轮播图的两种方法

animation-name: 规定需要绑定到选择器的 keyframe 名称。
animation-ration: 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function: 规定动画的速度曲线。
animation-delay: 规定在动画开始之前的延迟。
animation-iteration-count: 规定动画应该播放的次数。
animation-direction: 规定是否应该轮流反向播放动画。

@keyframes{

}

给每个动画及暂停分配时间,按照总时间的百分比分配;

以三张图片为例制作轮播图,若将最后的数值设置为100%,出现问题在于最后一张到第一张的切换没有动画;尝试给最后一张图片到第一张图片的动画时间,但是中间的切换效果是从最后一张向右滑动直到显示出第一张图,其效果*,不美观;但是,通过尝试在最后的一张图片后面在添加一张与第一张相同的图片,可实现循环的效果;

方法与一中大致相同,唯一更改的地方是css3的@keyframes规则里面的内容

若只将要显示的三张图片导入,会出现最后一张图片到第一张图片没有动画效果;通过尝试在最后的一张图片后面在添加一张与第一张相同的图片,可实现循环的效果;

问题在于图片一直处于切换状态,中间没有停顿;

css3 实现动画效果,怎样使他无限循环动下去

animation:mymove 5s infinite;

在animation后面加上infinite就可以无限循环,另外还可以做反向循环使用animation-direction

animation-name规定需要绑定到选择器的 keyframe 名称。

animation-ration规定完成动画所花费的时间,以秒或毫秒计。

animation-timing-function规定动画的速度曲线。

animation-delay规定在动画开始之前的延迟。

animation-iteration-count规定动画应该播放的次数。

animation-direction规定是否应该轮流反向播放动画。

看下下面的代码

<!DOCTYPE html>

<html>

<head>

<style> 

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:myfirst 5s infinite;

animation-direction:alternate;

/* Safari and Chrome */

-webkit-animation:myfirst 5s infinite;

-webkit-animation-direction:alternate;

}

@keyframes myfirst

{

0%   {background:red; left:0px; top:0px;}

25%  {background:yellow; left:200px; top:0px;}

50%  {background:blue; left:200px; top:200px;}

75%  {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

0%   {background:red; left:0px; top:0px;}

25%  {background:yellow; left:200px; top:0px;}

50%  {background:blue; left:200px; top:200px;}

75%  {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

</style>

</head>

<body>

<p><strong>注释:</strong>Internet Explorer 9 以及更早的版本不支持 animation-direction 属性。</p>

<div></div>

</body>

</html>

html5如何实现图片轮播

用html和css实现轮播图的两种方法

animation-name:指定需要绑定到选择器的关键帧的名称。

Animation-ration:指定完成动画所需的时间,以秒或毫秒为单位。

动画-计时-功能:指定动画的速度曲线。

Animation-delay:指定动画开始前的延迟。

Animation-iteration-count:指定动画播放的次数。

Animation-direction:指定动画是否应该反过来播放。

@关键帧{

}

根据总时间的百分比,为每个动画和暂停分配时间;

以三张图为例做一个旋转木马。如果最终值设置为100%,问题是从最后一个到第一个的切换中没有动画。试试从最后一张图到第一张图的动画时间,但是中间的切换效果是从最后一张图向右滑动,直到显示第一张图,,不好看;但是,通过尝试在最后一张之后添加与第一张相同的图片,可以达到循环效果。

它与第一种方法大致相同,唯一的变化是css3的@keyframes规则中的内容。

如果只导入了三张要显示的图片,那么从最后一张图片到第一张图片都不会有动画效果;通过尝试在最后一张之后添加与第一张相同的图片,可以实现循环效果。

问题是画面一直处于切换状态,中间没有停顿;

学路情感网还为您提供以下相关内容希望对您有帮助:

如何使用css3实现图片的自动轮播特效(附完整代码)

使用css3实现轮播特效的原理首先必须保证展示容器大小与图片大小相同,再为图片添加float效果,然后确定插入的图片数量并且为每个图片设置动画阶段,其中每个阶段都是通过使用keyframes设置递增的margin-left值达到切换的效果。使用css...

html5如何实现图片轮播

animation-name:指定需要绑定到选择器的关键帧的名称。Animation-duration:指定完成动画所需的时间,以秒或毫秒为单位。动画-计时-功能:指定动画的速度曲线。Animation-delay:指定动画开始前的延迟。Animation-iteration-count:指定...

使用html和css实现轮播图的两种方法

animation-duration: 规定完成动画所花费的时间,以秒或毫秒计。animation-timing-function: 规定动画的速度曲线。animation-delay: 规定在动画开始之前的延迟。animation-iteration-count: 规定动画应该播放的次数。animatio...

css3 实现动画效果,怎样使他无限循环动下去

animation:mymove 5s infinite;在animation后面加上infinite就可以无限循环,另外还可以做反向循环使用animation-direction animation-name规定需要绑定到选择器的 keyframe 名称。animation-duration规定完成动画所花费的时间,以秒或毫...

CSS3 animation动画,循环间的延时执行该怎么弄

3、将动画绑定到选择器:在样式中,设置动画属性animation,自定义动画名称和时长。4、规定动画开始时的等待时间:animation-delay:时间;可以为秒、毫秒2s,2ms。5、播放次数:animation-iteration-count:次数;永久播放的值...

怎么用html5+css3 实现图片轮播

1、首先我们创建一个简单的项目,如图所示包括html,css和img三个。2、这里是html文件,引入css和html代码文件,如图所示。3、这里是css文件代码,上面是div和图片显示的效果代码,后面是动画效果。4、这里是事件,这里定义了...

CSS3 动画

CSS3 的出现,让动画变得更加容易,性能也更加好。 CSS3 中有三个关于动画的样式属性 transform 、 transition 和 animation ;transform 可以用来设置元素的形状改变,主要有以下几种变形: rotate (旋转)、 scale (...

ppt图片轮播模板-如何在PPT中一个页面上实现多张图片轮播

在PPT一个页面中实现照片滚动播放的具体步骤如下:1、首先打开需要编辑的PPT幻灯片,图片排成一排进行组合。2、然后点击打开“动画”,选择“飞入”效果。3、然后点击动画窗格中的动画效果,选择打开“效果选项”。4、然后在弹...

详解vue、css3如何实现交互特效

字体模糊就是filter: blur()这个css属性的控制效果!看到有逐渐的变化,就是css3动画(animation)的效果下面简单分析下,这个动画的几个步骤,从下面看到,这个动画一共8个步骤。这下就清晰明了了,我们要在下图这个瞬间开始改变文字,也就是...

css3动画属性有哪些

3、animation-timing-function属性animation-timing-function属性是用来设置播放方式的,它可以指定定时函数,该函数定义动画对象随时间的速度。它描述了动画在其持续时间的一个周期内如何进展,允许它在其过程中改变速度。取值如下...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

热门图文

  • 次韵钱申伯山堂之咏的朝代是什么

    《次韵钱申伯山堂之咏》李弥逊朝代:宋代。《次韵钱申伯山堂之咏》年代:宋代。作者:李弥逊。别称:西翁、筠溪居士、普现居士。字号:字似之号筠西翁、筠溪居士、普现居士等。出生地:吴县(今江苏苏州)。出生时间:1085年。去世时间:1153年。主要作品:《沁园春》《永遇乐》《永遇乐》《念奴娇》《念奴娇》等。我们为您从以下几个方面提供次韵钱申伯山堂之咏的详细介绍。一、《次韵钱申伯山堂之咏》的全文 点此查看《次韵钱申伯山堂之咏》的详细内容。净坊秋色老苍官,檐额飞云细可攀。客梦偶随疏雨断,僧游长带暮钟还。似闻遗锡藏银地,亲见高人住骨山。愁绝寒江归去路,乱峰青处望双鬟。二、《次韵钱申伯山堂之咏》李弥逊其他诗词《菩萨蛮》、《水调歌头》、《念奴娇》、《水调歌头》、《永遇乐》。相同朝代的诗歌;

  • 次韵钱申伯山堂之咏的朝代

    《次韵钱申伯山堂之咏》李弥逊朝代:宋代。《次韵钱申伯山堂之咏》年代:宋代。作者:李弥逊。别称:西翁、筠溪居士、普现居士。字号:字似之号筠西翁、筠溪居士、普现居士等。出生地:吴县(今江苏苏州)。出生时间:1085年。去世时间:1153年。主要作品:《沁园春》《永遇乐》《永遇乐》《念奴娇》《念奴娇》等。我们为您从以下几个方面提供次韵钱申伯山堂之咏的详细介绍。一、《次韵钱申伯山堂之咏》的全文 点此查看《次韵钱申伯山堂之咏》的详细内容。净坊秋色老苍官,檐额飞云细可攀。客梦偶随疏雨断,僧游长带暮钟还。似闻遗锡藏银地,亲见高人住骨山。愁绝寒江归去路,乱峰青处望双鬟。二、《次韵钱申伯山堂之咏》李弥逊其他诗词《菩萨蛮》、《水调歌头》、《念奴娇》、《水调歌头》、《永遇乐》。相同朝代的诗歌;

  • 次韵钱申伯山堂之咏朝代

    《次韵钱申伯山堂之咏》李弥逊朝代:宋代。《次韵钱申伯山堂之咏》年代:宋代。作者:李弥逊。别称:西翁、筠溪居士、普现居士。字号:字似之号筠西翁、筠溪居士、普现居士等。出生地:吴县(今江苏苏州)。出生时间:1085年。去世时间:1153年。主要作品:《沁园春》《永遇乐》《永遇乐》《念奴娇》《念奴娇》等。我们为您从以下几个方面提供次韵钱申伯山堂之咏的详细介绍。一、《次韵钱申伯山堂之咏》的全文 点此查看《次韵钱申伯山堂之咏》的详细内容。净坊秋色老苍官,檐额飞云细可攀。客梦偶随疏雨断,僧游长带暮钟还。似闻遗锡藏银地,亲见高人住骨山。愁绝寒江归去路,乱峰青处望双鬟。二、《次韵钱申伯山堂之咏》李弥逊其他诗词《菩萨蛮》、《水调歌头》、《念奴娇》、《水调歌头》、《永遇乐》。相同朝代的诗歌;

  • 次韵钱申伯山堂之咏的作者 次韵钱申伯山堂之咏的作者是什么]

    《次韵钱申伯山堂之咏》李弥逊作者:李弥逊。《次韵钱申伯山堂之咏》作者:李弥逊。年代:宋代。别称:西翁、筠溪居士、普现居士。字号:字似之号筠西翁、筠溪居士、普现居士等。出生地:吴县(今江苏苏州)。出生时间:1085年。去世时间:1153年。主要作品:《沁园春》《永遇乐》《永遇乐》《念奴娇》《念奴娇》等。我们为您从以下几个方面提供次韵钱申伯山堂之咏的详细介绍。一、《次韵钱申伯山堂之咏》的全文 点此查看《次韵钱申伯山堂之咏》的详细内容。净坊秋色老苍官,檐额飞云细可攀。客梦偶随疏雨断,僧游长带暮钟还。似闻遗锡藏银地,亲见高人住骨山。愁绝寒江归去路,乱峰青处望双鬟。二、《次韵钱申伯山堂之咏》李弥逊其他诗词《菩萨蛮》、《水调歌头》、《念奴娇》、《水调歌头》、《永遇乐》。相同朝代的诗歌;

  • 次韵钱申伯山堂之咏的作者是什么

    《次韵钱申伯山堂之咏》李弥逊作者:李弥逊。《次韵钱申伯山堂之咏》作者:李弥逊。年代:宋代。别称:西翁、筠溪居士、普现居士。字号:字似之号筠西翁、筠溪居士、普现居士等。出生地:吴县(今江苏苏州)。出生时间:1085年。去世时间:1153年。主要作品:《沁园春》《永遇乐》《永遇乐》《念奴娇》《念奴娇》等。我们为您从以下几个方面提供次韵钱申伯山堂之咏的详细介绍。一、《次韵钱申伯山堂之咏》的全文 点此查看《次韵钱申伯山堂之咏》的详细内容。净坊秋色老苍官,檐额飞云细可攀。客梦偶随疏雨断,僧游长带暮钟还。似闻遗锡藏银地,亲见高人住骨山。愁绝寒江归去路,乱峰青处望双鬟。二、《次韵钱申伯山堂之咏》李弥逊其他诗词《菩萨蛮》、《水调歌头》、《念奴娇》、《水调歌头》、《永遇乐》。相同朝代的诗歌;

Top