HTML绘制齿轮,使用css3制作齿轮loading动画效果

HTML

首先在页面中引入font-awesome文件。

然后在放置动画的位置加上HTML结构：

CSS样式

然后通过下面的CSS样式来制作齿轮的动画效果。

#loader-wrapper {

width: 60px;

height: 60px;

margin: auto;

position: relative;

}

.loader{ position: absolute; }

#loader1{

color: #3A4652;

font-size: 35px;

text-align: center;

width: 35px;

height: 35px;

top: -20px;

left: 3px;

animation: animate-1 1s infinite linear;

}

#loader2{

color: #d72f2b;

font-size: 50px;

text-align: center;

height: 50px;

width: 50px;

right: -12px;

animation: animate-2 1s infinite linear;

}

#loader3{

color: #3A4652;

font-size: 35px;

text-align: center;

width: 35px;

height: 35px;

bottom: -10px;

left: 3px;

animation: animate-3 1s infinite linear;

}

@keyframes animate-1{

100% { transform: rotate(-180deg); }

}

@keyframes animate-2{

100% { transform: rotate(180deg); }

}

@keyframes animate-3{

100% { transform: rotate(-180deg); }

}

HTML绘制齿轮,使用css3制作齿轮loading动画效果相关推荐

CSS3制作波浪的动画效果
一.效果展示首先展示一下制作的效果,这里以图片代替. 二.原始代码主要是通过css3的动画效果,以及html的定位布局共同实现的. 实现代码如下: css部分,样式布局及动画设计: .contai ...
css3做一个loading动画效果（详细思路）
纯css3的动画做效果: 小人来回移动,碰到小球时,小球消失. 首先,html搭建结构: <body><div class="wrapper"><di ...
css3制作左右拉伸动画菜单
微博上看到这样一篇文章(http://js.itivy.com/?p=495),用jquery和css3制作左右拉伸动画菜单,看了下实现效果(http://js.itivy.com/jiaoben96 ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYP ...
满屏飞舞的心HTML动画,CSS3制作蝴蝶飞舞动画
CSS3制作蝴蝶飞舞动画 body{ background-color: lightblue; } #container { perspective: 600px; perspective-origi ...
css3彩色方块loading动画js特效
下载地址 css3彩色方块loading动画加载中特效 dd:
html中怎样制作图片滚动,CSS3 制作的图片滚动效果
实现效果实现代码 html CSS3 @keyframes slidy { 0% { left: 0%; } 20% { left: 0%; } 25% { left: -100%; } 45% { ...
ae怎么做圆一圈圈扩散效果_轻备学院AE特效基础教程 - 如何制作一个带有动画效果村庄烟雾...
熟练运用AE软件做几个偏技巧性并且可以举一反三的超简单小动画,教大家如何制作一个带有动画效果村庄烟雾,你学会了这些小动画,不仅可以熟练运用AE软件,还能对动画制作有深入的了解. 第一步:在AI中绘制插 ...
css高清动图,CSS3+PNG实现GIF动画效果
昨天讲到了JavaScript+PNG模拟GIF动画,今天教大家用css3 + PNG实现GIF动画效果.代码很简单主要用到了css3的animation属性,代码如下: @-webkit-keyfr ...

HTML绘制齿轮,使用css3制作齿轮loading动画效果

HTML绘制齿轮,使用css3制作齿轮loading动画效果相关推荐

最新文章

热门文章