CSS3绘制超炫的上下起伏波动进度加载动画
网站建设 2021-07-03 08:15www.dzhlxh.cn网站建设
先看看效果图：
CSS Code复制内容到剪贴板
- #loader1,
- #loader1:before,
- #loader1:after {
- background: #f2fa08;
- -webkit-animation: load1 1s infinite ease-in-out;
- animation: load1 1s infinite ease-in-out;
- width: 1em;
- height: 4em;
- }
- #loader1:before,
- #loader1:after {
- position: absolute;
- top: 0;
- content: '';
- }
- #loader1:before {
- left: -1.5em;
- }
- #loader1 {
- text-indent: -9999em;
- margin: 50px 50px;
- position: relative;
- float: left;
- font-size: 11px;
- -webkit-animation-delay: 0.16s;
- animation-delay: 0.16s;
- }
- #loader1:after {
- left: 1.5em;
- -webkit-animation-delay: 0.32s;
- animation-delay: 0.32s;
- }
- @-webkit-keyframes load1 {
- 0%,
- 80%,
- 100% {
- box-shadow: 0 0 #f2fa08;
- height: 4em;
- }
- 40% {
- box-shadow: 0 -2em #f2fa08;
- height: 5em;
- }
- }
- @keyframes load1 {
- 0%,
- 80%,
- 100% {
- box-shadow: 0 0 #f2ff08;
- height: 4em;
- }
- 40% {
- box-shadow: 0 -2em #f2ff08;
- height: 5em;
- }
- }
以上就是本文的全部内容，希望对大家的学习有所帮助。