<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3环形动画</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{ margin: 50px; text-align: center;}
h3{clear: both; overflow: hidden; text-align: left;}
.box{
border-radius:100%;
padding: 20px;
width: 300px;
height: 300px;
background: yellow;
color: #fff;
float: left;
}
.text{
margin-top: 100px;
text-align: center;
font-size: 20px;
font-weight: bold;
color: #f00;
}
.box .ball{
border-radius: 100%;
width: 50px;
height: 50px;
font:bold 14px/50px Arial;
text-align: center;
background: blue;
margin: 0 auto;
}
@keyframes spin{
to{transform: rotate(1turn);}
}
.box1 .ball{
animation:spin 3s infinite linear;
transform-origin: 50% 50%;
}
.box2 .ball{
animation:spin 3s infinite linear;
transform-origin: 50% 150px;
}
@keyframes spin-reverse{
from{
transform:rotate(1turn);
}
}
.box3 .ball{
animation:spin 3s infinite linear;
transform-origin: 50% 150px;
}
.box3 .inner{
animation: spin-reverse 3s infinite linear;
}
.box4 .ball{
animation:spin 3s infinite linear;
transform-origin:50% 150px;
}
.box4 .inner{
animation:inherit;
animation-direction: reverse;
}
@keyframes spin2{
from{
transform: translate(50%, 150px)
rotate(0turn)
translate(-50%, -150px)
translate(50%,50%)
rotate(1turn)
translate(-50%,-50%)
}
to{
transform: translate(50%, 150px)
rotate(1turn)
translate(-50%, -150px)
translate(50%,50%)
rotate(0turn)
translate(-50%,-50%)
}
}
.box5 .ball{
animation: spin2 3s infinite linear;
}
</style>
</head>
<body>
<h3 id="#demo1">演示1</h3>
<div class="box box1">
<div class="ball">Ball</div>
<div class="text">http://onestopweb.iteye.com/</div>
</div>
<div class="box box2">
<div class="ball">Ball</div>
<div class="text">一站式共享网络</div>
</div>
<h3 id="demo2">演示2</h3>
<div class="box box3">
<div class="ball">
<div class="inner">Ball</div>
</div>
</div>
<div class="box box4">
<div class="ball">
<div class="inner">Ball</div>
</div>
</div>
<h3 id="demo3">演示3</h3>
<div class="box box5">
<div class="ball">Ball</div>
</div>
</body>
</html>
效果图：
相关推荐
【CSS3科技感环形菜单动画特效】 在Web开发领域，CSS3（层叠样式表第三版）已经成为了实现各种视觉效果和动态交互的核心技术。本主题“CSS3科技感环形菜单动画特效”着重探讨如何利用CSS3的特性来创建具有未来感的...
1. CSS3动画：利用CSS3的动画属性，如`@keyframes`，可以创建各种复杂的动效，如旋转、缩放、平移等。 2. JavaScript：通过JavaScript库，如GreenSock (GSAP) 或jQuery，可以实现更高级的交互式加载动画。 3. SVG...
3个不同风格的Calendar日历日期选择js插件I4个CSS3炫酷文字动画特效 4个jQuery手机移动端幻灯片swipeslider插件]4个很漂亮的鼠标滑过超链接jQuery动画特效T4个简单实用的jQuery超链接动画特效 4款echarts.js扁平图形...
本文将深入探讨如何使用CSS3来创建十种不同的加载效果，这些效果利用了CSS3的新特性，如动画、渐变、变换和透明度控制等。由于部分效果采用了SVG（Scalable Vector Graphics）技术，因此它们可能不适用于低版本的IE...
在网页设计领域，动画加载特效...总之，"动画加载特效h5"涉及HTML5、SVG和CSS3的综合运用，通过它们的协同工作，可以创建出既美观又实用的加载动画。了解并掌握这些技术，将有助于提升网页的用户体验，让等待不再枯燥。
HTML5 3D动画效果非常多，我们在html5tricks上也分享过一些，比如3D HTML5 Logo动画，旋转效果非常...今天我们来看一款基于HTML5的立体圆环旋转动画，该特效主要利用了CSS3的-webkit-transform-style属性，效果非常酷。
CSS3提供了许多新的选择器和样式属性，如转换（transform）、过渡（transition）和动画（animation），这些都能用来创建复杂的视觉效果。例如，我们可以使用`border-radius`属性创建圆形菜单，通过`transform`改变...
【描述】：“在Taro框架下，开发微信小程序的环形进度条涉及到CSS3动画、自定义组件以及Taro的API调用等多个技术层面。本文将详细介绍如何通过Taro的特性，结合微信小程序的底层能力，实现动态、可定制的环形进度条...
总结，H5转盘源码涉及到的技术包括HTML5布局、CSS3动画和JavaScript交互，开发者需要理解这些技术才能有效地修改和优化转盘效果。同时，了解和掌握相关资源链接可以帮助进一步提升技能，以及实现转盘的线上部署。
3. **动态加载**: `canvas-arc-draw-master`项目中的环形进度条是动态加载的，意味着随着加载进度的增加，圆弧的长度会逐渐增长。这通常通过监听事件或者定时器来更新进度，并调用`clearRect()`清除旧的进度，再用新...
此外，CSS3的新特性如阴影、过渡和动画，可以使统计图更加生动。 接着，JavaScript部分负责处理数据和动态行为。jQuery圆形统计插件通常包含一段JavaScript代码，这段代码会监听事件、计算百分比、更新canvas画布，...