码迷,mamicode.com
首页 > Web开发 > 详细

每天一点点之css - 动画-一个圆绕着另一个圆动(绕着轨迹运动)

时间:2018-12-31 13:53:23      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:分享图片   overflow   需要   代码   开发   height   没有   for   tom   

 

最近要开发一个类似星河的效果,需要小圆绕着一定的轨迹运动,这个时候我首先想到的是使用canvas来实现,在实现过程中发现这个实现起来不是很灵活,然后想到css3有动画也可以实现,下面是效果

技术分享图片技术分享图片

注:图2是多个的效果,没有代码 

 

html

<div class="s">
    <div class="m">
        <div class="small small1">
            <div class="small-p small-p1"></div>
        </div>
    </div>
</div>

 

css

.s {
        width: 500px;
        height: 200px;
        border: 1px solid #ccc;
        position: relative;
        left: 50px;
        top: 50px;
        overflow: hidden;
        margin-bottom: 100px;
    }
    
    .small-p{
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background: #ff0000;
        position: absolute;
        
    }
    .small-p1 {
        background: #dde3a2;
        top: -5px;
        left: 150px;
    }
    .small {
        position: relative;
        width: 300px;
        height: 300px;
        border-radius: 150px;
        left: 100px;
        top: -50px;
        animation: run 6s linear infinite;
        border: 1px solid #dde3a2;
    }
    .m {
        position: absolute;
    }
    @keyframes run{
        0%{
            transform: rotateZ(0deg);
        }
        100%{
            transform: rotateZ(360deg);
        }
    }    

 

每天一点点之css - 动画-一个圆绕着另一个圆动(绕着轨迹运动)

标签:分享图片   overflow   需要   代码   开发   height   没有   for   tom   

原文地址:https://www.cnblogs.com/cap-rq/p/10201798.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!