<!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. UVA11324 The Largest Clique —— 强连通分量 + 缩点 + DP

    题目链接:https://vjudge.net/problem/UVA-11324 题解: 题意:给出一张有向图,求一个结点数最大的结点集,使得任意两个结点u.v,要么u能到达v, 要么v能到达u(u ...

  2. The type exists in both DLLs

    2>C:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\root\c0b37647\aaceda91\Ap ...

  3. 工作中常用到的JS校验

    1. // 验证是否为空 2. function check_blank(obj, obj_name){ 3. if(obj.value != ''){ 4. return true; 5. }els ...

  4. snnu1111(子序列求和)

    1111: 子序列求和 Time Limit: 3 Sec  Memory Limit: 64 MBSubmit: 10  Solved: 2[Submit][Status][Web Board] [ ...

  5. hdu4786 Fibonacci Tree （最小生成树）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4786 题意:给定图的n个点和m条双向边,告诉你每条边的权值.权值为1表示该边是白边,权值为0表示该边为 ...

  6. 洛谷P3246 [HNOI2016]序列

    传送门 题解 //minamoto #include<iostream> #include<cstdio> #define ll long long using namespa ...

  7. 整体二分例题：POI2011Meteors——Chemist

    题目地址:https://www.luogu.org/problemnew/show/P3527#sub 首先这个答案不是操作几次下了几场陨石雨之后的陨石个数,无法在线做,考虑离线做法.暴力的想法就是 ...

  8. 《Windows核心编程系列》二十谈谈DLL高级技术

    本篇文章将介绍DLL显式链接的过程和模块基地址重定位及模块绑定的技术. 第一种将DLL映射到进程地址空间的方式是直接在源代码中引用DLL中所包含的函数或是变量,DLL在程序运行后由加载程序隐式的载入, ...

  9. 《windows核心编程系列》二十一谈谈基址重定位和模块绑定

    每个DLL和可执行文件都有一个首选基地址.它表示该模块被映射到进程地址空间时最佳的内存地址.在构建可执行文件时,默认情况下链接器会将它的首选基地址设为0x400000.对于DLL来说,链接器会将它的首 ...

  10. Python添加自己的模块路径

    进入Python编辑环境后可以,通过Python的sys.path属性获得当前搜索路径的配置,可以看到之前我们设置的路径已经在当前搜索路径中了. 然后通过sys.path.append('F:\Pyt ...