html如何利用css3做一个loading动态过渡效果,下面编程教程网小编给大家简单介绍一下实现代码!
html代码:
<div class="loading"></div>
css动态效果代码:
body{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #69a7f7;
}
.loading,
.loading:before,
.loading:after {
background: #FFF;
-webkit-animation: dynamic 1s infinite ease-in-out;
animation: dynamic 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loading:before,
.loading:after {
position: absolute;
top: 0;
content: '';
}
.loading:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loading {
text-indent: -9999em;
margin: 8em auto;
position: relative;
font-size: 11px;
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loading:after {
left: 1.5em;
}
@-webkit-keyframes dynamic {
0%,
80%,
100% {
box-shadow: 0 0 #FFF;
height: 4em;
}
40% {
box-shadow: 0 -2em #ffffff;
height: 5em;
}
}
@keyframes dynamic {
0%,
80%,
100% {
box-shadow: 0 0 #FFF;
height: 4em;
}
40% {
box-shadow: 0 -2em #ffffff;
height: 5em;
}
}
以上是编程学习网小编为您介绍的“css3加载中loading效果代码”的全面内容,想了解更多关于 前端知识 内容,请继续关注编程基础学习网。
沃梦达教程
本文标题为:css3加载中loading效果代码
基础教程推荐
猜你喜欢
- vue 中 get / delete 传递数组参数方法 2023-10-08
- 通过本地加载ga.js文件提高Google Anlytics性能 2024-04-15
- 使用JS location实现搜索框历史记录功能 2023-12-01
- 深入剖析CSS变形transform(3d) 2024-03-10
- 浅谈Ajax技术实现页面无刷新 2022-12-15
- 微信小程序 跳转方式总结 2024-01-03
- springmvc 发送ajax出现中文乱码的解决方法汇总 2022-12-15
- w3c技术架构介绍 2022-10-16
- Json格式详解 2023-08-12
- jQuery AJAX实现调用页面后台方法 2022-12-28