CSS云朵无缝滚动

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

qq_42486417

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

阅读量313

点赞数

本文链接：https://blog.csdn.net/qq_42486417/article/details/98942313

版权

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

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

<!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%;

最低0.47元/天解锁文章

qq_42486417

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS云朵无缝滚动

小白刚入门，可能还有地方需要改进。云朵的效果是用阴影来做的，，<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { padding: 0...
复制链接

扫一扫