css实现对称扇形旋转loading加载动画效果代码

代码语言:html

所属分类:加载滚动

代码描述:css实现对称扇形旋转loading加载动画效果代码

代码标签: css 对称 扇形 旋转 loading 加载 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
    body{
        background: black;
        padding-top:100px;
    }
        .preloader {
	height:100px;
	width:100px;
	margin:30px auto 0;
	position:relative;
}
.loader {
	background-color:#fff;
	width:5px;
	height:5px;
	border-radius:50px;
	position:relative;
	top:calc(50% - 2.5px);
	left:calc(50% - 2.5px);
}
.loader:before,.loader:after {
	content:"";
	background:linear-gradient(45deg,transparent,rgba(255,255,255,.3),rgba(255,255,255,.3),transparent);
	width:50px;
	height:50px;
	border-top:3px solid #fff;
	border-right:3px solid #fff;
	border-radius:0 50px 0px 0;
	transform-origin:0% 100%;
	position:absolute;
	top:-47px;
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0