找回密码
当前位置：前端开发者 > 教程 > 正文

前端开发地图上向外扩散的发射点

2019-01-20 分类：教程 阅读(985) 评论(0)
前端开发技术课程设计
前端开发技术包括啥
常用的前端开发技术

html 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”UTF-8″ />
        <title>Document</title>
        <style type=”text/css”>
            .circleBox {
                position: relative;
                width: 100px;
                height: 100px;
                top: 100px;
                left: 50%;
            }
            .circle {
                width: 100px;
                height: 100px;
                position: absolute;
            }
            .dot {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                width: 10px;
                height: 10px;
                background: #00cdec;
                border-radius: 50%;
            }
            .circle:after {
                position: absolute;
                content: ”;
                display: block;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                border: 1px solid #00cdec;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                box-shadow: inset 0 0 5em rgba(0, 205, 236, 0.16);
                opacity: 0;
            }
            .circle1:after {
                -webkit-animation: mymove 4.5s ease-out 200ms infinite;
                -o-animation: mymove 4.5s ease-out 200ms infinite;
                animation: mymove 4.5s ease-out 200ms infinite;
            }
            .circle2:after {
                -webkit-animation: mymove 4.5s ease-out 1725ms infinite;
                -o-animation: mymove 4.5s ease-out 1725ms infinite;
                animation: mymove 4.5s ease-out 1725ms infinite;
            }
            .circle3:after {
                -webkit-animation: mymove 4.5s ease-out 3225ms infinite;
                -o-animation: mymove 4.5s ease-out 3225ms infinite;
                animation: mymove 4.5s ease-out 3225ms infinite;
            }
            @keyframes mymove {
                from {
                    width: 0px;
                    height: 0px;
                    opacity: 1;
                }
                to {
                    width: 100px;
                    height: 100px;
                    opacity: 0;
                }
            }
        </style>
    </head>
    <body>
        <div class=”circleBox”>
            <div class=”dot”></div>
            <div class=”circle1 circle”></div>
            <div class=”circle2 circle”></div>
            <div class=”circle3 circle”></div>
        </div>
        <script
            src=”http://code.jquery.com/jquery-2.2.4.min.js”
            integrity=”sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=”
            crossorigin=”anonymous”
        ></script>
        <script type=”text/javascript”></script>
    </body>
</html>
前端开发 新技术
web前端开发技术展望
前端开发技术年度总结
赞(0)
前端开发者 » 前端开发地图上向外扩散的发射点
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论