12 |
13 |
12 |
13 | {{time}}
13 |我轻轻的招手，作别西天的云彩。
12 | 13 | -------------------------------------------------------------------------------- /12-gradientText/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | body{ 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | height: 100vh; 11 | } 12 | 13 | p{ 14 | font-size: 90px; 15 | font-weight: 700; 16 | font-family: '思源黑体 CN'; 17 | background-image: 18 | linear-gradient(90deg, 19 | #673ab7, 20 | #e91e63); 21 | background-clip: text; 22 | -webkit-background-clip: text; 23 | /* 这次的这句和以往不一样 */ 24 | /* 以往是考虑低版本浏览器 */ 25 | /* 这次就连最新版Chrome和Safari都需要 */ 26 | /* 注意是background-clip: text;需要 */ 27 | /* 如果是： content-box啊之类的就没这么苛刻的 */ 28 | /* -webkit-text-fill-color: transparent; */ 29 | color: transparent; 30 | /* 这个属性的-webkit-前缀也比较特殊 */ 31 | /* 寻常的-webkit-表示的是Chrome和Safari的私有属性 */ 32 | /* 但是它却声明了所有的（除了那位浏览器） */ 33 | background-image: 34 | linear-gradient(90deg, 35 | rgb(255, 167, 69), 36 | rgb(254, 134, 159), 37 | rgb(239, 122, 200), 38 | rgb(160, 131, 237), 39 | rgb(67, 174, 255), 40 | rgb(160, 131, 237), 41 | rgb(239, 122, 200), 42 | rgb(254, 134, 159), 43 | rgb(255, 167, 69)); 44 | background-size: 200%; 45 | } 46 | 47 | p{ 48 | -webkit-animation: streamer 2s linear infinite; 49 | animation: streamer 2s linear infinite; 50 | } 51 | 52 | @-webkit-keyframes streamer { 53 | 0%{ 54 | background-position: 0%; 55 | } 56 | 100%{ 57 | background-position: 200%; 58 | } 59 | } 60 | 61 | @keyframes streamer { 62 | 0%{ 63 | background-position: 0%; 64 | } 65 | 100%{ 66 | background-position: 200%; 67 | } 68 | } 69 | 70 | 71 | /* @media screen and (max-width: 1050px) { 72 | p{ 73 | font-size: 66px; 74 | } 75 | } 76 | @media screen and (max-width: 765px) { 77 | p{ 78 | font-size: 22px; 79 | } 80 | } */ -------------------------------------------------------------------------------- /13-PureCSSswiper/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AuroraTea/Web/e8f6e747819114215d9f37273dd71bfd7875b535/13-PureCSSswiper/1.jpg -------------------------------------------------------------------------------- /13-PureCSSswiper/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AuroraTea/Web/e8f6e747819114215d9f37273dd71bfd7875b535/13-PureCSSswiper/2.jpg -------------------------------------------------------------------------------- /13-PureCSSswiper/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AuroraTea/Web/e8f6e747819114215d9f37273dd71bfd7875b535/13-PureCSSswiper/3.jpg -------------------------------------------------------------------------------- /13-PureCSSswiper/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AuroraTea/Web/e8f6e747819114215d9f37273dd71bfd7875b535/13-PureCSSswiper/4.jpg -------------------------------------------------------------------------------- /13-PureCSSswiper/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AuroraTea/Web/e8f6e747819114215d9f37273dd71bfd7875b535/13-PureCSSswiper/5.jpg -------------------------------------------------------------------------------- /13-PureCSSswiper/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
13 | 
14 | 
15 | 
16 | 
17 |
18 |
19 |
--------------------------------------------------------------------------------
/13-PureCSSswiper/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin: 0;
3 | padding: 0;
4 | }
5 |
6 | html{
7 | font-size: 62.5%;
8 | }
9 |
10 | body{
11 | display: flex;
12 | justify-content: center;
13 | align-items: center;
14 | height: 100vh;
15 | }
16 |
17 | .swiper{
18 | display: flex;
19 | }
20 |
21 | img{
22 | background-color: #666;
23 |
24 | height: 60rem;
25 | width: 10rem;
26 | margin: 1rem;
27 |
28 | border-radius: 20rem;
29 |
30 | object-fit: cover;
31 | }
32 |
33 | a:nth-child(1) img{
34 | animation: swiper 30s infinite;
35 | }
36 | a:nth-child(2) img{
37 | animation: swiper 30s 6s infinite;
38 | }
39 | a:nth-child(3) img{
40 | animation: swiper 30s 12s infinite;
41 | }
42 | a:nth-child(4) img{
43 | animation: swiper 30s 18s infinite;
44 | }
45 | a:nth-child(5) img{
46 | animation: swiper 30s 24s infinite;
47 | }
48 |
49 | @keyframes swiper {
50 | 0%{
51 | width: 10rem;
52 | border-radius: 20rem;
53 | }
54 | 1%{
55 | width: 60rem;
56 | border-radius: 3.6rem;
57 | }
58 | 20%{
59 | width: 60rem;
60 | border-radius: 3.6rem;
61 | }
62 | 21%{
63 | width: 10rem;
64 | border-radius: 20rem;
65 | }
66 | 100%{
67 | width: 10rem;
68 | border-radius: 20rem;
69 | }
70 | }
71 |
72 | /* @media (max-width: 1400px){
73 | html{
74 | font-size: 50%;
75 | }
76 | }
77 |
78 | @media (max-width: 500px){
79 | html{
80 | font-size: 20%;
81 | }
82 | } */
83 |
84 |
85 | a:nth-child(1) img{
86 | animation: swiper 15s infinite;
87 | }
88 | a:nth-child(2) img{
89 | animation: swiper 15s 3s infinite;
90 | }
91 | a:nth-child(3) img{
92 | animation: swiper 15s 6s infinite;
93 | }
94 | a:nth-child(4) img{
95 | animation: swiper 15s 9s infinite;
96 | }
97 | a:nth-child(5) img{
98 | animation: swiper 15s 12s infinite;
99 | }
100 |
101 | @keyframes swiper {
102 | 0%{
103 | width: 10rem;
104 | border-radius: 20rem;
105 | }
106 | 2%{
107 | width: 60rem;
108 | border-radius: 3.6rem;
109 | }
110 | 20%{
111 | width: 60rem;
112 | border-radius: 3.6rem;
113 | }
114 | 22%{
115 | width: 10rem;
116 | border-radius: 20rem;
117 | }
118 | 100%{
119 | width: 10rem;
120 | border-radius: 20rem;
121 | }
122 | }
--------------------------------------------------------------------------------
/2-cloverLoad/loading.css:
--------------------------------------------------------------------------------
1 | body{
2 | margin: 0;
3 | padding: 0;
4 | height: 100vh;
5 | background-color: #1c1c1e;
6 | }
7 |
8 | .loading{
9 | width: 76px;
10 | display: flex;
11 | flex-wrap: wrap;
12 | position: relative;
13 | top: 45%;
14 | margin: 0 auto;
15 | animation: rotate 3s linear infinite;
16 | }
17 |
18 | @keyframes rotate{
19 | to{transform: rotate(360deg);}
20 | }
21 |
22 | .loading span{
23 | width: 32px;
24 | height: 32px;
25 | margin: 3px;
26 | }
27 |
28 | .loading span:nth-child(1){
29 | background-color: #e5efc1;
30 | border-radius: 50% 50% 0 50%;
31 | }
32 | .loading span:nth-child(2){
33 | background-color: #a2d5ab;
34 | border-radius: 50% 50% 50% 0;
35 | }
36 | .loading span:nth-child(3){
37 | background-color: #39aea9;
38 | border-radius: 50% 0 50% 50%;
39 | }
40 | .loading span:nth-child(4){
41 | background-color: #557b83;
42 | border-radius: 0 50% 50% 50%;
43 | }
--------------------------------------------------------------------------------
/2-cloverLoad/loading.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 蹭Steven热度专用封面
13 |:
15 | 16 | 17 |:
18 | 19 | 20 |
23 |