当前位置：网站首页>天空云变化案例

天空云变化案例

2022-07-30 23:33:00 【qq_48639265】

运用css设置云朵从白天渐渐到晚上再到白天的变化

代码：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style> * {
       padding: 0; margin: 0; } /* 设置背景样式 */ .bg {
       height: 100vh; background-color: skyblue; animation: sky 10s linear infinite; } /* 设置云彩样式 */ .bg .cloud_one{
       width: 300%; height: 100%; background: url('../images/cloud_one.png') repeat-x; position: fixed; top: 0; left:0; animation: cloud 20s linear infinite; } .bg .cloud_two{
       width: 300%; height: 100%; background: url('../images/cloud_two.png') repeat-x; position: fixed; top: 0; left:0; animation: cloud 40s linear infinite; } .bg .cloud_three{
       width: 300%; height: 100%; background: url('../images/cloud_three.png') repeat-x; position: fixed; top: 0; left:0; animation: cloud 60s linear infinite; } /* 设置天空轮播 */ @keyframes sky {
       0% {
       background-color: skyblue; } 50% {
       background-color: #000; } 100% {
       background-color: skyblue; } } /* 设置云彩轮播 */ @keyframes cloud {
       from{
       left: 0; } to{
       left: -200%; } } </style>
</head>

<body>
	<div class="bg">
		<div class="cloud_one"></div>
		<div class="cloud_two"></div>
		<div class="cloud_three"></div>
	</div>
</body>

</html>

效果图
在这里插入图片描述
在这里插入图片描述

原网站

版权声明
本文为[qq_48639265]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_48639265/article/details/126072862

边栏推荐

猜你喜欢

随机推荐