zoukankan html css js c++ java

CSS3 loading 和文字颜色渐变

<!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;
}

查看全文

相关阅读:
【转】Oracle 建立索引及SQL优化
 SQL Server Express LocalDB 存入中文产生乱码问题
 安装(c)npm及搭建Vue项目详解
 【转】VSCode 调试 Node.js 介绍
 【转】C#根据用户信息，生成token和cookie的方法
 远程连接 Docker 的 MySQL 服务
 mysql服务器和服务器启动程序
 一台物理机上运行多个mysql实例（Running Multiple MySQL Instances on One Machine）
mysql5.7主从切换（master/slave switchover）
选项文件(Option Files)/配置文件(Configuration Files)的使用

原文地址：https://www.cnblogs.com/arealy/p/7737235.html

CSS3 loading 和 文字颜色渐变

CSS3 loading 和文字颜色渐变