动画模块之云层-CSS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画模块云层-CSS</title> <style> *{ margin: 0; padding: 0; } #gk_all{ height: 400px; background-color: skyblue; margin-top: 100px; /*动画 动画名 时长 速度曲线 延迟 循环次数 乒乓效果*/ animation: change 5s linear 0s infinite alternate; position: relative; /*超出部分隐藏*/ overflow: hidden; } #gk_all li{ list-style: none; width: 400%; height: 100%; position: absolute; left: 0; top: 0; } #gk_all li:nth-child(1){ background-image: url("http://gkismet.com/wp-content/uploads/2017/01/cloud_one.png"); animation: one 30s linear 0s infinite alternate; } #gk_all li:nth-child(2){ background-image: url("http://gkismet.com/wp-content/uploads/2017/01/cloud_two.png"); animation: two 30s linear 0s infinite alternate; } #gk_all li:nth-child(3){ background-image: url("http://gkismet.com/wp-content/uploads/2017/01/cloud_three.png"); animation: three 30s linear 0s infinite alternate; } @keyframes change { from{ background: black; } to{ background:skyblue; } } @keyframes one { from{ margin-left: 0; } to{ margin-left: -100%; } } @keyframes two { from{ margin-left: 0; } to{ margin-left: -200%; } } @keyframes three { from{ margin-left: 0; } to{ margin-left: -300%; } } </style> </head> <body> <ul id="gk_all"> <li></li> <li></li> <li></li> </ul> </body> </html>
发表评论