zoukankan      html  css  js  c++  java
  • jq实现从容器中间扩散的方式显示文字

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .wrap {
                width: 300px;
                height: 300px;
                margin: 10px auto;
                overflow: hidden;
            }
    
            .con {
                width: 300px;
                height: 300px;
                position: relative;
                border: 1px solid #ccc;
                padding: 5px;
            }
    
               .wrap1 {
                   width: 300px;
                   height: 300px;
                   margin: 10px auto;
                   overflow: hidden;
                   position: relative;
    
               }
              .bg {
                  position: absolute;
                  width: 0px;
                  height: 0px;
                  border-radius: 150px;
                  border: 250px solid #00c1de;
                  top: -100px;
                  left: -100px;
                  animation: identifier 5s;
              }
            @-webkit-keyframes identifier {
                from {
                    -webkit-transform: rotate(0deg);
                }
                to {
                    -webkit-transform: rotate(720deg);
                }
            
            }
    
            @keyframes identifier {
                from {
                    -webkit-transform: rotate(0deg);
                }
                to {
                    -webkit-transform: rotate(720deg);
                }
            
            }
        </style>
    </head>
    <body>
    <div class="wrap1">
        <div class="con">
            测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测
        </div>
        <div class="bg"></div>
    </div>
    <script>
        $(".bg").animate({"width": "300px", "height": "300px", "left": "-250px", "top": "-250px"}, 5000);
    </script>
    </body>
    </html>
  • 相关阅读:
    Flash实现图片上传(实现浏览器端图片预览)
    Visual Studio自定义模板参数说明
    JS & jQuery上下无缝滚动应用(单行或多行)
    批处理bat文件得到当前绝对路径、盘符等
    JavaScript判断IE的最短写法
    [转载]替代Apache和IIS的轻量级网络服务器盘点
    unable to start debugging on the web server. An authentication error occurred while communicating with the web server.
    开放的云平台
    [转载]15个最优秀的免费开源电子商务交易平台
    MS Sql Server导出表结构
  • 原文地址:https://www.cnblogs.com/dongxiaolei/p/6708860.html
Copyright © 2011-2022 走看看