html5球型旋转,HTML5/CSS3 彩色圆球交错旋转动画

最新推荐文章于 2022-09-10 11:24:39 发布
最新推荐文章于 2022-09-10 11:24:39 发布
阅读量329 收藏
点赞数
文章标签： html5球型旋转

CSS

语言：

CSSSCSS

确定

body {

background-color: #141414;

margin: 0;

padding: 0;

height: 100%;

}

.content {

width: 300px;

height: 300px;

position: absolute;

top: 50%;

left: 50%;

margin-top: -150px;

margin-left: -150px;

}

.inspiration {

font-size: 14px;

text-align: center;

color: #d0d0d0;

position: absolute;

bottom: 10px;

width: 100%;

}

a {

color: #ffd646;

text-decoration: none;

transition: color 0.3s ease;

}

a:hover {

color: #cb662b;

}

.circles .circle {

display: block !important;

width: 10px !important;

height: 10px !important;

border-radius: 5px !important;

}

.circles .content {

-webkit-animation: rotateContent 25s linear infinite;

animation: rotateContent 25s linear infinite;

}

.circle-container {

position: absolute;

top: 50%;

margin-top: -5px;

left: 50%;

margin-left: -5px;

}

.circle-container .circle {

-webkit-transform: translate3D(-100px, 0, 0);

transform: translate3D(-100px, 0, 0);

}

.circle-container.color1 .circle {

background: #ffd646;

}

.circle-container.color2 .circle {

background: #cb662b;

}

.circle-container.color3 .circle {

background: #509590;

}

.circle-container.color4 .circle {

background: #624092;

}

.circle-container.color1 .circle {

-webkit-animation: movingFirstColor 2.5s ease-in-out infinite alternate;

animation: movingFirstColor 2.5s ease-in-out infinite alternate;

}

.circle-container.color2 .circle {

-webkit-animation: movingSecondColor 2.5s ease-in-out infinite alternate;

animation: movingSecondColor 2.5s ease-in-out infinite alternate;

}

.circle-container.color3 .circle {

-webkit-animation: movingThirdColor 2.5s ease-in-out infinite alternate;

animation: movingThirdColor 2.5s ease-in-out infinite alternate;

}

.circle-container-2 {

-webkit-transform: rotate(24deg);

transform: rotate(24deg);

}

.circle-container-3 {

-webkit-transform: rotate(48deg);

transform: rotate(48deg);

}

.circle-container-4 {

-webkit-transform: rotate(72deg);

transform: rotate(72deg);

}

.circle-container-5 {

-webkit-transform: rotate(96deg);

transform: rotate(96deg);

}

.circle-container-6 {

-webkit-transform: rotate(120deg);

transform: rotate(120deg);

}

.circle-container-7 {

-webkit-transform: rotate(144deg);

transform: rotate(144deg);

}

.circle-container-8 {

-webkit-transform: rotate(168deg);

transform: rotate(168deg);

}

.circle-container-9 {

-webkit-transform: rotate(192deg);

transform: rotate(192deg);

}

.circle-container-10 {

-webkit-transform: rotate(216deg);

transform: rotate(216deg);

}

.circle-container-11 {

-webkit-transform: rotate(240deg);

transform: rotate(240deg);

}

.circle-container-12 {

-webkit-transform: rotate(264deg);

transform: rotate(264deg);

}

.circle-container-13 {

-webkit-transform: rotate(288deg);

transform: rotate(288deg);

}

.circle-container-14 {

-webkit-transform: rotate(312deg);

transform: rotate(312deg);

}

.circle-container-15 {

-webkit-transform: rotate(336deg);

transform: rotate(336deg);

}

.circles .circle-container-2 .circle {

-webkit-animation-delay: 0.1s;

animation-delay: 0.1s;

}

.circles .circle-container-3 .circle {

-webkit-animation-delay: 0.2s;

animation-delay: 0.2s;

}

.circles .circle-container-4 .circle {

-webkit-animation-delay: 0.3s;

animation-delay: 0.3s;

}

.circles .circle-container-5 .circle {

-webkit-animation-delay: 0.4s;

animation-delay: 0.4s;

}

.circles .circle-container-6 .circle {

-webkit-animation-delay: 0.5s;

animation-delay: 0.5s;

}

.circles .circle-container-7 .circle {

-webkit-animation-delay: 0.6s;

animation-delay: 0.6s;

}

