CSS3动画之loading-1

来源：互联网发布：磁盘修复软件编辑：程序博客网时间：2024/06/05 16:45

loading效果图如下：
这里写图片描述

代码如下：

* {  padding: 0;  margin: 0;}body {  background: #ffffff;}.wrap {  position: relative;  width: 200px;  height: 250px;  margin: 30px;  -webkit-border-radius: 6px;  border-radius: 6px;  -webkit-box-shadow: 0 0 30px 1px #273aca inset;  box-shadow: 0 0 30px 1px #273aca inset;}.loading {  position: absolute;  top: 50%;  left: 50%;  margin-top: -44px;  margin-left: -44px;}.loading .outer {  display: block;  width: 80px;  height: 80px;  -webkit-border-radius: 50%;  border-radius: 50%;  border: 4px solid #273aca;  border-left-color: transparent;  border-bottom: 0;  -webkit-animation: loading 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;  animation: loading 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;}.loading .inner {  width: 46px;  height: 46px;  -webkit-border-radius: 50%;  border-radius: 50%;  border: 4px solid #273aca;  border-top-color: transparent;  border-right: 0;  margin-top: -27px;  margin-left: -27px;  position: absolute;  top: 50%;  left: 50%;  -webkit-animation: loadingInner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;  animation: loadingInner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;}@-webkit-keyframes loading {  0% {    -webkit-transform: rotate(0deg);  }  100% {    -webkit-transform: rotate(360deg);  }}@keyframes loading {  0% {    transform: rotate(0deg);  }  100% {    transform: rotate(360deg);  }}@-webkit-keyframes loadingInner {  0% {    -webkit-transform: rotate(0deg);  }  100% {    -webkit-transform: rotate(-360deg);  }}@keyframes loadingInner {  0% {    transform: rotate(0deg);  }  100% {    transform: rotate(-360deg);  }}

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/demo.css"/></head><body><div class="wrap">    <div class="loading">        <span class="outer"></span>        <span class="inner"></span>    </div></div><body></html>

以上代码可以直接复制运行！

阅读全文

0 0