<!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. linux网络socket 接口转

    linux网络socket 接口 1.socket函数:一个进程必须做的第一件事就是调用socket函数获得一个文件描述符. ------------------------------------- ...

  2. lucene DocValues——本质是为通过docID查找某field的值 看图

    Why DocValues? The standard way that Solr builds the index is with an inverted index. This style bui ...

  3. mac中的本地项目和登陆的钥匙串怎么解锁

    前提条件:电脑语言换成英语,然后按下面的操作就可以了. 1.打开launchapd中的钥匙串访问 2 选中第一栏登录, 点击左上角的锁锁上, 再点一次解锁. 3. 这回会弹出个东西 点击如上图中的重密 ...

  4. bzoj 5017 炸弹

    题目大意: 直线上有n个炸弹有坐标x和半径r 当一个炸弹被引爆时 若有炸弹的坐标在该炸弹坐标+-r范围内则另一个炸弹也被引爆 求先引爆每一个炸弹最终会引爆多少炸弹 思路: 可以想到n平方连边然后tar ...

  5. VMware虚拟机安装WinXP出现错误output error file to the following location A:\GHOSTERR.TXT

    我们安装Ghost版WinXP系统的时候,可能会出现一个如下图这样的错误:output error file to the following location A:\GHOSTERR.TXT. 出现 ...

  6. jenkins配置发送邮件时，日志中显示发送成功，但是邮箱没有收到邮件

    遇到这种问题,是因为安装的Email Extension Plugin插件版本与jenkins不兼容, 经试验2.39.3版本可以正常发送邮件,在jenkins主目录中 将2.39.3的文件和文件夹复 ...

  7. 关于CentOS 7安装solr+tomcat

    1.Solr7.1.0 安装部署(centos7) Solr7.1.0为目前的最新版,安装环境需要jdk1.8 或者更高,容器我用的tomcat,也建议tomcat8.0或者更高 1.1.下载solr ...

  8. WinHTTrack

    看过<大湿教我写.net通用权限框架(1)之菜单导航篇>之后发生的事 http://www.cnblogs.com/wolf-sun/p/3436585.html 用此工具下载别人整站的图 ...

  9. ExtJS 4 MVC 创建 Viewport

    http://ext4all.com/post/extjs-4-mvc-with-viewport 效果图: 结构图: 没有用到Model层,直接在view里面写上 默认的 json的数据 中间Pan ...

  10. Android系统中setprop,getprop,watchprops命令的使用(转载)

    转自:http://blog.csdn.net/yao_guet/article/details/6531241 在android系统中,有一些初始化的配置文件,例如: /init.rc /defau ...