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>

  • 相关阅读:
    uniapp判断token多次登录问题
    vue强制刷新子组件到初始状态
    时间戳转化时间过滤器
    axios二次封装具有请求/响应拦截的http请求
    vue常见的工具函数
    解决npm i 初始化,core-js报错
    node环境变量配置
    scss基本使用
    Vue element-ui父组件控制子组件的表单校验
    antd-Calendar(日历)自动嵌入对应时间问题
  • 原文地址:https://www.cnblogs.com/iriliguo/p/6283138.html
Copyright © 2011-2022 走看看