.circles .circle-container-8 .circle {

-webkit-animation-delay: 0.7s;

animation-delay: 0.7s;

}

.circles .circle-container-9 .circle {

-webkit-animation-delay: 0.8s;

animation-delay: 0.8s;

}

.circles .circle-container-10 .circle {

-webkit-animation-delay: 0.9s;

animation-delay: 0.9s;

}

.circles .circle-container-11 .circle {

-webkit-animation-delay: 1s;

animation-delay: 1s;

}

.circles .circle-container-12 .circle {

-webkit-animation-delay: 1.1s;

animation-delay: 1.1s;

}

.circles .circle-container-13 .circle {

-webkit-animation-delay: 1.2s;

animation-delay: 1.2s;

}

.circles .circle-container-14 .circle {

-webkit-animation-delay: 1.3s;

animation-delay: 1.3s;

}

.circles .circle-container-15 .circle {

-webkit-animation-delay: 1.4s;

animation-delay: 1.4s;

}

@-webkit-keyframes movingFirstColor {

0% {

-webkit-transform: translate3D(-100px, 0, 0);

transform: translate3D(-100px, 0, 0);

width: 10px;

opacity: 1;

box-shadow: 0px 0px 0px 0px #ffd646;

}

33% {

-webkit-transform: translate3D(-100px, 0, 0);

transform: translate3D(-100px, 0, 0);

width: 10px;

opacity: 1;

box-shadow: 0px 0px 0px 0px #ffd646;

}

50% {

width: 30px;

opacity: 0.7;

box-shadow: 3px 0px 5px 0px #ffd646;

}

66% {

-webkit-transform: translate3D(100px, 0, 0);

transform: translate3D(100px, 0, 0);

width: 10px;

box-shadow: 0px 0px 0px 0px #ffd646;

}

100% {

width: 10px;

opacity: 1;

-webkit-transform: translate3D(100px, 0, 0);

transform: translate3D(100px, 0, 0);

box-shadow: 0px 0px 0px 0px #ffd646;

}

}

@keyframes movingFirstColor {

0% {

-webkit-transform: translate3D(-100px, 0, 0);

transform: translate3D(-100px, 0, 0);

width: 10px;

opacity: 1;

box-shadow: 0px 0px 0px 0px #ffd646;

}

33% {

-webkit-transform: translate3D(-100px, 0, 0);

transform: translate3D(-100px, 0, 0);

width: 10px;

opacity: 1;

box-shadow: 0px 0px 0px 0px #ffd646;

}

50% {

width: 30px;

opacity: 0.7;

box-shadow: 3px 0px 5px 0px #ffd646;

}

66% {

-webkit-transform: translate3D(100px, 0, 0);

transform: translate3D(100px, 0, 0);

width: 10px;

box-shadow: 0px 0px 0px 0px #ffd646;

}

100% {

width: 10px;

opacity: 1;

-webkit-transform: translate3D(100px, 0, 0);

transform: translate3D(100px, 0, 0);

box-shadow: 0px 0px 0px 0px #ffd646;

}

}

@-webkit-keyframes movingSecondColor {

0% {

-webkit-transform: translate3D(-100px, 0, 0);

transform: translate3D(-100px, 0, 0);

width: 10px;

opacity: 1;

box-shadow: 0px 0px 0px 0px #cb662b;

}

33% {

-webkit-transform: translate3D(-100px, 0, 0);

transform: translate3D(-100px, 0, 0);

width: 10px;

opacity: 1;

box-shadow: 0px 0px 0px 0px #cb662b;

}

50% {

width: 30px;

opacity: 0.7;

box-shadow: 3px 0px 5px 0px #cb662b;

}

66% {

-webkit-transform: translate3D(100px, 0, 0);

transform: translate3D(100px, 0, 0);

width: 10px;

box-shadow: 0px 0px 0px 0px #cb662b;

}

100% {

width: 10px;

opacity: 1;

-webkit-transform: translate3D(100px, 0, 0);

transform: translate3D(100px, 0, 0);

box-shadow: 0px 0px 0px 0px #cb662b;

}

}

