css3椭圆运动

最新推荐文章于 2024-05-08 16:37:30 发布
最新推荐文章于 2024-05-08 16:37:30 发布
阅读量281 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z1048956673/article/details/84303403
版权

通过使用css3实现让元素椭圆运动。而不是圆形运动。

效果1：http://sandbox.runjs.cn/show/ignefell

效果2：http://runjs.cn/code/w2wxjyeo

代码如下：

<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><link rel="stylesheet" href="css/base.css"></head><body><style>html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
ul,li,div,p,body{margin:0;padding:0;text-align:left;}
body, html {background:#001424;text-align: left;height: 100%;width: 100%;font-family: "Microsoft YaHei","Helvetica Neue",Arial, HelveticaNeue, "Helvetica-Neue", Helvetica, "BBAlpha Sans", sans-serif;font-size:62.5%;font-weight: normal;}
@-webkit-keyframes star_ani_00{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }   
}
@keyframes star_ani_00{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }   
}
@-webkit-keyframes star_ani_01{
    0%,100%{
        -webkit-transform: translateY(0rem);
    }
    50%{
        -webkit-transform: translateY(-35rem);
    }
}
@keyframes star_ani_01{
    0%,100%{
        transform: translateY(0rem);
    }
    50%{
       transform: translateY(-35rem);
    }
}
@-webkit-keyframes star_ani_02{
    0%,100%{
        -webkit-transform: translateX(0rem) scale(0.8);
    }    
    50%{
        -webkit-transform: translateX(10rem) scale(1);
    }
}
@keyframes star_ani_02{
    0%,100%{
        transform: translateX(0rem) scale(0.8);
    }    
    50%{
        transform: translateX(10rem) scale(1);
    }
}
@-webkit-keyframes star_ani_03{
    0%,100%{
        -webkit-transform: translateX(0rem);
    }
    50%{
        -webkit-transform: translateX(-36rem);
    }
}
@keyframes star_ani_03{
    0%,100%{
        transform: translateX(0rem);
    }
    50%{
        transform: translateX(-36rem);
    }
}

@-webkit-keyframes star_ani_04{
    0%,100%{
        -webkit-transform: translateY(0rem) scale(0.8);
    }    
    50%{
        -webkit-transform: translateY(10.5rem) scale(1);
    }
}
@keyframes star_ani_04{
    0%,100%{
        transform: translateY(0rem) scale(0.8);
    }    
    50%{
        transform: translateY(10.5rem) scale(1);
    }
}

@-webkit-keyframes star_ani_05{
    0%,100%{
        -webkit-transform: translateX(0rem);
    }
    50%{
        -webkit-transform: translateX(-26.5rem);
    }
}
@keyframes star_ani_05{
    0%,100%{
        transform: translateX(0rem);
    }
    50%{
        transform: translateX(-26.5rem);
    }
}

@-webkit-keyframes star_ani_06{
    0%,100%{
        -webkit-transform: translateY(0rem) scale(0.8);
    }    
    50%{
        -webkit-transform: translateY(8rem) scale(1);
    }
}
@keyframes star_ani_06{
    0%,100%{
        transform: translateY(0rem) scale(0.8);
    }    
    50%{
        transform: translateY(8rem) scale(1);
    }
}
.main{
    position: relative;
    height:100%;
}
.wrap-icon{
    position:absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    left:50%;
    top: 12%;
    z-index: 2;
    opacity: 0;
}

.wrap-icon1{
    width: 2.7rem;
    height: 2.7rem;
    margin-left:-5.5rem;
    margin-top: 28rem;
    -webkit-animation:star_ani_00 0.5s 4s linear forwards;
    animation:star_ani_00 0.5s 4s linear forwards;
}
.wrap-icon1 span{
    width:2.7rem;
    height:2.7rem;
    display: block;
    -webkit-animation:star_ani_02 16s 4s ease-in-out infinite;
    animation:star_ani_02 16s 4s ease-in-out infinite;
}
.wrap-icon1 i{
    width:1.5rem;
    height:1.5rem;
    border-radius:1.5rem;
    display: block;
    background:#f60;
    background-size: 100% 100%;
    -webkit-animation:star_ani_01 16s 0s ease-in-out infinite;
    animation:star_ani_01 16s 0s ease-in-out infinite;
}

.wrap-icon2{
    width: 2.7rem;
    height: 2.7rem;
    margin-left: 17.8rem;
    margin-top: 8rem;
    -webkit-animation:star_ani_00 0.5s 5s linear forwards;
    animation:star_ani_00 0.5s 5s linear forwards;
}
.wrap-icon2 span{
    width:2.7rem;
    height:2.7rem;
    display: block;
    -webkit-animation:star_ani_03 20s 0s ease-in-out infinite;
    animation:star_ani_03 20s 0s ease-in-out infinite;
}
.wrap-icon2 i{
    width:1.5rem;
    height:1.5rem;
    border-radius:1.5rem;
    display: block;
    background:#f60;
    background-size: 100% 100%;
    -webkit-animation:star_ani_04 20s 5s ease-in-out infinite;
    animation:star_ani_04 20s 5s ease-in-out infinite;
}


