在使用了css绘制三角形，css绘制圆形后，搞了个今天这么高端的玩意，原本是准备创建婕洛的标识，但是发现线条控制不好。
所以选择精灵球来作为绘制的对象，如下
是不是瞬间有了童年的感觉。
代码实现
需用要的知识有
- 背景图渐变
- Transform 变换
- Animation 动画
- 兼容性问题
- /*创建外边框*/
- .border_round {
- margin: 350px auto;
- width: 100px;
- height: 100px;
- border: 1px solid #afafaf;
- }
- /*创建球体*/
- .half_round {
- width: 50px;
- height: 50px;
- border-radius: 50%;
- border: 1px solid #333;
- margin: 25px 25px;
- /*背景图渐变,分了三个部分，透明部分（最好修改成白色），中间横条的部分，底部红色部分*/
- background: -webkit-linear-gradient(transparent 0%, transparent 45%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 1) 55%, rgba(255, 0, 0, 1) 55%, rgba(255, 0, 0, 1) 100%);
- background: -moz-linear-gradient(transparent 0%, transparent 45%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 1) 55%, rgba(255, 0, 0, 1) 55%, rgba(255, 0, 0, 1) 100%);
- background: linear-gradient(transparent 0%, transparent 45%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 1) 55%, rgba(255, 0, 0, 1) 55%, rgba(255, 0, 0, 1) 100%);
- /*动画执行*/
- -webkit-animation: round_rotate 0.8s linear infinite;
- -moz-animation: round_rotate 0.8s linear infinite;
- animation: round_rotate 0.8s linear infinite;
- position: absolute;
- }
- /*创建球体中间的按钮*/
- .half_round_more {
- position: relative;
- left: 21px;
- top: 21px;
- width: 4px;
- height: 4px;
- border: 2px solid #333;
- border-radius: 50%;
- background: #fff;
- }
- /*动画动作*/
- @-webkit-keyframes round_rotate {
- 0% {
- transform: rotate(0deg);
- }
- 50% {
- transform: rotate(150deg);
- }
- 100% {
- transform: rotate(360deg);
- }
- }
- @-moz-keyframes round_rotate {
- 0% {
- transform: rotate(0deg);
- }
- 50% {
- transform: rotate(150deg);
- }
- 100% {
- transform: rotate(360deg);
- }
- }
- @keyframes round_rotate {
- 0% {
- transform: rotate(0deg);
- }
- 50% {
- transform: rotate(150deg);
- }
- 100% {
- transform: rotate(360deg);
- }
- }
- }
html部分
- <div class="border_round">
- <div class="half_round">
- <div class="half_round_more"></div>
- </div>
- </div>