CSS练习_云层效果

之前练习的一个网页,只利用css完成,算是一个小demo吧

想要的效果:

云层无限滚动
背景天空会由白变黑再变白
云层滚动有视差(速度不同)

效果图:

代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>5_动画模块_云层效果</title><style>* {margin: 0;padding: 0;}ul {height: 400px;background-color: skyblue;margin-top: 100px;animation: change 5s linear 0s infinite alternate;position: relative;overflow: hidden;}ul li {width: 400%;height: 100%;position: absolute;left: 0;top: 0;list-style: none;}ul li:nth-child(1) {background-image: url("pic/yun1.png");animation: one 30s linear 0s infinite alternate;}@keyframes one {from{margin-left: 0px;}to{margin-left: -100%;}}ul li:nth-child(2) {background-image: url("pic/yun2.png");animation: two 30s linear 0s infinite alternate;}@keyframes two {from {margin-left: 0px;}to {margin-left: -200%;}}ul li:nth-child(3) {background-image: url("pic/yun3.png");animation: three 30s linear 0s infinite alternate;}@keyframes three {from {margin-left: 0px;}to {margin-left: -300%;}}@keyframes change {from {background-color: skyblue;}to {background-color: black;}}</style>
</head>
<body>
<ul><li></li><li></li><li></li>
</ul>
</body>
</html>

yun1.png,到yun3.png:

ps扣的,不咋滴

CSS练习_云层效果相关推荐

纯CSS制作的图形效果
纯CSS制作的图形效果很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...
css实现tab切换效果
<div class="match-instruction"><div id="tab2" class="mi-cont" ...
不可思议的纯 CSS 实现鼠标跟随效果
不可思议的纯 CSS 实现鼠标跟随效果原文:不可思议的纯 CSS 实现鼠标跟随效果直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS ...
php3d按钮,CSS实现3D按钮效果
这次给大家带来CSS实现3D按钮效果,CSS实现3D按钮效果的注意事项有哪些,下面就是实战案例,一起来看一下. css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改bo ...
bootstrap起步全局css样式概览全局css样式_栅格全局css样式_排版
http://www.bootcss.com/基本模板 https://v3.bootcss.com/getting-started/#template bootstrap起步 <!DOCTYP ...
css 缩放_【开发小技巧】06—如何使用CSS在鼠标悬停时缩放图像？
英文 | https://www.geeksforgeeks.org/how-to-zoom-an-image-on-mouse-hover-using-css/?ref=rp翻译 | web前端开发 ...
[css] 用css实现倒影的效果
[css] 用css实现倒影的效果 box-reflect 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
[css] 使用css实现彩虹的效果
[css] 使用css实现彩虹的效果 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
[css] 使用css实现蒙版的效果
[css] 使用css实现蒙版的效果 filter: blur(1px) 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面 ...

CSS练习_云层效果

CSS练习_云层效果相关推荐

最新文章

热门文章