关灯
收起左侧

[前端源码] CSS3 云层效果

0
回复
14
查看
[复制链接]

 成长值: 10083

个人资料

职务: 董事会

铜板: 1404 个

金币: 2057 个

荣耀勋章

超级版主开国元勋夜猫子勋章春节勋章论坛一周年最佳新人活跃会员志愿者推广达人宣传达人灌水之王突出贡献版主荣誉管理论坛元勋

发表于 2020-6-26 11:45:41 | 显示全部楼层 |阅读模式

 


  1. <body>
  2. <ul>
  3.     <li></li>
  4.     <li></li>
  5.     <li></li>
  6. </ul>
  7. </body>

  8. <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         ul{
  14.             height: 400px;
  15.             background-color: skyblue;
  16.             margin-top: 100px;
  17.             animation: change 5s linear 0s infinite alternate;//设定背景颜色的变化,由白天的蓝色变成晚上的黑色
  18.             position: relative;
  19.             overflow: hidden;//若是四个宽度的li,大于三个li中img的宽度,在下方会出现滚动条,这句话是为了隐藏多余的宽度,消除下方滚动条
  20.         }
  21.         ul li{
  22.             list-style: none;
  23.             width: 400%;//便于云层移动的时候不会出现空白,在下文会有解释
  24.             height: 100%;
  25.             position: absolute;//使三个li并排在ul宽度里面
  26.             left: 0;
  27.             top: 0;
  28.         }
  29.         ul li:nth-child(1){
  30.             background-image: url("images/cloud_one.png");
  31.             animation: one 30s linear 0s infinite alternate;//云层1的移动速度时间 infinite:表示无限循环往返,从左到右,从右到左
  32.         }
  33.         ul li:nth-child(2){
  34.             background-image: url("images/cloud_two.png");
  35.             animation: two 30s linear 0s infinite alternate;//云层2的移动速度时间
  36.         }
  37.         ul li:nth-child(3){
  38.             background-image: url("images/cloud_three.png");
  39.             animation: three 30s linear 0s infinite alternate;//云层3的移动速度时间
  40.         }
  41.         @keyframes change {
  42.             from{
  43.                 background-color: skyblue;
  44.             }
  45.             to{
  46.                 background-color: black;
  47.             }
  48.         }
  49.         @keyframes one {
  50.             from{
  51.                 margin-left: 0;
  52.             }
  53.             to{
  54.                 margin-left: -100%;//因为扩展效果都是向右扩展,所以向左移动便不会出现空白,因为添加负号,下同
  55.             }
  56.         }
  57.         @keyframes two {
  58.             from{
  59.                 margin-left: 0;
  60.             }
  61.             to{
  62.                 margin-left: -200%;
  63.             }
  64.         }
  65.         @keyframes three {
  66.             from{
  67.                 margin-left: 0;
  68.             }
  69.             to{
  70.                 margin-left: -300%;
  71.             }
  72.         }
  73.     </style>
复制代码


回复

使用道具 举报

 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

官方微信

APP下载

24小时客服QQ

3300-1700-74

运营中心:成都市锦江区东华正街42号广电仕百达国际大厦25楼

Copyright ©  2018-2020   天马互联 (吉ICP备19000744号