.wrap-icon3{
    width: 2.7rem;
    height: 2.7rem;
    margin-left: 12.4rem;
    margin-top: 9rem;
    -webkit-animation:star_ani_00 0.5s 2.5s linear forwards;
    animation:star_ani_00 0.5s 2.5s linear forwards;
}
.wrap-icon3 span{
    width:2.7rem;
    height:2.7rem;
    display: block;
    -webkit-animation:star_ani_05 10s 0s ease-in-out infinite;
    animation:star_ani_05 10s 0s ease-in-out infinite;
}
.wrap-icon3 i{
    width:2rem;
    height:2rem;
    border-radius:1rem;
    display: block;
    background:#f60;
    background-size: 100% 100%;
    -webkit-animation:star_ani_06 10s 2.5s ease-in-out infinite;
    animation:star_ani_06 10s 2.5s ease-in-out infinite;
}
.wrap-bg{
    width:28rem;
    height:28rem;
    position: absolute;
    top:12%;
    left:50%;
    margin-left:-14rem;
    border:0.1rem solid #aaa;
    border-radius:28rem;
    -webkit-transform:scale3d(1,0.3,1);
    transform:scale3d(1,0.3,1);
}
.wrap-bg2{
    width:36rem;
    height:36rem;
    position: absolute;
    top:12%;
    left:50%;
    margin-left:-18rem;
    margin-top:-4rem;
    border:0.1rem solid #aaa;
    border-radius:28rem;
    -webkit-transform:scale3d(1,0.3,1);
    transform:scale3d(1,0.3,1);
}
.wrap-bg3{
    width:32rem;
    height:32rem;
    position: absolute;
    top:12%;
    left:50%;
    margin-left:-16rem;
    margin-top:-3rem;
    -webkit-transform:rotate(4deg);
    transform:rotate(4deg);
}
.wrap-bg3 span{
    display: block;
    width:100%;
    height:100%;
    border:0.1rem solid #aaa;
    border-radius:28rem;
    -webkit-transform:scale3d(0.32,1,1);
    transform:scale3d(0.32,1,1);
}
.wrap-sun{
    position: absolute;
    width:5.3rem;
    height:5.3rem;
    top:12%;
    left:50%;
    margin-left:-2.6rem;
    margin-top:11rem;
    background:url(images/sun.png) no-repeat;
    background-size: 100%;
}
            </style><div class="box">

<div class="wrap-bg"></div>
<div class="wrap-bg2"></div>
<div class="wrap-bg3"><span></span></div>

<div class="wrap-icon wrap-icon1">
    <span><i></i></span>
</div>

<div class="wrap-icon wrap-icon2">
    <span><i></i></span>
</div>

<div class="wrap-icon wrap-icon3">
    <span><i></i></span>
</div>

<div class="wrap-sun"></div>

</div>
            </body></html>

 

