zoukankan      html  css  js  c++  java
  • 空中飘动的云动画

    步骤:1.创建五朵云;

             2.给云朵添加不同样式和位置;

             3.让这些云朵以不同的速度穿过屏幕;

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>天空飘着五朵云</title>
    <style>
    *{ margin: 0; padding: 0;}

    body {
    overflow: hidden;

    }
    #clouds{
    padding: 100px 0;
    background: #c9dbe9;
    background: linear-gradient(top, #c9dbe9 0%, #fff 100%);
    }
    .cloud {
    200px; height: 60px;
    background: #fff;
    border-radius: 200px;
    position: relative;
    }
    .cloud:before , .cloud:after {
    content: '';
    background: #fff;
    100px; height: 80px;
    position: absolute; top: -15px; left: 10px;
    border-radius: 100px;
    transform: rotate(30deg);
    }
    .cloud:after {
    120px; height: 120px;

    top: -55px; right: 15px;left: auto;
    }

    .x1 {
    animation: moveclouds 15s linear infinite;
    }

    .x2 {
    left: 200px;
    transform: scale(0.6);
    opacity: 0.6;
    animation: moveclouds 25s linear infinite;

    }
    .x3 {
    left: -250px; top: -200px;
    transform: scale(0.8);
    opacity: 0.8;
    animation: moveclouds 20s linear infinite;

    }
    .x4 {
    left: 470px; top: -250px;
    transform: scale(0.75);
    opacity: 0.75;
    animation: moveclouds 18s linear infinite;

    }
    .x5 {
    left: 350px; top: -150px;
    transform: scale(0.8);
    opacity: 0.8;
    animation: moveclouds 20s linear infinite;
    }

    @keyframes moveclouds {
    0% {margin-left: 1000px;}
    100% {margin-left: -1000px;}
    }
    </style>

    </head>

    <body>
    <div id="clouds">
    <div class="cloud x1"></div>
    <div class="cloud x2"></div>
    <div class="cloud x3"></div>
    <div class="cloud x4"></div>
    <div class="cloud x5"></div>
    </div>


    </body>
    </html>

  • 相关阅读:
    jQuery1.3.2 源码学习 2 两个重要的正则表达式
    学习 jQuery 4 使用方法选择
    学习 jQuery 6 在 TreeView 中实现全选
    jQuery1.3.2 源码学习4 init 函数分析 2
    学习 jQuery 3 选择器
    学习 jQuery 5 筛选和过滤器
    条款9:在删除选项中仔细选择
    优化3D图形流水线
    指针相减
    浅谈水体的实现
  • 原文地址:https://www.cnblogs.com/iriliguo/p/6283138.html
Copyright © 2011-2022 走看看