CSS云朵无缝滚动

最新推荐文章于 2024-04-21 22:00:19 发布

qq_42486417

最新推荐文章于 2024-04-21 22:00:19 发布

阅读量377

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_42486417/article/details/98942313

初学者分享如何使用CSS创建云朵滚动效果，通过阴影技术实现，参考自优快云上的相关教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小白刚入门，可能还有地方需要改进。

云朵的效果是用阴影来做的，，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			body {
				background-color: #1483D8;
				padding-top: 50px;
			}
			
			ul {
				list-style: none;
				width: 200%;
				animation: move 5s linear infinite;
			}
			
			.move {
				width: 1344px;
				height: 150px;
				overflow: hidden;
				white-space: nowrap;
				clear: both;
			}
			ul li {
				width: 448px;
				height: 80px;
				float: left;
			}
			.clound1 {
				margin-top: 25px;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background-color: #fff;
				box-shadow: #fff 65px -15px 0 -5px, #fff 25px -25px, #fff 30px 10px,#fff 60px 15px 0 -10px, #fff 85px 5px 0 -5px;
			}
			.clound2 {
				margin-top: 90px;
				width: 36px;
				height: 20px;
				border-radius: 50%;
				background-color: #fff;
				box-shad

最低0.47元/天解锁文章

200万优质内容无限畅学