【2018.01.18】用CSS3打造云朵飘飘源码

分享 :

网盘下载链接:

提取密码: 5umv
复制提取密码
51RGB在线教育2018年1月19下午15点,万老师WEB前端开发直播体验课,用CSS3打造云朵飘飘!源码下载
  • 详情
    文件来源

    官方发布

    更新日期

    2018-01-21

    适用平台

    All

    系统位数

    ALL

    文件格式

    zip

    文件语言

    中文

    文件授权

    免费

    下载次数

    33次

    源码,可以直接复制使用!

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
        <title>用CSS3打造云朵飘飘-51RGB在线教育</title>
        <style>
            body{
                background:#89dfff;
                overflow: hidden;
            }
            .ground{
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                height: 30vh;
                background: #f2d4ae;
            }
            .cloud{
                position: absolute;
                top: 20%;
                left: 60%;
                height: 7vmin;
                width: 20vmin;
                border-radius: 20vmin;
                background: #fff;
                animation: c1 55s infinite linear;
            }
            @keyframes c1 {
                0% {
                    opacity: 1;
                    transform: translateX(-80vw)
                }
                100% {
                    opacity: 1;
                    transform: translateX(100vw)
                }
            }
            .cloud.cloudA{
                top: 25%;
                left: 30%;
                animation: c2 45s infinite ease;;
                transform: scale(0.7);
            }
            @keyframes c2 {
                0% {
                    transform: translateX(-100vw) scale(0.7);
                }
                100% {
                    transform: translateX(100vw) scale(0.7);
                }
            }
            .cloud1{
                position: absolute;
                top: -5vmin;
                left: 7vmin;
                height: 10vmin;
                width: 10vmin;
                border-radius: 20vmin;
                background: #fff;
            }
            .cloud2{
                position: absolute;
                top: -3vmin;
                left: 3vmin;
                height: 7vmin;
                width: 7vmin;
                border-radius: 20vmin;
                background: #fff;
    
            }
            .sign{
                position: absolute;
                bottom: 20vh;
                left: 30vw;
                height: 20vmin;
                width: 20vmin;
            }
            .post{
                position: absolute;
                height: 18vmin;
                width: 1.5vmin;
                border: 0.2vmin solid #000;
                border-radius: 1vmin;
                background: #70624d;
                transform: rotate(-10deg);
            }
            .txt{
                position: absolute;
                bottom: 11vmin;
                left: -6.5vmin;
                height: 7vmin;
                width: 15vmin;
                border: 0.2vmin solid #2f3f39;
                background: #96ccb8;
                text-align: center;
                font-size: 3vmin;
                line-height: 7vmin;
                transform: rotate(-10deg) skewY(-10deg);
                font-family: 'Permanent Marker', sans-serif, cursive;
            }
            /***投影***/
            .pshadow{
                position: absolute;
                bottom: -2vmin;
                left: -3vmin;
                height: 11vmin;
                width: 1.5vmin;
                border-radius: 1vmin;
                background: #c1a88a;
                transform: rotate(-80deg);
            }
            .tshadow{
                position: absolute;
                bottom: 2.5vmin;
                left: -8vmin;
                height: 3vmin;
                width: 8vmin;
                background: #c1a88a;
                transform: rotate(-70deg) skewY(-10deg);
            }
            .qq{
                position: absolute;
                z-index:10;
                left: 50%;
                top: 50px;
    
            }
            .inp {
                width: 150px;
                height: 30px;
                color: white;
                background-color: #FF7F24;
                border:none;
                box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
            }
            .inp:hover{
                cursor:pointer;
                background-color: #ff6633;
                box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.3);
    
            }
        </style>
    </head>
    <body>
    <div class="ground">
        <div class="qq">
            <a href="https://jq.qq.com/?_wv=1027&k=51UOQAf" target="_blank"><input class="inp" type="submit" value="点击加QQ学习群" /></a>
        </div>
    </div>
    <div class="cloud">
        <div class="cloud1"></div>
        <div class="cloud2"></div>
    </div>
    <div class="cloudA cloud">
        <div class="cloud1"></div>
        <div class="cloud2"></div>
    </div>
    <div class="sign">
        <div class="pshadow"></div>
        <div class="tshadow"></div>
        <div class="post"></div>
        <div class="txt">
            51RGB
        </div>
    </div>
    </body>
    </html>
    
    
  • 使用说明

    本节课视频资源:

    课程在线回放地址:

    课程视频下载地址:http://www.51rgb.cn/download/page-130.html

  • 相关下载