z1048956673
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html/css椭圆运动
lym1748283017的博客
09-04 1380
叨逼逼 我在设计个人简历主界面的时候，想将背景做成行星绕着恒星转的画面。这就需要css中的animation来实现椭圆运动。 开始造作 让我们看一下菜鸟教程css文档中有关animation的介绍。 菜鸟教程animation介绍 animation-timing-function可以设置速度曲线，即是可以通过该属性修改物体的运动速度和加速度。这正是我们需要的。 让我们思考一下，将椭圆的短轴无限缩...
CSS3加载动画特效代码
03-20
在"CSS3加载动画特效代码"中，我们可能会看到一个典型的例子——小球在大球内部进行有规律的运动，形成连贯的加载过程。这样的设计既美观又实用，能够吸引用户的注意力，同时表明内容正在加载中。 要创建这样的动画...
css实现椭圆轨迹旋转
最新发布
qq_53513969的博客
05-08 404
css实现椭圆轨迹旋转实现原理：animation动画+贝塞尔曲线让图片旋转起来，js是鼠标移入让动画暂停。
css3实现椭圆轨迹旋转的示例代码
09-22
主要介绍了css3实现椭圆轨迹旋转的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css3的animation制作围绕椭圆轨道旋转，近大远小的动画
qq_37161741的博客
04-14 1648
css3的animation制作围绕椭圆轨道旋转，近大远小的动画
css3实现椭圆轨迹旋转
a18589032970的博客
09-01 1342
css3实现椭圆轨迹旋转 实现效果 X轴Y轴在一个矩形内移动 做斜线运动 1 .ball { 2 position: absolute; 3 animation: 4 animX 2s linear infinite alternate, 5 animY 2s linear infinite alter...
CSS：实现动态旋转效果/椭圆渐变圆环旋转/椭圆轨迹旋转
smm的博客
05-07 4709
CSS：实现动态旋转效果
动画沿椭圆路线进行旋转
哆来A梦没有口袋的博客
08-04 1296
利用css的animation实现沿着椭圆线旋转
纯CSS3绘制的太阳系行星动画运动轨迹效果源码.zip
10-31
在本资源中，我们主要探讨的是使用纯CSS3技术来创建一个太阳系行星动画运动轨迹的效果。CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，它引入了许多新的特性和功能，使网页设计更为丰富和动态。在这个...
CSS3卡通章鱼游动动画特效特效代码
03-20
**CSS3卡通章鱼游动动画特效详解** 在网页设计中，动态效果是吸引用户注意力、提升用户体验的重要手段。CSS3作为现代网页设计的核心技术之一，提供了丰富的动画和过渡功能，使得无需JavaScript或其他复杂的编程语言...
28个纯css3 loading
01-03
5. **边框半径（Border-radius）**：CSS3的`border-radius`属性使我们可以创建圆角，这在制作各种圆形或椭圆形的加载动画时非常有用。 6. **阴影（Box-shadow和Text-shadow）**：通过应用阴影，我们可以增加元素的...
android 椭圆轨迹旋转,css3实现椭圆轨迹旋转
weixin_36160969的博客
05-25 549
最近需要实中比需抖接朋功要朋插现如下效果最开始享器哈班其础件事是架考发求关通互面待需了用css3D旋转写，只能实现如是能览调不页新代些事几求事都时学下是事功过下效果没办法把所有的圆转向正面，不知道是我的操作不对，还是3d旋转无法实现，有知道的大佬还请赐教啊没插新，都次过是宗现制的前搭待个断前能绿和法用3d实现只能转向2d了，只要实现按椭圆旋转直分调浏器代，刚求的一学础过功互有解小久宗点差维含数如数...
巧妙利用CSS3实现太阳系行星公转运动轨迹
weixin_34189116的博客
06-21 1089
前段时间在博客园看到一篇很不错的文章，就是介绍如何用CSS3来实现太阳系中行星的运动。本×××处于好奇心从头到完整的看完了。突然发现好奇不仅仅害死猫，也可以增长知识嘛（你这是什么谬论！！！）。也许有的朋友看过有关的文章那么今天我们就一起来看看怎么巧妙的利用CSS3 来实现这么漂亮的动画的吧！我不清楚大家对于CSS3的动画了解多少，但是我对于 CSS3的东西还是限制与用什么查什...
css椭圆轨迹运动动画
https://syra-ti.icu
07-02 4111
朋友问我一个球沿着斜的椭圆轨迹运动怎么实现 实现之后随手记录 demo地址
css3 animation沿椭圆轨道旋转运动
細水、長流√的专栏
12-23 8356
一些废话： 很久没有更博了，主要原因是由于使用git工具push的时候，自己的私人账号和工作的git账号总是冲突，每次明明切换过了账号，可是push的时候却用的是错误的账号，找不到解决办法。最近得知github有桌面版，终于不会再冲突了！ 前言 最近工作上遇到一个项目有两张banner，都需要实现围绕椭圆旋转的动画效果。 拿到这个需求，第一反应是用animation应该很容易实现。脑袋里的思路是，先实现沿正圆运动，再进行3D旋转即可。然而，我得到的效果是：Demo <!DOCTY
前端css/less绕椭圆轨道旋转动画 带遮挡效果 3D
weixin_48701221的博客
11-28 1364
css 椭圆轨道旋转动画
Css3动画（一） 如何画3D旋转效果或者卫星围绕旋转效果
weixin_33985679的博客
05-28 1168
如何画3D旋转效果或者卫星围绕旋转效果，当然这个也是工作中的一个任务，我在网上翻了一下，并没有找到类似的东西，所以写下来还是费了一番功夫，因此我把它拿出来记录一下，当然替换了一部分内容。好了，话不多说，进入正题。 我们都知道，浏览器是一个平面的视觉效果，如何在一个平面上看出立体的3D效果呢，其实就是一个视觉差的问题。那我们就从一个平面视觉效果一步一步画出立体的3D效果来。我还是先把效...
实现css3 3d椭圆旋转菜单
05-16
要实现一个 CSS3 3D 椭圆旋转菜单，可以按照以下步骤进行： 1. 创建菜单的 HTML 结构，可以使用 ul 和 li 标签来实现，每个 li 标签内包含一个链接或者按钮等。 2. 使用 CSS3 的 transform 属性实现 3D 效果。我们...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值