CSS3 loading 和 文字颜色渐变
2024-09-06 02:31:01
<!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:;
}
最新文章
- Install ArchLinux(draft)
- 限制textarea输入内容长度（多浏览器兼容、鼠标操作可控）
- CentOS 7 下的LAMP实现以及基于https的虚拟主机
- ssl小结
- SQLite语句练习题
- 分析windows宿主机Ping不通linux虚拟机的其中一种情况
- [ASP.NET MVC] Child actions are not allowed to perform redirect
- 导入excel数据
- SQL后台分页三种方案和分析
- 【攻防实战】SQL注入演练！
- 《c陷阱与缺陷》笔记--移位运算
- git 和 svn
- HDU 2489 Minimal Ratio Tree 最小生成树+DFS
- Contiki 源代码目录结构
- HighCharts之2D回归直线的散点
- Python中的 socket示例
- 盘点 Python 中的那些冷知识（二）
- vue与js混用
- Qt编写视频监控画面分割界面（开源）
- html5-div布局