@keyframes movingSecondColor {

0% {

-webkit-transform: translate3D(-100px, 0, 0);

transform: translate3D(-100px, 0, 0);

width: 10px;

opacity: 1;

box-shadow: 0px 0px 0px 0px #cb662b;

}

33% {

-webkit-transform: translate3D(-100px, 0, 0);

transform: translate3D(-100px, 0, 0);

width: 10px;

opacity: 1;

box-shadow: 0px 0px 0px 0px #cb662b;

}

50% {

width: 30px;

opacity: 0.7;

box-shadow: 3px 0px 5px 0px #cb662b;

}

66% {

-webkit-transform: translate3D(100px, 0, 0);

transform: translate3D(100px, 0, 0);

width: 10px;

box-shadow: 0px 0px 0px 0px #cb662b;

}

100% {

width: 10px;

opacity: 1;

-webkit-transform: translate3D(100px, 0, 0);

transform: translate3D(100px, 0, 0);

box-shadow: 0px 0px 0px 0px #cb662b;

}

}

@-webkit-keyframes movingThirdColor {

0% {

-webkit-transform: translate3D(-100px, 0, 0);

transform: translate3D(-100px, 0, 0);

width: 10px;

opacity: 1;

box-shadow: 0px 0px 0px 0px #509590;

}

33% {

-webkit-transform: translate3D(-100px, 0, 0);

transform: translate3D(-100px, 0, 0);

width: 10px;

opacity: 1;

box-shadow: 0px 0px 0px 0px #509590;

}

50% {

width: 30px;

opacity: 0.7;

box-shadow: 3px 0px 5px 0px #509590;

}

66% {

-webkit-transform: translate3D(100px, 0, 0);

transform: translate3D(100px, 0, 0);

width: 10px;

box-shadow: 0px 0px 0px 0px #509590;

}

100% {

width: 10px;

opacity: 1;

-webkit-transform: translate3D(100px, 0, 0);

transform: translate3D(100px, 0, 0);

box-shadow: 0px 0px 0px 0px #509590;

}

}

@keyframes movingThirdColor {

0% {

-webkit-transform: translate3D(-100px, 0, 0);

transform: translate3D(-100px, 0, 0);

width: 10px;

opacity: 1;

box-shadow: 0px 0px 0px 0px #509590;

}

33% {

-webkit-transform: translate3D(-100px, 0, 0);

transform: translate3D(-100px, 0, 0);

width: 10px;

opacity: 1;

box-shadow: 0px 0px 0px 0px #509590;

}

50% {

width: 30px;

opacity: 0.7;

box-shadow: 3px 0px 5px 0px #509590;

}

66% {

-webkit-transform: translate3D(100px, 0, 0);

transform: translate3D(100px, 0, 0);

width: 10px;

box-shadow: 0px 0px 0px 0px #509590;

}

100% {

width: 10px;

opacity: 1;

-webkit-transform: translate3D(100px, 0, 0);

transform: translate3D(100px, 0, 0);

box-shadow: 0px 0px 0px 0px #509590;

}

}

