-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
118 lines (114 loc) · 2.67 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
<title>css3 lsh logo</title>
<style media="screen">
html, body {
height: 100%;
overflow: hidden
}
body {
background: #2c3437;
margin-top: 200px;
}
.lsh-bg {
width: 300px;
height: 300px;
margin: 0 auto;
overflow: hidden;
}
/*长柱*/
.lsh-bg .inner {
width: 50px;
height: 150px;
border-top-right-radius: 30px;
position: absolute;
}
/*突出*/
.lsh-bg .inner::before {
content: "";
width: 124px;
height: 50px;
position: absolute;
bottom: -49px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
/* 底部 */
.lsh-bg .inner::after {
content: "";
width: 50px;
height: 45px;
position: absolute;
left: 74px;
bottom: 0px;
border-top-right-radius: 30px;
}
/* 蓝色部分 有颜色渐变 */
.lsh-bg .inner.blue {
background: linear-gradient( #1b8af6, #065fb9 );
transform: rotate(45deg);
top: 10px;
left: 85px;
}
.lsh-bg .inner.blue::after {
background: linear-gradient( #0c6ccb, #065fb9 );
}
.lsh-bg .inner.blue::before {
background: #065fb9;
}
/* 黄色部分 没有颜色渐变 */
.lsh-bg .inner.orange {
transform: rotate(-135deg);
bottom: 10px;
right: 85px;
}
.lsh-bg .inner.orange,
.lsh-bg .inner.orange::after,
.lsh-bg .inner.orange::before {
background-color: #f29d26;
}
/* 动画部分 */
.lsh-bg.animate {
animation: rotate 5s infinite;
}
.lsh-bg .animate-divi-1 {
animation: divi-1 5s infinite;
}
.lsh-bg .animate-divi-2 {
animation: divi-2 5s infinite;
}
@keyframes rotate {
0% { transform: rotate(0)}
100% { transform: rotate(360deg)}
}
@keyframes divi-1 {
0% { transform: rotate(90deg) }
100% { transform: rotate(45deg) }
}
@keyframes divi-2 {
0% { transform: rotate(-90deg) }
100% { transform: rotate(-135deg) }
}
p {
width: 100%;
text-align: center;
position: absolute;
bottom: 0;
color: #fff;
}
p a {
color: #fff;
}
</style>
</head>
<body>
<div class="lsh-bg animate">
<div class="inner blue animate-divi-1"></div>
<div class="inner orange animate-divi-2"></div>
</div>
<p>下一个DEMO：<a href="./css3-wechat-logo.html">纯css3 微信logo（两个标签）</a></p>
</body>
</html>