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

}

CSS3 loading 和 文字颜色渐变的更多相关文章

  1. 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)

    考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-te ...

  2. css3实现背景颜色渐变，文字颜色渐变，边框颜色渐变

    css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变 代码: ...

  3. 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等

    1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. css Backgroud-clip (文字颜色渐变)

    首先来瞄一下background-clip,这个属性是干嘛的? 顾名思义,背景裁剪...   按照我自己的理解就是背景的显示区域 此处粘上MDN的示例链接(嫌麻烦的,后面我也贴上截图)https:// ...

  5. css文字颜色渐变的3种实现

    在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯CSS实现渐变文字了.下面就介绍3中实现方式供大家参考! 基础样式: .g ...

  6. 一款纯css3实现的颜色渐变按钮

    之前为大家分享了推荐10款纯css3实现的实用按钮,今天给大家带来一款纯css3实现的颜色渐变按钮.这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,效果非常好看,一起看下效果图: 在线预览  ...

  7. css3实现颜色渐变以及兼容性处理

    有时我们会看到网站上的一些图片是渐变色的,这些图片有的是ui设计出来的,有的则是直接通过css3制作出来的.下面就讲一下css3实现渐变色的方法,以及在各个浏览器上的兼容性. CSS3 Gradien ...

  8. css3的背景颜色渐变@线性渐变

    背景颜色渐变之线性渐变 语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); oper ...

  9. CSS3实现背景颜色渐变

    CSS3渐变色生成网站:http://gradients.glrzad.com/ 本文参考:前端设计之用CSS3做线性渐变效果http://webskys.com/css3/10.html 在CSS3 ...

随机推荐

  1. LeetCode 7. Reverse Integer (JS)

    Given a 32-bit signed integer, reverse digits of an integer. Example 1: Input: 123 Output: 321 Examp ...

  2. HDU1151 Air Raid —— 最小路径覆盖

    题目链接:https://vjudge.net/problem/HDU-1151 Air Raid Time Limit: 2000/1000 MS (Java/Others)    Memory L ...

  3. Resolve the error: an error occurred during local report processing

    Issue: an error occurred during local report processing.the definition of the report'Main Report'is ...

  4. 【WebRTC音频预处理单元APM的整体编译及使用 - android】

    前言 在写[单独编译使用WebRTC的音频处理模块 - android]一文之前,就一直想直接把WebRTC的音频处理引擎VoE整个儿编译出来供自己的项目使用,但限于技术拙劣.时间紧迫,所以没能成功. ...

  5. 洛谷 P2761 软件补丁问题 【spfa】

    -为什么最短路的题会出现在网络流24里?? 因为范围是15所以直接把每个状态作为一个点,向它能转移到的点连有向边即可.可以不用建图(据说建图存不下?),直接枚举m个转移方案.位运算比较麻烦注意不要写错 ...

  6. qr.update导致的java.lang.NullPointerException空指针异常

    debug以后代码走到了qr.update这一步,再向下走一步就会报错了,内容是java.lang.NullPointerException 最后再三检查发现是SQL语句写错了!,我写的是插入语句是I ...

  7. influxdb数据库增加身份认证（windows）三

    接上一节,增加数据库身份认证 1.修改Config配置文件auth-enabled为true 2.然后重新载入最新的config配置文件打开数据库 3.验证身份认证功能是否已打开 说明身份认证功能已打 ...

  8. SQL Server OPENQUERY使用

    以下以创建好的ORAC链接服务器为例: A. 执行 SELECT 传递查询 SELECT * FROM OPENQUERY(ORAC, 'SELECT ID,NAME FROM SCOTT.RYB') ...

  9. Go 连接PostgreSQL数据库

    先在PostgreSQL数据库中建一个表,可以使用PostgreSQL官方的pgAdmin来完成: CREATE TABLE userinfo ( uid serial NOT NULL, usern ...

  10. 2017 JUST Programming Contest 3.0 I. Move Between Numbers

    I. Move Between Numbers time limit per test 2.0 s memory limit per test 256 MB input standard input ...