@-webkit-keyframes rotateContent {

from {

-webkit-transform: rotate(0);

transform: rotate(0);

}

to {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes rotateContent {

from {

-webkit-transform: rotate(0);

transform: rotate(0);

}

to {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

岳国强
关注
HTML5+CSS3小实例：简单好玩的水球加载效果
艾恩小灰灰的博客
05-19 613
HTML5+CSS3做一个简单又好玩的水球加载效果，一个圆形，一个圆角矩形，再加上旋转动画，就能实现这样的水球loading效果！又是属于代码简单，效果惊艳，上手容易的一期案例。
h5球的立体效果_CSS3实现球体旋转
weixin_39655049的博客
12-19 1164
本帖最后由 欧水萍 于 2016-11-11 15:11 编辑CSS3实现球体旋转本教程简述如何用CSS3实现旋转的球体效果如下图所示，球体沿着中间的轴旋转：要理解的知识点1 三维空间的透视属性css属性：perspectiveperspective 属性有两个值，none 和 自己定义的具体像素，例如1000px。注意：当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是...
HTML5实现3D旋转球
04-08
利用HTML5实现的3D旋转球效果~~
html div 球形,CSS3球形
weixin_29214559的博客
06-11 207
html {margin:0px;padding:0px;font-family:微软雅黑;overflow:hidden;width:100%;height:100%;background-color:black}#d1 {position:absolute;top:30%;left:40%;width:300px;height:300px;border:2px solid white;bord...
Html5+CSS3实现3D旋转效果
04-16
Html5+js+CSS3实现3D旋转效果
HTML之旋转球体
liuyingshudian的博客
04-01 1308
效果图如下 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>globe-Animation</title> <style> *{margin: 0px;padding: 0p...
HTML5立体圆环旋转动画特效代码
03-20
在本案例中，"HTML5立体圆环旋转动画特效代码"是一个利用HTML5和CSS3技术实现的交互式视觉效果。这个特效的核心在于CSS3的`-webkit-transform-style`属性，它允许我们在3D空间内保持元素的子元素扁平化或者进行三维...
程序员给女朋友用HTML5制作的3D相册
04-21
HTML5是一种强大的网页开发技术，...总的来说，这个3D相册展示了HTML5、CSS3和JavaScript的协同工作能力，以及WebGL在现代网页开发中的潜力。它鼓励我们思考如何利用这些技术为用户提供更具吸引力和个性化的网络体验。
CSS3圆球弹性预加载动画特效
07-24
首先，"CSS3圆球弹性预加载动画特效"的核心在于利用CSS3的强大功能，特别是其3D变换和动画属性。3D变换可以让元素在屏幕上呈现出立体效果，而动画则可让这些元素动态地改变状态，创造出生动的视觉效果。 1. **CSS3 ...
html5纯css实现导航栏特效
05-25
CSS3引入了许多新特性，如伪类、过渡（transition）、动画（animation）等，这些都可以用来创建动态的导航栏效果。 1. **伪类**：如`:hover`、`:active`和`:focus`，可以改变鼠标悬停、元素被点击或获取焦点时的...
CSS3彩色旋转球体
12-03
简单的CSS3彩色旋转球体，炫酷的CSS3入门实例，练练手吧。
html5 canvas 三维旋转的水晶球特效.rar
07-10
html5 canvas 三维旋转的水晶球特效，除了使用CSS3技术外，还引用了一个regl.min.js特效库，类似jquery的插件库。其实这个球看上去更像是一个光棱球，能看到反射出的光线，另外背景的渲染也很到位，使整体的三维效果更强烈。
H5 Canvas彩色圆圈旋转动画特效特效代码
03-20
H5 Canvas彩色圆圈旋转动画特效是一款基于css3 animation属性和SVG制作点击按钮圆形进度条加载动画特效。
H5 Canvas彩色圆圈旋转动画特效
06-24
H5 Canvas彩色圆圈旋转动画特效是一款基于css3 animation属性和SVG制作点击按钮圆形进度条加载动画特效。
圆球转动显示加载中特效
11-08
圆球转动显示加载中 圆球转动显示加载中 圆球转动显示加载中 圆球转动显示加载中 圆球转动显示加载中
使用CSS+html 写3D彩色圆球旋转
qq_43313021的博客
03-31 1546
自学了几天的网页设计学到了CSS，之前看到旋转的方块，突然想到要写个旋转的球。我们都知道球是圆的所以要360°。所以接下来是创建360个盒子外加一个包容所有的盒子。一共361个盒子。所以以下就是创建盒子的代码： 创建盒子 <div class="circle"> <div class="circle1"></div> <div class=...
【HTML——旋转光圈特效】（效果+代码）
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
09-10 732
分享一个HTML旋转光圈特效。
html5圆形自动旋转,HTML5+CSS3从入门到精通之利用CSS3渐变效果实现圆环旋转效果...
weixin_29061509的博客
05-31 492
本篇文章探讨了HTML5+CSS3从入门到精通之利用CSS3渐变效果实现圆环旋转效果，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。<* {margin: 0;padding: 0;}.stage {width: 200px;height: 130px;margin: 100px auto;position: relative;perspective: 1300px;p...
html圆点光晕特效,使用CSS3做出带有光晕流星旋转光环的效果
weixin_42299427的博客
06-01 1296
今天教大家的这一份代码是用CSS3做出带有光晕的流星旋转光环的效果，感兴趣的朋友可以自己动手实践一下，案列代码如下：html {width: 100%;height: 100%;}body {width: 100%;height: 100%;overflow: hidden;background-image: -webkit-linear-gradient(90deg, #395ecb 0%, #...
Y5X09球型云台详细安装与安全指南
本篇文档是关于Y5X09球型云台的详细用户手册，由天津市亚安科技股份有限公司发布。它包含了重要的安全注意事项、产品介绍、安装指南以及维护等内容。 首先，第一章"安全注意事项"强调了用户在使用前必须仔细阅读...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值