CSS3 loading 和 文字颜色渐变

时间：2024-03-03 14:21:01
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>loading</title>
    <link rel="stylesheet" href="css/loading.css">
    <style>
.gradient {  
    display: inline-block;
    font-size: 60px;
    font-family: \'microsoft yahei\';
    background-image: -webkit-gradient(linear, left center, right center, from(rgba(176, 31, 184, 1)), to(rgba(255, 89, 76, 1)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
    </style>
</head>
<body>
    <div class="loading">
    <div>1</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<br>
<span class="gradient">快速开始</span>
</body>
</html>
.loading {
    background: black;
    width: 400px;
    height: 400px;
    position: relative;
}

.loading div {
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    top: 50%;
    transform-origin: 50% 50%;
}

.loading div:before {
    display: block;
    content: "";
    height: 100%;
    width: 10%;
    background: white;
}

.loading div:nth-child(1) {
    transform: translate3d(0, -50%, 0) rotate(0deg);
    opacity: 0.26154;
}

.loading div:nth-child(2) {
    transform: translate3d(0, -50%, 0) rotate(15deg);
    opacity: 0.32308;
}

.loading div:nth-child(3) {
    transform: translate3d(0, -50%, 0) rotate(30deg);
    opacity: 0.38462;
}

.loading div:nth-child(4) {
    transform: translate3d(0, -50%, 0) rotate(45deg);
    opacity: 0.44615;
}

.loading div:nth-child(5) {
    transform: translate3d(0, -50%, 0) rotate(60deg);
    opacity: 0.50769;
}

.loading div:nth-child(6) {
    transform: translate3d(0, -50%, 0) rotate(75deg);
    opacity: 0.56923;
}

.loading div:nth-child(7) {
    transform: translate3d(0, -50%, 0) rotate(90deg);
    opacity: 0.63077;
}

.loading div:nth-child(8) {
    transform: translate3d(0, -50%, 0) rotate(105deg);
    opacity: 0.69231;
}

.loading div:nth-child(9) {
    transform: translate3d(0, -50%, 0) rotate(120deg);
    opacity: 0.75385;
}

.loading div:nth-child(10) {
    transform: translate3d(0, -50%, 0) rotate(135deg);
    opacity: 0.81538;
}

.loading div:nth-child(11) {
    transform: translate3d(0, -50%, 0) rotate(150deg);
    opacity: 0.87692;
}

.loading div:nth-child(12) {
    transform: translate3d(0, -50%, 0) rotate(165deg);
    opacity: 0.93846;
}

.loading div:nth-child(13) {
    transform: translate3d(0, -50%, 0) rotate(180deg);
    opacity: 1;
}

 

相关文章