<form id="htvdb"></form>

            <form id="htvdb"><nobr id="htvdb"></nobr></form>

              <address id="htvdb"></address>

              <form id="htvdb"><form id="htvdb"><nobr id="htvdb"></nobr></form></form>
              <form id="htvdb"></form>


                    【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  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  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.gonooa.com/download/page-130.html

                    • 相关下载
                    北京赛车玩法和赔率|官网_首页