css动画之奔跑的小车

最新推荐文章于 2024-03-28 14:32:13 发布

经常肥猫

最新推荐文章于 2024-03-28 14:32:13 发布

阅读量608

点赞数 1

分类专栏： html/css，css3 html/css css3 文章标签： css css3动画 css动画案例

本文链接：https://blog.csdn.net/qq_43228357/article/details/96524425

版权

本文是作者自学HTML/CSS后的实践成果，分享了一个使用CSS3动画实现的奔跑小车案例。作者期待得到反馈以进一步完善作品。

摘要由CSDN通过智能技术生成

自学html/css,写了几个小案例供大家参考,同时也希望各位能指点在下的不足之处.在下继续改进.
代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>无缝滚动</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			@keyframes moving{
				from {
					transform: translateX(0);
				}
				to {
					transform: translateX(-1000px);
				}
			}
			img {
				width: 200px;
				height: 150px;
			}
			body {
				background-color: #eee;
			}
			nav {
				width: 1000px;
				height: 150px;
				border: 2px solid #fafafa;
				margin: 100px auto;
				overflow: hidden;
			}
			nav ul {
				list-style: none;
				overflow: hidden;
				animation: moving 7s linear infinite;
				width: 200%;
			}
			nav:hover ul {
				animation-play-state: paused;
			}
			nav ul li {
				float: left;
			}
			nav li a {
				display: block;
				width: 200px;
				height: 150px;
			}
			
		</style>
	</head>
	<body>
		<!--无

最低0.47元/天解锁文章

经常肥猫

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
css动画之奔跑的小车

自学html/css,写了几个小案例供大家参考,同时也希望各位能指点在下的不足之处.在下继续改进.代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>无缝滚动</title> <style type="text/css"&...
复制链接

扫一扫

专栏目录