先上图
html代码
>加载中...
其中
container是背景，trans是加载是旋转的正方形CSS基本样式
* {
margin: 0;
padding: 0;
}html, body {
width: 100%;
height: 100vh;
}.container {
position: relative;
width: 100%;
height: 100vh;
/* 设置弹性盒模型 */
display: flex;
justify-content: center;
align-items: center;
background-color: #37474F;
}.trans {
position: absolute;
width: 120px;
height: 120px;
/* 设置弹性盒模型 */
display: flex;
justify-content: center;
align-items: center;
background: #37474F;
}span {
position: absolute;
color: #fff;
z-index: 1;
}
实现后的效果:
文章图片
实现旋转框样式
.trans::after {
content: "";
position: absolute;
width: 115px;
height: 115px;
background: #37474F;
/* 添加边框 */
border: 4px solid #3ff9dc;
/* 初始化位置 */
transform: rotate(45deg);
/* 添加动画、动画时间和样式 */
animation: rotate1 3s ease-in-out infinite alternate;
}.trans::before {
content: "";
position: absolute;
width: 115px;
height: 115px;
/* 添加边框 */
border: 4px solid #ffab91;
/* 初始化位置 */
transform: rotate(-90deg);
/* 添加动画、动画时间和样式 */
animation: rotate2 3s ease-in-out infinite alternate;
}
实现后的效果:
文章图片
添加旋转动画
@keyframes rotate1 {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(-90deg);
}
50% {
transform: rotate(-180deg);
}
75% {
transform: rotate(-270deg);
}
100% {
transform: rotate(-360deg);
}
}@keyframes rotate2 {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
最终效果:Loading animation
整体代码 html文件：
加载动画 - 锐客网
>加载中...
【web前端|web前端——CSS实现加载页面效果】CSS文件：
* {
margin: 0;
padding: 0;
}html, body {
width: 100%;
height: 100vh;
}.container {
position: relative;
width: 100%;
height: 100vh;
/* 设置浮动 */
display: flex;
justify-content: center;
align-items: center;
background-color: #37474F;
}.trans {
position: absolute;
width: 120px;
height: 120px;
/* 设置浮动 */
display: flex;
justify-content: center;
align-items: center;
background: #37474F;
}span {
position: absolute;
color: #fff;
z-index: 1;
}.trans::after {
content: "";
position: absolute;
width: 115px;
height: 115px;
background: #37474F;
/* 添加边框 */
border: 4px solid #3ff9dc;
/* 初始化位置 */
transform: rotate(45deg);
/* 添加动画、动画时间和样式 */
animation: rotate1 3s ease-in-out infinite alternate;
}.trans::before {
content: "";
position: absolute;
width: 115px;
height: 115px;
/* 添加边框 */
border: 4px solid #ffab91;
/* 初始化位置 */
transform: rotate(-90deg);
/* 添加动画、动画时间和样式 */
animation: rotate2 3s ease-in-out infinite alternate;
}@keyframes rotate1 {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(-90deg);
}
50% {
transform: rotate(-180deg);
}
75% {
transform: rotate(-270deg);
}
100% {
transform: rotate(-360deg);
}
}@keyframes rotate2 {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
推荐阅读
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- JavaScript|JavaScript之DOM增删改查(重点)
- 网络|一文彻底搞懂前端监控
- css|我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧（）
- css|css三角的做法及其案例
- css|css中元素的显示与隐藏
- JavaScript|web前端入门到实战（好用的Js图表库）
- JavaWeb|JavaWeb学习——CSS
- flex|C语言-使用goto语句从循环中跳出
- java|你跳一次涨多少（今天见识到跳槽天花板！！）