css3星球围绕轨迹开场动画特效 带流星效果
2024-05-18 00:04:38
css3星球围绕轨迹开场动画特效 带流星效果
.star 控制流星效果，角度速度可自定义
<!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>css3星球围绕轨迹开场动画特效 带流星效果相关推荐
- html5+css3满天星星音乐背景动画特效(超炫酷)
css3满天星星音乐背景动画特效 css3属性绘制唯美的满天星星和audio MP3音乐结合背景动画特效. 作品介绍 1.网页作品简介方面 :css3属性绘制唯美的满天星星和audio MP3音乐结合 ...
- html页面飘落花瓣不是全屏,jQuery css3全屏花瓣飘落动画特效
特效描述:jQuery css3 全屏花瓣飘落 动画特效.jQuery css3从上往下飘落爱心花瓣动画特效.(不兼容IE6,7,8) 代码结构 1. 引入JS 2. HTML代码 $(functio ...
- html给文字加动态效果,20种配合场景的CSS3鼠标滑过文字动画特效
这是一组非常有创意的配合场景使用的CSS3鼠标滑过文字动画特效.这组鼠标滑过特效中,以20张不同的图片作为不同的场景,例如图片是一条公路,鼠标滑过这上面的文字时,就会在文字下边出现一条公路的动画效果. ...
- css3.0动画,CSS3.0实现霓虹灯按钮动画特效的示例代码
今天给大家分享一个用CSS 3.0实现的霓虹灯按钮动画特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. CSS 3.0实现霓虹灯按钮动画特效 * { font-family: '微软雅黑', ...
- html语言鼠标悬停特效,CSS3鼠标悬停文字幻影动画特效
这是一款CSS3鼠标悬停文字幻影动画特效.该特效利用before和after伪元素来制作当鼠标悬停在超链接文本上的时候的幻影效果. 使用方法 在页面中引入bootstrap.css.jquery和ph ...
- 基于jQ+CSS3页面滚动内容元素动画特效
今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Oper ...
- 汉堡式折叠html,纯CSS3菜单汉堡包按钮变形动画特效
这是一款非常有趣的纯CSS3菜单汉堡包按钮变形动画特效.该特效共有9种不同的按钮变形动画效果,这些效果都是使用CSS3帧动画完成的,效果非常的酷. 制作方法 HTML结构 该按钮变形动画使用嵌套 的H ...
- html怎么做一个动态广告图,用CSS3实现广告的展示动画特效
用CSS3实现广告的展示动画特效,不需要用JS哦,大家可以学习下,很多地方都可以用到,还在等什么呢,代码奉上啦! 展示图: DEMO代码:html> 用CSS3实现广告的展示动画特效 - Web ...
- 纯CSS3炫酷3D星空动画特效
效果: 源码: <!DOCTYPE html> <html lang="zh"> <head><meta charset="UT ...
最新文章
- 31个好用的 Python 字符串方法，建议收藏！
- 163k地方门户网站系统团购定时结束限量控制
- 文巾解题 876. 链表的中间结点
- 《高性能网站构建实战》 目录--转
- 【机器视觉】 dev_open_window算子
- 【渝粤题库】国家开放大学2021春2321物流学概论题目
- C#开发微信门户及应用(27)-公众号模板消息管理
- java中使用json import_JAVA中使用JSON
- 蓝桥杯1427: -买不到的数目（百钱百鸡问题变体）
- Docker安装vi命令
- Document Star证件照大师升级版 for Mac(支持ps2021)
- Unity官网中文API地址
- 腾讯云短信 Node.js SDK
- python和R的区别
- 怎么将英文的PDF翻译成中文的
- Sun的JDK7、OpenJDK及IcedTea释疑
- redhat8安装rpm提示package does not verify: no digest
- CNZZ后台偷偷跑广告
- JAVA之easyUI
- 获取get请求中的参数