<!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. POJ3264 Balanced Lineup —— 线段树单点更新 区间最大最小值

    题目链接:https://vjudge.net/problem/POJ-3264 For the daily milking, Farmer John's N cows (1 ≤ N ≤ 50,000 ...

  2. Machine Learning Note - Note 1

    I am working on the Andrew Ng's course on Machine Learing. I have a question on the week2 session. I ...

  3. YTU 2562: 黄金螺旋

    2562: 黄金螺旋 时间限制: 1 Sec  内存限制: 128 MB 提交: 832  解决: 427 题目描述 黄金螺旋是根据斐波那契数列画出来的螺旋曲线,自然界中存在许多斐波那契螺旋线的图案, ...

  4. Webdriver中关于driver.navigate().to()和driver.get()使用的区别

    先是有一个父页上button弹开一个子页,总共有4个子页,必须前一个页上的必填信息录完,才能在这个页面触发下一个子页. 用driver.navigate().to(baseUrl2),直接跳转到第2个 ...

  5. leetcode 783. Minimum Distance Between BST Nodes 以及同样的题目 530. Minimum Absolute Difference in BST

    Given a Binary Search Tree (BST) with the root node root, return the minimum difference between the ...

  6. Watir: 右键点击实例(某些如果应用AutoIt来做会更加简单高效)

    require 'watir' module Watir class Element def top_edge assert_exists assert_enabled ole_object.getB ...

  7. 通过struts2-spring-plugin集成Struts2和Spring，报错：ClassNotFound：*Interceptor.......

    集成Struts2和Spring的时候,出现错误,ClassNotFound: *interceptor,之所以是*interceptor是因为报了好多个这样的错误,而且类名都不一样. 集成方法是通过 ...

  8. python3 + selenum 环境搭建

    一.安装python3 打开python3官网https://www.python.org/,选择下载相应平台版本. 下载完成之后,根绝需要安装.注意:在安装时需勾选左下角“add python to ...

  9. yield示例分析

    yield示例分析 public class TestYield { private static final Object lock = new Object(); public static vo ...

  10. 最小割树Gomory–Hu tree

    fanhq666地址:http://fanhq666.blog.163.com/blog/static/8194342620113495335724/ wiki地址(证明):https://en.wi ...