AI 助理
备案控制台
开发者社区 云原生 文章 正文

css3星球围绕轨迹开场动画特效 带流星效果

2018-09-27 2650
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： css3星球围绕轨迹开场动画特效 带流星效果 .star 控制流星效果，角度速度可自定义 <style> .two body { background: url(../images/group.

css3星球围绕轨迹开场动画特效 带流星效果

.star 控制流星效果，角度速度可自定义
1538011636242
1538012348459

<!DOCTYPE html>
<html class="two">
<style>
.two body {
    background: url(../images/group.png) no-repeat;
    background-size: 100%;
    overflow: hidden;
}
.two body:before {
    content: '';
    display: table;
}
.two .logo {
    display: block;
    margin: 226px auto 0;
    width: 168px;
    border-radius: 999px;
}
.two .weui-footer {
    margin-top: 30px;
    font-size: 14px;
    color: #000;
}
.two .container {
    position: absolute;
    top: 199px;
    left: 50%;
    margin-left: -111px;
    width: 222px;
    height: 222px;
}
.two .orbit {
    width: 2px;
    height: 2px;
    background: #F6B42C;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 9;
}
.two .orbit-1 {
    width: 4px;
    height: 4px;
    -webkit-animation: orbit-1 5s linear infinite;
    animation: orbit-1 5s linear infinite;
}
.two .orbit-2 {
    width: 5px;
    height: 5px;
    -webkit-animation: orbit-2 10s linear infinite;
    animation: orbit-2 10s linear infinite;
}
.two .orbit-3 {
    width: 3px;
    height: 3px;
    -webkit-animation: orbit-3 15s linear infinite;
    animation: orbit-3 15s linear infinite;
}
.two .orbit-4 {
    -webkit-animation: orbit-4 20s linear infinite;
    animation: orbit-4 20s linear infinite;
}
.two .orbit-5 {
    width: 6px;
    height: 6px;
    -webkit-animation: orbit-5 25s linear infinite;
    animation: orbit-5 25s linear infinite;
}
.two .orbit-6 {
    -webkit-animation: orbit-6 30s linear infinite;
    animation: orbit-6 30s linear infinite;
}
@keyframes orbit-1 {
    0% {
        -webkit-transform: rotate(0deg) translateX(-95px) rotate(0deg);
        transform: rotate(0deg) translateX(-95px) rotate(0deg);
    }
    100% {
       -webkit-transform: rotate(360deg) translateX(-95px) rotate(-360deg);
        transform: rotate(360deg) translateX(-95px) rotate(-360deg);
    }
}
@keyframes orbit-2 {
    0% {
        -webkit-transform: rotate(0deg) translateX(-110px) rotate(0deg);
        transform: rotate(0deg) translateX(-110px) rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg) translateX(-110px) rotate(-360deg);
        transform: rotate(360deg) translateX(-110px) rotate(-360deg);
    }
}
@keyframes orbit-3 {
    0% {
        -webkit-transform: rotate(0deg) translateX(95px) rotate(0deg);
        transform: rotate(0deg) translateX(95px) rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg) translateX(95px) rotate(-360deg);
        transform: rotate(360deg) translateX(95px) rotate(-360deg);
    }
}
@keyframes orbit-4 {
    0% {
        -webkit-transform: rotate(0deg) translateX(110px) rotate(0deg);
        transform: rotate(0deg) translateX(110px) rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg) translateX(110px) rotate(-360deg);
        transform: rotate(360deg) translateX(110px) rotate(-360deg);
    }
}
@keyframes orbit-5 {
    0% {
        -webkit-transform: rotate(0deg) translateX(125px) rotate(0deg);
        transform: rotate(0deg) translateX(125px) rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg) translateX(125px) rotate(-360deg);
        transform: rotate(360deg) translateX(125px) rotate(-360deg);
    }
}
@keyframes orbit-6 {
    0% {
        -webkit-transform: rotate(0deg) translateX(140px) rotate(0deg);
        transform: rotate(0deg) translateX(140px) rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg) translateX(140px) rotate(-360deg);
        transform: rotate(360deg) translateX(140px) rotate(-360deg);
    }
}
.two .circle {
    position: absolute;
    bottom: -80px;
    left: -30px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #d9d9d9;
    opacity: .8;
    animation: trail 10s linear infinite;
}
@keyframes trail {
    0% {
        -webkit-transform: rotate(0deg) translateX(60px) rotate(0deg);
        transform: rotate(0deg) translateX(60px) rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(0deg) translateY(60px) rotate(0deg);
        transform: rotate(0deg) translateY(60px) rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg) translateX(60px) rotate(-360deg);
        transform: rotate(360deg) translateX(60px) rotate(-360deg);
    }
}
.two .star {
    position: absolute;
    left: 0;
    top: 50px;
    width: 1px;
    height: 1px;
    background-color: white;
    transform: rotate(30deg);
    -webkit-animation: shooting 5s linear infinite;
    animation: shooting 5s linear infinite;
}
.two .star:before {
    content: "";
    position: absolute;
    width: 100px;
    height: 1px;
    right: 1px;
    top: 0;
    background: -webkit-linear-gradient(left, transparent 0%, rgba(255, 255, 255, 0.4) 100%);
    background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.4) 100%);
}
.two .star-2 {
    top: 200px;
    -webkit-animation: shootings 8s 1s linear infinite;
    animation: shootings 8s 1s linear infinite;
}
@keyframes shooting {
    0% {
        left: -100px;
    }
    100% {
        top: 350px;
        left: calc(100% + 100px);
    }
}
@keyframes shootings {
    0% {
        left: -100px;
    }
    100% {
        top: 500px;
        left: calc(100% + 100px);
    }
}
</style>

