您现在的位置是：网站首页> 编程资料编程资料
使用css3制作齿轮loading动画效果_CSS教程_CSS_网页制作_
2023-11-04
258人已围观
简介 这是一款基于css3齿轮loading动画特效，使用font-awesome字体图标的齿轮图标作为图案，通过CSS3 animation来制作三个齿轮的运动效果。感兴趣的朋友跟随小编一起看看吧
这是一款基于css3齿轮loading动画特效。该特效使用font-awesome字体图标的齿轮图标作为图案，通过CSS3 animation来制作三个齿轮的运动效果。
HTML
首先在页面中引入font-awesome文件。
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); } }总结
以上所述是小编给大家介绍的使用css3制作齿轮loading动画效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
更多特效源码可以关注小编的公众号哦！
相关内容
- 纯 CSS 撸一个漂亮的加载_CSS教程_CSS_网页制作_
- 神之刃四夏卡试炼攻略 秒天秒地秒空气_手机游戏_游戏攻略_
- 植物大战僵尸2功夫世界第7天闯关视频攻略_手机游戏_游戏攻略_
- 天天酷跑4月15日最新进击模式刷分不异常教程分享_手机游戏_游戏攻略_
- 全民砰砰砰破解版刷分刷金币教程 配合最新烧饼辅助_手机游戏_游戏攻略_
- 钓鱼发烧友修改金币无限体力视频教程_手机游戏_游戏攻略_
- 植物大战僵尸2功夫世界第3天闯关视频攻略_手机游戏_游戏攻略_
- 植物大战僵尸2功夫世界第5天闯关视频攻略_手机游戏_游戏攻略_
- 植物大战僵尸2功夫世界第6天闯关视频攻略_手机游戏_游戏攻略_
- 雷霆战机无尽模式有哪些奖励 推荐其排名奖励_手机游戏_游戏攻略_
