CSS3动画

最新推荐文章于 2024-04-16 00:12:34 发布

zihanzy.com

最新推荐文章于 2024-04-16 00:12:34 发布

阅读量1.3k

点赞数

分类专栏： html5&css3

本文链接：https://blog.csdn.net/weixin_45143481/article/details/104247420

版权

html5&css3 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

通过 CSS3动画，我们可以在许多网页中取代动画图片、Flash 动画以及 Js特效
动画属性

动画	说明
@keyframes	定义动画。
animation-name	规定 @keyframes 动画的名称
animation-duration	一个动画完成的时间。默认是 0
animation-timing-function	规定动画的速度曲线。默认是 “ease”。 3
animation-delay	规定动画何时开始。默认是 0
animation-iteration-count	规定动画被播放的次数。默认是 1 （`infinite`无限循环）
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”(`paused` 规定动画已暂停)
animation-fill-mode	规定对象动画时间之外的状态。
animation	所有动画属性的简写属性，除了 animation-play-state 属性。如下

animation:动画名称 动画完成时间 速度曲线 ``何时开始 动画播放次数 动画是否逆向（默认normal）…
animation-timing-function
linear:动画匀速播放
ease:动画由慢到块
ease-in:动画以慢速开始
ease-out:动画以慢速接收
ease-in-out:动画以慢速开始和慢速结束

1.使用动画需先引用动画

ul {
animation:`动画名称` `动画完成时间` `速度曲线 `。。。。。。
}

2.定义动画

@keyframes 动画名称{
    0%{动画代码}
    %25{动画代码}
    。。。。。
    %100{
    ...}
   
}

利用动画制作无缝滚动图片
页面结构

<nav>
	<ul>
		<li><img src="image/1.jpg"></li>
	    <li><img src="image/2.jpg"></li>
	    <li><img src="image/3.jpg"></li>
	    <li><img src="image/4.jpg"></li>
	    <li><img src="image/5.jpg"></li>
	    <li><img src="image/6.jpg"></li>
	  
	</ul>
</nav>

css样式

*{
	padding: 0;margin:0;list-style: none;
}
img{
	width:200px;
	height:200px;
}
nav {
	margin: 100px auto;
	width:1200px;
	height:200px;
	border:1px solid red;
}

ul li {
	float:left;
}

如下界面
在这里插入图片描述
要添加无缝滚动效果，我们先在ul引用动画，因为移动的是ul整个元素

ul{
	animation: move 3s linear;
	//linear设置动画匀速执行
   }

接下来定义动画

@keyframes move{
	0%{
		transform: translateX(0);
		//初使位置0像素
     }
	100%{
		transform: translateX(-1200px);
		//移动1200像素==盒子的宽度
	}
}

效果如下
在这里插入图片描述
虽然实现动画了，但后面留空了，这并不是我们要的无缝滚动
要实现无缝滚动我们可以这样
将之前的所有列表图片克隆一份，添加到其末尾，这样当第一组图片移动之后我们看到的就不是空白了
如下
1.克隆图片，紫色盒子为ul元素，这里ul必须为父元素的200%宽度，不然装不下后面克隆图片
在这里插入图片描述
2.当第一组图片移动的时候，用户看到的视角

3.当克隆图片移动到最后一个时，由于动画的机制，又会马上跳到第一张图片，这样即实现了无缝滚动

接下来用代码实现他

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;margin:0;list-style: none;
		}
		img{
			width:200px;
			height:200px;
		}
		nav {
			margin: 100px auto;
			width:1200px;
			height:200px;
			border:1px solid red;
			overflow: hidden;
		}
		ul{
			width:200%;
			animation: move 3s linear infinite;
		}
		ul li {
			float:left;
			
		}
		@keyframes move{
			0%{
				transform: translateX(0);

			}
			100%{
				transform: translateX(-1200px);
			}
		}
	</style>
</head>
<body>
<nav>
	<ul>
		<li><img src="image/1.jpg"></li>
	    <li><img src="image/2.jpg"></li>
	    <li><img src="image/3.jpg"></li>
	    <li><img src="image/4.jpg"></li>
	    <li><img src="image/5.jpg"></li>
	    <li><img src="image/6.jpg"></li>
	    <li><img src="image/1.jpg"></li>
	    <li><img src="image/2.jpg"></li>
	    <li><img src="image/3.jpg"></li>
	    <li><img src="image/4.jpg"></li>
	    <li><img src="image/5.jpg"></li>
	    <li><img src="image/6.jpg"></li>
	  
	</ul>
</nav>
</body>
</html>

我们只将之前的图片复制了一份，并ul为父元素的两倍宽度，最后父元素nav设置overflow:hidden即可
在这里插入图片描述
我们还可以添加鼠标指向时使无缝滚动暂停
利用动画的animation-play-state:paused

ul:hover{
	animation-play-state:paused;
}

zihanzy.com

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3动画

通过 CSS3动画，我们可以在许多网页中取代动画图片、Flash 动画以及 Js特效动画属性动画说明@keyframes定义动画。animation-name规定 @keyframes 动画的名称animation-duration一个动画完成的时间。默认是 0animation-timing-function规定动画的速度曲线。默认是 “ease...
复制链接

扫一扫

专栏目录