<body ontouchstart>
        <img class="logo" src="./images/logo.png" alt="图片加载失败" />
        <div class="weui-footer">
            <p class="weui-footer__text">big data health consultance</p>
        </div>
        <div class="container">
            <div class="orbit orbit-1"></div>
            <div class="orbit orbit-2"></div>
            <div class="orbit orbit-3"></div>
            <div class="orbit orbit-4"></div>
            <div class="orbit orbit-5"></div>
            <div class="orbit orbit-6"></div>
        </div>
        <div class="circle"></div>
        <div class="star star-1"></div>
        <div class="star star-2"></div>
</body>
</html>
文章标签：
容器
关键词：
CSS动画
CSS动画特效
CSS轨迹
佀无极
目录
相关文章
派大鑫的工作室
|
2月前
|
机器学习/深度学习 前端开发 JavaScript
CSS动画知识点
CSS动画知识点
派大鑫的工作室
76 2
疯狂的猿
|
27天前
纯css3实现的百分比渐变进度条加载动画源码
纯css3实现的百分比渐变进度条加载动画特效源码
疯狂的猿
53 31
光明顶阳顶天
|
2月前
|
前端开发 搜索推荐 UED
实现 CSS 动画效果的兼容性
【10月更文挑战第16天】实现 CSS 动画效果的兼容性需要对不同浏览器的特性有深入的了解，并采取适当的策略和方法。通过不断的实践和优化，你可以在各种浏览器上创造出流畅、美观且兼容的动画效果，为用户带来更好的体验。在实际开发中，要密切关注浏览器的发展动态，及时掌握最新的兼容性技巧和解决方案，以确保你的动画设计能够在广泛的用户群体中得到良好的呈现。
光明顶阳顶天
113 58
疯狂的猿
|
12天前
|
Web App开发 移动开发 JavaScript
纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
这是一款基于纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码。画面中左下角是一个圆锥形礼炮卡通效果，呈现出节日庆祝时礼花爆破、五彩纸屑纷飞的动画特效。整体动画效果采用纯css3+svg实现，没有引入任何外部图形或js脚本元素。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
疯狂的猿
30 6
众所周知
|
22天前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画，这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动，增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析，旨在为设计师和开发者提供实用指导。
众所周知
50 7
疯狂的猿
|
27天前
CSS3制作的聚光灯下倒影文字选装动画特效源码
CSS3聚光灯下倒影文字特效是一段基于CSS3实现的聚光灯下带倒影的文字旋转动画效果代码，具有真实的视觉感，同时文字还会在旋转过程中显示出灯光的反射效果，很有意思，欢迎对此段代码感兴趣的朋友前来下载使用。
疯狂的猿
29 6
john散漫
|
1月前
|
移动开发 前端开发 JavaScript
除了 CSS3，还有哪些技术可以实现动画效果？
除了 CSS3，还有哪些技术可以实现动画效果？
john散漫
53 5
疯狂的猿
|
27天前
纯css3加载loading发光变色动画代码
纯css3加载loading发光变色动画特效代码是一款基于css3 keyframes属性实现的发光变色圆点串联旋转loading加载动画
疯狂的猿
22 2
疯狂的猿
|
28天前
|
Web App开发 前端开发 iOS开发
CSS加载动画大全 126种
CSS加载动画大全是一个css Loaders加载动画特效汇总，一共包含126种加载动画效果，不同样式不同图案，简单实用，一览包含所有，会让你在等待的过程中，体验视觉盛宴，给用户不一般的加载体验，欢迎下载试试！代码适用浏览器：搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗，是一款不错的的特效插件，希望大家喜欢！
疯狂的猿
26 2
我是快乐的嘟嘟
|
29天前
|
JavaScript 前端开发
CSS3 动画和 JavaScript 动画的性能比较
具体的性能表现还会受到许多因素的影响，如动画的复杂程度、浏览器的性能、设备的硬件条件等。在实际应用中，需要根据具体情况选择合适的动画技术。
我是快乐的嘟嘟
24 1