内容简介:这是一款超酷CSS3 loading预加载动画特效。该loading特效共有4种不同的效果,分别通过不同的CSS3 keyframes帧动画来完成。
这是一款超酷CSS3 loading预加载动画特效。该loading特效共有4种不同的效果,分别通过不同的CSS3 keyframes帧动画来完成。
HTML结构
4种loading预加载动画的HTML结构分别如下:
<!-- 效果一 --> <div class="spinner-box"> <div class="circle-border"> <div class="circle-core"></div> </div> </div> <!-- 效果二 --> <div class="spinner-box"> <div class="configure-border-1"> <div class="configure-core"></div> </div> <div class="configure-border-2"> <div class="configure-core"></div> </div> </div> <!-- 效果三 --> <div class="spinner-box"> <div class="pulse-container"> <div class="pulse-bubble pulse-bubble-1"></div> <div class="pulse-bubble pulse-bubble-2"></div> <div class="pulse-bubble pulse-bubble-3"></div> </div> </div> <!-- 效果四 --> <div class="spinner-box"> <div class="solar-system"> <div class="earth-orbit orbit"> <div class="planet earth"></div> <div class="venus-orbit orbit"> <div class="planet venus"></div> <div class="mercury-orbit orbit"> <div class="planet mercury"></div> <div class="sun"></div> </div> </div> </div> </div> </div>
CSS样式
然后分别为它们添加下面的CSS样式。
/* KEYFRAMES */ @keyframes spin { from { transform: rotate(0); } to{ transform: rotate(359deg); } } @keyframes configure-clockwise { 0% { transform: rotate(0); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(359deg); } } @keyframes configure-xclockwise { 0% { transform: rotate(45deg); } 25% { transform: rotate(-45deg); } 50% { transform: rotate(-135deg); } 75% { transform: rotate(-215deg); } 100% { transform: rotate(-305deg); } } @keyframes pulse { from { opacity: 1; transform: scale(1); } to { opacity: .25; transform: scale(.75); } } /* GRID STYLING */ * { box-sizing: border-box; } body { min-height: 100vh; background-color: #37474f; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; } .spinner-box { width: 300px; height: 300px; display: flex; justify-content: center; align-items: center; background-color: transparent; } /* SPINNING CIRCLE */ .circle-border { width: 150px; height: 150px; padding: 3px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: rgb(63,249,220); background: linear-gradient(0deg, rgba(63,249,220,0.1) 33%, rgba(63,249,220,1) 100%); animation: spin .8s linear 0s infinite; } .circle-core { width: 100%; height: 100%; background-color: #37474f; border-radius: 50%; } /* X-ROTATING BOXES */ .configure-border-1 { width: 115px; height: 115px; padding: 3px; position: absolute; display: flex; justify-content: center; align-items: center; background: #ffab91; animation: configure-clockwise 3s ease-in-out 0s infinite alternate; } .configure-border-2 { width: 115px; height: 115px; padding: 3px; left: -115px; display: flex; justify-content: center; align-items: center; background: rgb(63,249,220); transform: rotate(45deg); animation: configure-xclockwise 3s ease-in-out 0s infinite alternate; } .configure-core { width: 100%; height: 100%; background-color: #37474f; } /* PULSE BUBBLES */ .pulse-container { width: 120px; display: flex; justify-content: space-between; align-items: center; } .pulse-bubble { width: 20px; height: 20px; border-radius: 50%; background-color: #3ff9dc; } .pulse-bubble-1 { animation: pulse .4s ease 0s infinite alternate; } .pulse-bubble-2 { animation: pulse .4s ease .2s infinite alternate; } .pulse-bubble-3 { animation: pulse .4s ease .4s infinite alternate; } /* SOLAR SYSTEM */ .solar-system { width: 250px; height: 250px; display: flex; justify-content: center; align-items: center; } .orbit { position: relative; display: flex; justify-content: center; align-items: center; border: 1px solid #ffffffa5; border-radius: 50%; } .earth-orbit { width: 165px; height: 165px; -webkit-animation: spin 12s linear 0s infinite; } .venus-orbit { width: 120px; height: 120px; -webkit-animation: spin 7.4s linear 0s infinite; } .mercury-orbit { width: 90px; height: 90px; -webkit-animation: spin 3s linear 0s infinite; } .planet { position: absolute; top: -5px; width: 10px; height: 10px; border-radius: 50%; background-color: #3ff9dc; } .sun { width: 35px; height: 35px; border-radius: 50%; background-color: #ffab91; }
以上所述就是小编给大家介绍的《超酷的CSS3 loading预加载动画特效》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Python 3.8 的超酷新功能
- Python 3.8 的超酷新功能
- 超酷的CSS3复古风格和字体的3D按钮
- 让你的程序炫起来!少有人知道但超酷的 Python 进度条开源库
- 如何避免特效渲染出错?
- WebGL实现雨水特效实验
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
程序是怎样跑起来的
[日] 矢泽久雄 / 李逢俊 / 人民邮电出版社 / 2015-4 / 39.00元
本书从计算机的内部结构开始讲起,以图配文的形式详细讲解了二进制、内存、数据压缩、源文件和可执行文件、操作系统和应用程序的关系、汇编语言、硬件控制方法等内容,目的是让读者了解从用户双击程序图标到程序开始运行之间到底发生了什么。同时专设了“如果是你,你会怎样介绍?”专栏,以小学生、老奶奶为对象讲解程序的运行原理,颇为有趣。本书图文并茂,通俗易懂,非常适合计算机爱好者及相关从业人员阅读。一起来看看 《程序是怎样跑起来的》 这本书的介绍吧!