武汉web培训
达内武汉中心

15271940953

热门课程

达内web前端学员canvas心型实例

  • 时间:2016-07-20
  • 发布:龙飞凤舞
  • 来源:web前端网

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<style>
    .dots {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 500px;
        height: 400px;
        background: black;
    }
    .dots li {
        position: absolute;
        list-style-type: none;
        left: 285px;
        top:100px;
        width: 8px;
        height: 8px;
        background: red;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        -webkit-animation: wave 1800ms ease-in-out infinite;
        animation: wave 1800ms ease-in-out infinite;
    }
    .dots li:nth-child(1) {
    }
    @-webkit-keyframes wave {
        0% {
            -webkit-transform:rotate(0deg) translate(0px, 250px);
        }
        50% {
            -webkit-transform:rotate(180deg) translate(0px, -15px);
        }
        100% {
            -webkit-transform: rotate(360deg) translate(0px, 250px);
        }

    }
    </style>
<ul class="dots">
</ul>
<script>
    var fragment=document.createDocumentFragment();
    var ul=document.getElementsByClassName('dots')[0];
    var li=null;
    for(var j=0;j<40;j++){
         li=document.createElement('li');
        fragment.appendChild(li);
    }
    ul.appendChild(fragment);
    for(var i=0;i<ul.children.length;i++){
        ul.children[i].style.webkitAnimationDelay=51*(i+1)+'ms';
    }
</script>
</body>
</html>
上一篇:canvas时钟与css时钟
下一篇:oninput、onchange、onpropertychange的区别

web前端学习容易犯的错误

web1702“诱人”活动

抽象类和抽象方法

jquery的ajax和getJson跨域获取json数据

选择城市和中心
贵州省

广西省

海南省