├── 2020
├── css
│ └── style.css
├── image
│ └── profile.png
└── index.html
├── .gitignore
├── README.md
├── border-button
├── css
│ └── style.css
├── image
│ └── profile.png
└── index.html
├── button
├── css
│ └── style.css
├── image
│ └── profile.png
└── index.html
├── calendar
├── css
│ ├── style.css
│ ├── style.css.map
│ └── style.scss
├── image
│ └── profile.png
└── index.html
├── card
├── css
│ └── style.css
├── image
│ └── profile.png
├── images
│ └── image01.jpg
└── index.html
├── clock
├── css
│ └── style.css
├── image
│ └── profile.png
└── index.html
├── code-box
├── css
│ └── style.css
├── image
│ └── profile.png
├── index.html
└── js
│ └── index.js
├── docs
├── css
│ └── style.css
├── index.html
└── js
│ ├── app.js
│ └── vue.js
├── douyin
├── css
│ └── style.css
├── image
│ └── profile.png
└── index.html
├── hetongxue-piantou
├── css
│ └── style.css
├── image
│ ├── profile.jpg
│ └── profile.png
└── index.html
├── jianzhi
├── css
│ └── style.css
├── image
│ └── profile.png
└── index.html
├── line-font
├── css
│ └── style.css
├── image
│ └── profile.png
└── index.html
├── loading
├── css
│ ├── style.css
│ ├── style2.css
│ ├── style3.css
│ ├── style4.css
│ ├── style5.css
│ └── style6.css
├── image
│ └── profile.png
└── index.html
├── login
├── css
│ └── style.css
├── image
│ └── profile.png
└── index.html
├── login2
├── css
│ └── style.css
├── image
│ └── profile.png
└── index.html
├── login3
├── css
│ └── style.css
├── image
│ └── profile.png
└── index.html
├── nintendo-switch
├── css
│ ├── style.css
│ ├── style.css.map
│ └── style.scss
├── image
│ └── profile.png
├── images
│ └── switch.svg
└── index.html
├── page-404
├── css
│ └── style.css
├── image
│ └── profile.png
├── index.html
└── static
│ └── 404.svg
├── split-font
├── css
│ └── style.css
├── image
│ └── profile.png
└── index.html
├── switch-button
├── css
│ └── style.css
├── image
│ └── profile.png
└── index.html
└── todo-list
├── css
└── style.css
├── image
└── profile.png
└── index.html
/.gitignore:
--------------------------------------------------------------------------------
1 | /.vscode
2 |
3 | */.vscode
--------------------------------------------------------------------------------
/2020/css/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | }
5 |
6 | html {
7 | height: 100%;
8 | }
9 |
10 | /*
11 | #E71D36
12 | #FF9F1C
13 | */
14 |
15 | body {
16 | background: #FF9F1C;
17 | animation: bodyAction 2s ease-in-out;
18 | }
19 |
20 | @keyframes bodyAction {
21 | 0% {
22 | background: #E71D36;
23 | }
24 | 100% {
25 | background: #FF9F1C ;
26 | }
27 | }
28 |
29 | .num {
30 | font-size: 200px;
31 | position: fixed;
32 | color: #FF9F1C;
33 | text-shadow: 5px 0 0 #000;
34 | }
35 |
36 | .num span {
37 | display: block;
38 | vertical-align: top;
39 | height: 200px;
40 | width: 180px;
41 | text-align: center;
42 | line-height: 200px;
43 | }
44 |
45 | .num .check {
46 | color: #E71D36;
47 | }
48 |
49 | @keyframes checkAction {
50 | 0% {
51 | color: #FF9F1C;
52 | }
53 | 100% {
54 | color: #E71D36;
55 | }
56 | }
57 |
58 | .num.num1 {
59 | top: -1600px;
60 | left: calc(50% - 400px);
61 | animation: num1Action 2s ease-in-out;
62 | }
63 |
64 | @keyframes num1Action {
65 | 0% {
66 | top: 0px;
67 | }
68 | 100% {
69 | top: -1600px;
70 | /* color: #E71D36; */
71 | }
72 | }
73 |
74 | .num.num2 {
75 | left: calc(50% - 200px);
76 | top: -1200px;
77 | animation: num2Actoin 2s ease-in-out;
78 | }
79 |
80 | @keyframes num2Actoin {
81 | 0% {
82 | top: 0px;
83 | }
84 | 100% {
85 | top: -1200px;
86 | /* color: #E71D36; */
87 | }
88 | }
89 |
90 | .num.num3 {
91 | left: calc(50% + 0px);
92 |
93 | top: -1600px;
94 | animation: num3Actoin 2s ease-in-out;
95 | }
96 |
97 | @keyframes num3Actoin {
98 | 0% {
99 | top: 0px;
100 | }
101 | 100% {
102 | top: -1600px;
103 | /* color: #E71D36; */
104 | }
105 | }
106 |
107 | .num.num4 {
108 | left: calc(50% + 200px);
109 |
110 | top: -1200px;
111 | animation: num4Actoin 2s ease-in-out;
112 | }
113 |
114 | @keyframes num4Actoin {
115 | 0% {
116 | top: 0px;
117 | }
118 | 100% {
119 | top: -1200px;
120 | /* color: #E71D36; */
121 | }
122 | }
--------------------------------------------------------------------------------
/2020/image/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhangyingwei/html-css-only/3af9f30135bb4780dbed33bee469a0d8e67a039b/2020/image/profile.png
--------------------------------------------------------------------------------
/2020/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | 2020
9 |
10 |
11 |
12 | 9
13 | 8
14 | 7
15 | 6
16 | 5
17 | 4
18 | 3
19 | 2
20 | 1
21 | 0
22 | 1
23 | 2
24 | 3
25 | 4
26 | 5
27 | 6
28 | 7
29 | 8
30 | 9
31 |
32 |
33 | 9
34 | 8
35 | 7
36 | 6
37 | 5
38 | 4
39 | 3
40 | 2
41 | 1
42 | 0
43 | 1
44 | 2
45 | 3
46 | 4
47 | 5
48 | 6
49 | 7
50 | 8
51 | 9
52 |
53 |
54 | 9
55 | 8
56 | 7
57 | 6
58 | 5
59 | 4
60 | 3
61 | 2
62 | 1
63 | 0
64 | 1
65 | 2
66 | 3
67 | 4
68 | 5
69 | 6
70 | 7
71 | 8
72 | 9
73 |
74 |
75 | 9
76 | 8
77 | 7
78 | 6
79 | 5
80 | 4
81 | 3
82 | 2
83 | 1
84 | 0
85 | 1
86 | 2
87 | 3
88 | 4
89 | 5
90 | 6
91 | 7
92 | 8
93 | 9
94 |
95 |
96 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # HTML&CSS ONLY
2 |
3 | 使用 HTML 和 CSS 编写一些好看的效果
4 |
5 | 求star啊各位
--------------------------------------------------------------------------------
/border-button/css/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | }
5 |
6 | html {
7 | height: 100%;
8 | }
9 |
10 | body {
11 | background-color: rgb(51, 51, 51);
12 | }
13 |
14 | .container {
15 | text-align: center;
16 | padding: 200px 0;
17 | }
18 |
19 | .btn {
20 | background: none;
21 | border: 0;
22 | outline: 0;
23 | color: aquamarine;
24 | font-family: 'JetBrains Mono';
25 | font-size: 20px;
26 | cursor: pointer;
27 | border: 2px solid aquamarine;
28 | width: 250px;
29 | height: 50px;
30 | position: relative;
31 | }
32 |
33 | .btn label {
34 | position: absolute;
35 | left: 0;
36 | top: 0;
37 | line-height: 50px;
38 | width: 100%;
39 | height: 100%;
40 | z-index: 1;
41 | background-color: rgb(51, 51, 51);
42 | }
43 |
44 | .btn::before {
45 | content: '';
46 | position: absolute;
47 | left: -2px;
48 | top: -2px;
49 | width: 0px;
50 | height: 0;
51 | z-index: 0;
52 | background-color: brown;
53 | transition: width .5s,height .5s;
54 | }
55 |
56 | .btn::after {
57 | content: '';
58 | position: absolute;
59 | right: -2px;
60 | bottom: -2px;
61 | width: 0;
62 | height: 0;
63 | z-index: 0;
64 | background-color: brown;
65 | transition: width .5s,height .5s;
66 |
67 | /* width: calc(100% + 4px);
68 | height: calc(100% + 4px); */
69 | }
70 |
71 | .btn:hover {
72 | color: brown;
73 | }
74 |
75 | .btn:hover::before {
76 | width: calc(100% + 4px);
77 | height: calc(100% + 4px);
78 | }
79 |
80 | .btn:hover::after {
81 | width: calc(100% + 4px);
82 | height: calc(100% + 4px);
83 | }
--------------------------------------------------------------------------------
/border-button/image/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhangyingwei/html-css-only/3af9f30135bb4780dbed33bee469a0d8e67a039b/border-button/image/profile.png
--------------------------------------------------------------------------------
/border-button/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Button
8 |
9 |
10 |
11 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/button/css/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | }
5 |
6 | html {
7 | height: 100%;
8 | }
9 |
10 | /* rgb(51, 51, 51)
11 |
12 | rgb(73, 73, 73)
13 |
14 | rgb(239,77,138) */
15 |
16 | body {
17 | background-color: rgb(51, 51, 51);
18 | font-family: 'Courier New', Courier, monospace;
19 | }
20 |
21 | .panel {
22 | text-align: center;
23 | padding: 10% 0;
24 | }
25 |
26 | .panel .btn-container {
27 | display: inline-block;
28 | }
29 |
30 | .panel .btn-container input {
31 | border: 0;
32 | outline: 0;
33 | height: 60px;
34 | width: 120px;
35 | border-radius: 30px;
36 | background-color: rgb(104, 101, 101);
37 | color: #fff;
38 | font-size: 20px;
39 | padding: 0 20px;
40 | vertical-align: middle;
41 | transition: .2s;
42 |
43 | }
44 |
45 | .panel .btn-container .btn {
46 | display: inline-block;
47 | height: 60px;
48 | background-color: rgb(239,77,138);
49 | vertical-align: middle;
50 | line-height: 60px;
51 | font-size: 20px;
52 | color: #fff;
53 | font-weight: bold;
54 | width: 170px;
55 | border-radius: 30px;
56 | margin-left: -170px;
57 | cursor: pointer;
58 | transition: .2s;
59 | }
60 |
61 | .panel .btn-container:hover input{
62 | width: 400px;
63 | animation: inputAction .4s ease-out;
64 | }
65 |
66 | .panel .btn-container:hover .btn{
67 | width: 100px;
68 | height: 60px;
69 | margin-left: -100px;
70 | animation: btnAction .4s ease-out;
71 | }
72 |
73 | @keyframes inputAction {
74 | 0% {
75 | width: 400px;
76 | }
77 | 60% {
78 | width: 450px;
79 | }
80 | 100% {
81 | width: 400px;
82 | }
83 | }
84 |
85 | @keyframes btnAction {
86 | 0% {
87 | width: 100px;
88 | height: 60px;
89 | margin-left: -100px;
90 | }
91 | 60% {
92 | width: 60px;
93 | height: 60px;
94 | margin-left: 10px;
95 | }
96 | 100% {
97 | width: 100px;
98 | height: 60px;
99 | margin-left: -100px;
100 | }
101 | }
102 |
103 |
104 | ::-webkit-input-placeholder {
105 | color: #fff;
106 | font-size: 20px;
107 | font-family: 'Courier New', Courier, monospace;
108 | }
--------------------------------------------------------------------------------
/button/image/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhangyingwei/html-css-only/3af9f30135bb4780dbed33bee469a0d8e67a039b/button/image/profile.png
--------------------------------------------------------------------------------
/button/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | BUTTON
9 |
10 |
11 |
17 |
18 |
--------------------------------------------------------------------------------
/calendar/css/style.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Karla&display=swap");
2 | * {
3 | padding: 0;
4 | margin: 0;
5 | }
6 |
7 | html, body {
8 | height: 100%;
9 | background-color: darkcyan;
10 | display: -webkit-box;
11 | display: -ms-flexbox;
12 | display: flex;
13 | -webkit-box-pack: center;
14 | -ms-flex-pack: center;
15 | justify-content: center;
16 | -webkit-box-align: center;
17 | -ms-flex-align: center;
18 | align-items: center;
19 | font-family: 'Karla', sans-serif;
20 | }
21 |
22 | .main-container {
23 | width: 700px;
24 | height: 400px;
25 | background-color: white;
26 | font-size: 0;
27 | }
28 |
29 | .main-container .left {
30 | display: inline-block;
31 | width: 350px;
32 | height: 400px;
33 | vertical-align: top;
34 | text-align: center;
35 | background-color: #4bdada;
36 | }
37 |
38 | .main-container .left .week {
39 | text-transform: uppercase;
40 | font-size: 35px;
41 | color: white;
42 | line-height: 100px;
43 | }
44 |
45 | .main-container .left .day {
46 | font-size: 180px;
47 | color: white;
48 | }
49 |
50 | .main-container .right {
51 | display: inline-block;
52 | width: 350px;
53 | height: 400px;
54 | text-align: center;
55 | }
56 |
57 | .main-container .right .year {
58 | text-transform: uppercase;
59 | font-size: 35px;
60 | color: #21a5a5;
61 | font-weight: bolder;
62 | line-height: 100px;
63 | }
64 |
65 | .main-container .right .calendar {
66 | padding: 0 35px;
67 | }
68 |
69 | .main-container .right .calendar .weeks .item {
70 | font-size: 18px;
71 | text-transform: uppercase;
72 | display: inline-block;
73 | width: 40px;
74 | line-height: 40px;
75 | color: crimson;
76 | font-weight: bolder;
77 | }
78 |
79 | .main-container .right .calendar .days .day {
80 | font-size: 15px;
81 | display: inline-block;
82 | width: 40px;
83 | line-height: 40px;
84 | -webkit-transition: .2s;
85 | transition: .2s;
86 | cursor: pointer;
87 | }
88 |
89 | .main-container .right .calendar .days .day.today {
90 | background-color: crimson;
91 | font-weight: bolder;
92 | color: white;
93 | }
94 |
95 | .main-container .right .calendar .days .day:hover {
96 | background-color: #e64c6b;
97 | font-weight: bolder;
98 | color: white;
99 | }
100 | /*# sourceMappingURL=style.css.map */
--------------------------------------------------------------------------------
/calendar/css/style.css.map:
--------------------------------------------------------------------------------
1 | {
2 | "version": 3,
3 | "mappings": "AAAA,OAAO,CAAC,kEAAI;AAEZ,AAAA,CAAC,CAAC;EACA,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,CAAC;CACV;;AAED,AAAA,IAAI,EAAC,IAAI,CAAC;EACR,MAAM,EAAE,IAAI;EACZ,gBAAgB,EAAE,QAAQ;EAC1B,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,WAAW,EAAE,mBAAmB;CACjC;;AAED,AAAA,eAAe,CAAC;EACd,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,gBAAgB,EAAE,KAAK;EACvB,SAAS,EAAE,CAAC;CAkEb;;AAtED,AAKE,eALa,CAKb,KAAK,CAAC;EACJ,OAAO,EAAE,YAAY;EACrB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,cAAc,EAAE,GAAG;EACnB,UAAU,EAAE,MAAM;EAClB,gBAAgB,EAAE,OAAiB;CAWpC;;AAtBH,AAYI,eAZW,CAKb,KAAK,CAOH,KAAK,CAAC;EACJ,cAAc,EAAE,SAAS;EACzB,SAAS,EAAE,IAAI;EACf,KAAK,EAAE,KAAK;EACZ,WAAW,EAAE,KAAK;CACnB;;AAjBL,AAkBI,eAlBW,CAKb,KAAK,CAaH,IAAI,CAAC;EACH,SAAS,EAAE,KAAK;EAChB,KAAK,EAAE,KAAK;CACb;;AArBL,AAuBE,eAvBa,CAuBb,MAAM,CAAC;EACL,OAAO,EAAE,YAAY;EACrB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,UAAU,EAAE,MAAM;CA0CnB;;AArEH,AA4BI,eA5BW,CAuBb,MAAM,CAKJ,KAAK,CAAC;EACJ,cAAc,EAAE,SAAS;EACzB,SAAS,EAAE,IAAI;EACf,KAAK,EAAE,OAAiB;EACxB,WAAW,EAAE,MAAM;EACnB,WAAW,EAAE,KAAK;CACnB;;AAlCL,AAmCI,eAnCW,CAuBb,MAAM,CAYJ,SAAS,CAAC;EACR,OAAO,EAAE,MAAM;CAgChB;;AApEL,AAsCQ,eAtCO,CAuBb,MAAM,CAYJ,SAAS,CAEP,MAAM,CACJ,KAAK,CAAC;EACJ,SAAS,EAAE,IAAI;EACf,cAAc,EAAE,SAAS;EACzB,OAAO,EAAE,YAAY;EACrB,KAAK,EAAE,IAAI;EACX,WAAW,EAAE,IAAI;EACjB,KAAK,EAAE,OAAO;EACd,WAAW,EAAE,MAAM;CACpB;;AA9CT,AAiDQ,eAjDO,CAuBb,MAAM,CAYJ,SAAS,CAaP,KAAK,CACH,IAAI,CAAC;EACH,SAAS,EAAE,IAAI;EACf,OAAO,EAAE,YAAY;EACrB,KAAK,EAAE,IAAI;EACX,WAAW,EAAE,IAAI;EACjB,UAAU,EAAE,GAAG;EACf,MAAM,EAAE,OAAO;CAWhB;;AAlET,AAwDU,eAxDK,CAuBb,MAAM,CAYJ,SAAS,CAaP,KAAK,CACH,IAAI,AAOD,MAAM,CAAC;EACN,gBAAgB,EAAE,OAAO;EACzB,WAAW,EAAE,MAAM;EACnB,KAAK,EAAE,KAAK;CACb;;AA5DX,AA6DU,eA7DK,CAuBb,MAAM,CAYJ,SAAS,CAaP,KAAK,CACH,IAAI,AAYD,MAAM,CAAC;EACN,gBAAgB,EAAE,OAAiB;EACnC,WAAW,EAAE,MAAM;EACnB,KAAK,EAAE,KAAK;CACb",
4 | "sources": [
5 | "style.scss"
6 | ],
7 | "names": [],
8 | "file": "style.css"
9 | }
--------------------------------------------------------------------------------
/calendar/css/style.scss:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Karla&display=swap');
2 |
3 | * {
4 | padding: 0;
5 | margin: 0;
6 | }
7 |
8 | html,body {
9 | height: 100%;
10 | background-color: darkcyan;
11 | display: flex;
12 | justify-content: center;
13 | align-items: center;
14 | font-family: 'Karla', sans-serif;
15 | }
16 |
17 | .main-container {
18 | width: 700px;
19 | height: 400px;
20 | background-color: white;
21 | font-size: 0;
22 | .left {
23 | display: inline-block;
24 | width: 350px;
25 | height: 400px;
26 | vertical-align: top;
27 | text-align: center;
28 | background-color: rgb(75, 218, 218);
29 | .week {
30 | text-transform: uppercase;
31 | font-size: 35px;
32 | color: white;
33 | line-height: 100px;
34 | }
35 | .day {
36 | font-size: 180px;
37 | color: white;
38 | }
39 | }
40 | .right {
41 | display: inline-block;
42 | width: 350px;
43 | height: 400px;
44 | text-align: center;
45 | .year {
46 | text-transform: uppercase;
47 | font-size: 35px;
48 | color: rgb(33, 165, 165);
49 | font-weight: bolder;
50 | line-height: 100px;
51 | }
52 | .calendar {
53 | padding: 0 35px;
54 | .weeks {
55 | .item {
56 | font-size: 18px;
57 | text-transform: uppercase;
58 | display: inline-block;
59 | width: 40px;
60 | line-height: 40px;
61 | color: crimson;
62 | font-weight: bolder;
63 | }
64 | }
65 | .days {
66 | .day {
67 | font-size: 15px;
68 | display: inline-block;
69 | width: 40px;
70 | line-height: 40px;
71 | transition: .2s;
72 | cursor: pointer;
73 | &.today {
74 | background-color: crimson;
75 | font-weight: bolder;
76 | color: white;
77 | }
78 | &:hover {
79 | background-color: rgb(230, 76, 107);
80 | font-weight: bolder;
81 | color: white;
82 | }
83 | }
84 | }
85 | }
86 | }
87 | }
--------------------------------------------------------------------------------
/calendar/image/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhangyingwei/html-css-only/3af9f30135bb4780dbed33bee469a0d8e67a039b/calendar/image/profile.png
--------------------------------------------------------------------------------
/calendar/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 日历
8 |
9 |
10 |
11 |
15 |
16 |
july 2020
17 |
18 |
19 |
s
20 |
m
21 |
t
22 |
w
23 |
t
24 |
f
25 |
s
26 |
27 |
28 |
28
29 |
29
30 |
30
31 |
1
32 |
2
33 |
3
34 |
4
35 |
5
36 |
6
37 |
7
38 |
8
39 |
9
40 |
10
41 |
11
42 |
12
43 |
13
44 |
14
45 |
15
46 |
16
47 |
17
48 |
18
49 |
19
50 |
20
51 |
21
52 |
22
53 |
23
54 |
24
55 |
25
56 |
26
57 |
27
58 |
28
59 |
29
60 |
30
61 |
31
62 |
1
63 |
64 |
65 |
66 |
13 |
14 |
15 |
16 |
17 |
Ales Smith
18 |
Applied Psychometrics specialist
19 |
20 |
28 |
29 |
12 |
13 |
14 |
1
15 |
2
16 |
3
17 |
4
18 |
5
19 |
6
20 |
7
21 |
8
22 |
9
23 |
10
24 |
11
25 |
12
26 |
27 |
28 |
29 |
30 |
31 |
32 |
15 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
32 |
12 | 抖
13 | 音
14 | ，
15 | 记
16 | 录
17 | 美
18 | 好
19 | 生
20 | 活
21 | !
22 |
23 |
24 |
--------------------------------------------------------------------------------
/hetongxue-piantou/css/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | }
5 |
6 | html {
7 | height: 100%;
8 | }
9 |
10 | body {
11 | height: 100%;
12 | background-color: rgb(0, 0, 0);
13 | }
14 |
15 | .container {
16 | height: 100%;
17 | font-size: 0;
18 | }
19 |
20 | .container .item {
21 | height: 100%;
22 | width: calc(100% / 12);
23 | display: inline-block;
24 | vertical-align: top;
25 | position: relative;
26 | }
27 |
28 | .container .item .part1,.part2,.part3,.part4,.part5{
29 | font-size: 6vw;
30 | color: rgb(255, 255, 255);
31 | height: 100%;
32 | width: 0;
33 | display: flex;
34 | justify-content: center;
35 | align-items: center;
36 | overflow: hidden;
37 | font-style: italic;
38 | position: absolute;
39 | top: 0;
40 | left: 0;
41 | }
42 |
43 | .container .item .part1 {
44 | background-color: rgb(255, 202, 64);
45 | z-index: 1;
46 | animation: part .8s linear 0s forwards;
47 | }
48 |
49 | .container .item .part2 {
50 | background-color: rgb(77, 190, 255);
51 | z-index: 2;
52 | animation: part .4s linear 1.6s forwards;
53 | }
54 | .container .item .part3 {
55 | background-color: rgb(136, 216, 117);
56 | z-index: 3;
57 | animation: part .4s linear 2.1s forwards;
58 | }
59 | .container .item .part4 {
60 | background-color: rgb(255, 117, 76);
61 | z-index: 4;
62 | animation: part .4s linear 2.6s forwards;
63 | }
64 | .container .item .part5 {
65 | background-color: rgb(0, 0, 0);
66 | text-shadow: .2em 0 .2em rgb(26, 26, 209),-.2em 0 .2em rgb(26, 26, 209),0 -.2em .2em rgb(26, 26, 209),0 .2em .2em rgb(26, 26, 209);
67 | z-index: 5;
68 | }
69 |
70 | .container .item:nth-child(1) .part5 {
71 | animation: part .4s linear 5s forwards;
72 | }
73 | .container .item:nth-child(2) .part5 {
74 | animation: part .4s linear 5.1s forwards;
75 | }
76 | .container .item:nth-child(3) .part5 {
77 | animation: part .4s linear 5.2s forwards;
78 | }
79 | .container .item:nth-child(4) .part5 {
80 | animation: part .4s linear 5.3s forwards;
81 | }
82 | .container .item:nth-child(5) .part5 {
83 | animation: part .4s linear 5.4s forwards;
84 | }
85 | .container .item:nth-child(6) .part5 {
86 | animation: part .4s linear 5.5s forwards;
87 | }
88 | .container .item:nth-child(7) .part5 {
89 | animation: part .4s linear 5.6s forwards;
90 | }
91 | .container .item:nth-child(8) .part5 {
92 | animation: part .4s linear 5.7s forwards;
93 | }
94 | .container .item:nth-child(9) .part5 {
95 | animation: part .4s linear 5.8s forwards;
96 | }
97 | .container .item:nth-child(10) .part5 {
98 | animation: part .4s linear 5.9s forwards;
99 | }
100 | .container .item:nth-child(11) .part5 {
101 | animation: part .4s linear 6s forwards;
102 | }
103 | .container .item:nth-child(12) .part5 {
104 | animation: part .4s linear 6.1s forwards;
105 | }
106 |
107 | @keyframes part {
108 | 0% {
109 | width: 0px;
110 | }
111 | 100% {
112 | width: 100%;
113 | }
114 | }
--------------------------------------------------------------------------------
/hetongxue-piantou/image/profile.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhangyingwei/html-css-only/3af9f30135bb4780dbed33bee469a0d8e67a039b/hetongxue-piantou/image/profile.jpg
--------------------------------------------------------------------------------
/hetongxue-piantou/image/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhangyingwei/html-css-only/3af9f30135bb4780dbed33bee469a0d8e67a039b/hetongxue-piantou/image/profile.png
--------------------------------------------------------------------------------
/hetongxue-piantou/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 |
12 | -
13 | H
14 | A
15 | P
16 | P
17 | Y
18 |
19 | -
20 | N
21 | E
22 | W
23 |
24 | -
25 | Y
26 | E
27 | A
28 | R
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/line-font/css/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | }
5 |
6 | body {
7 | background-color: rgb(41, 45, 62);
8 | }
9 |
10 | .container {
11 | font-size: 120px;
12 | font-weight: bold;
13 | text-transform: uppercase;
14 | }
15 |
16 | svg {
17 | position: absolute;
18 | width: 100%;
19 | height: 100%;
20 | }
21 |
22 | .text {
23 | fill: none;
24 | stroke-width: 5;
25 | stroke-dasharray: 0 240;
26 | stroke-dashoffset: 0;
27 | }
28 |
29 | .text:nth-child(4n + 1) {
30 | stroke: rgb(39, 135, 238);
31 | animation: text1 4s ease-in-out forwards;
32 | }
33 | .text:nth-child(4n + 2) {
34 | stroke: rgb(47, 169, 92);
35 | animation: text2 4s ease-in-out forwards;
36 | }
37 | .text:nth-child(4n + 3) {
38 | stroke: rgb(249, 189, 56);
39 | animation: text3 4s ease-in-out forwards;
40 | }
41 | .text:nth-child(4n + 4) {
42 | stroke: rgb(235, 61, 50);
43 | animation: text4 4s ease-in-out forwards;
44 | }
45 |
46 | @keyframes text1 {
47 | 100% {
48 | stroke-dashoffset: 1000;
49 | stroke-dasharray: 60 180;
50 | }
51 | }
52 |
53 | @keyframes text2 {
54 | 100% {
55 | stroke-dashoffset: 1060;
56 | stroke-dasharray: 60 180;
57 | }
58 | }
59 |
60 | @keyframes text3 {
61 | 100% {
62 | stroke-dashoffset: 1120;
63 | stroke-dasharray: 60 180;
64 | }
65 | }
66 |
67 | @keyframes text4 {
68 | 100% {
69 | stroke-dashoffset: 1180;
70 | stroke-dasharray: 60 180;
71 | }
72 | }
--------------------------------------------------------------------------------
/line-font/image/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhangyingwei/html-css-only/3af9f30135bb4780dbed33bee469a0d8e67a039b/line-font/image/profile.png
--------------------------------------------------------------------------------
/line-font/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 线条字
8 |
9 |
10 |
11 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/loading/css/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | }
5 |
6 | html {
7 | height: 100%;
8 | }
9 |
10 | body {
11 | background-color: rgb(55, 40, 65);
12 | }
13 |
14 | .main-container {
15 | color: aliceblue;
16 | padding-top: 100px;
17 | }
18 |
19 | .line-container {
20 | width: 910px;
21 | height: 300px;
22 | margin: 0 auto;
23 | display: flex;
24 | flex-direction: row;
25 | }
26 |
27 | .line-container .loading {
28 | width: 300px;
29 | text-align: center;
30 | }
31 |
32 | .line-container .loading.loading1 {
33 | animation: loading1-rotate 2s infinite 0s;
34 | }
35 |
36 | .line-container .loading.loading1 .item {
37 | stroke: crimson;
38 | stroke-dasharray: 100;
39 | stroke-width: 10;
40 | stroke-linecap: round;
41 | fill: none;
42 | }
43 |
44 | @keyframes loading1-rotate {
45 | 0% {
46 | transform: rotate(0);
47 | }
48 | 100% {
49 | transform: rotate(360deg);
50 | }
51 | }
52 |
53 |
54 |
--------------------------------------------------------------------------------
/loading/css/style2.css:
--------------------------------------------------------------------------------
1 |
2 | .loading2 .wrapper {
3 | height: 100%;
4 | margin: 0 auto;
5 | font-size: 0;
6 | }
7 |
8 | .loading2 .wrapper .item {
9 | background-color: crimson;
10 | width: 15px;
11 | height: 0px;
12 | display: inline-block;
13 | font-size: 0;
14 | margin: 0 5px;
15 | position: relative;
16 | transform: translateY(145px);
17 | }
18 |
19 | .loading2 .wrapper .item::before {
20 | content: '';
21 | height: 50px;
22 | width: 15px;
23 | position: absolute;
24 | bottom: 0;
25 | left: 0;
26 | border-top-left-radius: 8px;
27 | border-top-right-radius: 8px;
28 | background-color: crimson;;
29 | }
30 |
31 |
32 | .loading2 .wrapper .item::after {
33 | content: '';
34 | position: absolute;
35 | top: 0;
36 | left: 0;
37 | height: 50px;
38 | width: 15px;
39 | border-bottom-left-radius: 8px;
40 | border-bottom-right-radius: 8px;
41 | background-color: crimson;
42 | }
43 |
44 | .loading2 .wrapper .item:nth-child(1)::before {
45 | animation: loading2 2s infinite 0s;
46 | }
47 | .loading2 .wrapper .item:nth-child(2)::before {
48 | animation: loading2 2s infinite .2s;
49 | }
50 | .loading2 .wrapper .item:nth-child(3)::before {
51 | animation: loading2 2s infinite .4s;
52 | }
53 | .loading2 .wrapper .item:nth-child(4)::before {
54 | animation: loading2 2s infinite .6s;
55 | }
56 | .loading2 .wrapper .item:nth-child(5)::before {
57 | animation: loading2 2s infinite .8s;
58 | }
59 |
60 |
61 | .loading2 .wrapper .item:nth-child(1)::after {
62 | animation: loading2 2s infinite 0s;
63 | }
64 | .loading2 .wrapper .item:nth-child(2)::after {
65 | animation: loading2 2s infinite .2s;
66 | }
67 | .loading2 .wrapper .item:nth-child(3)::after {
68 | animation: loading2 2s infinite .4s;
69 | }
70 | .loading2 .wrapper .item:nth-child(4)::after {
71 | animation: loading2 2s infinite .6s;
72 | }
73 | .loading2 .wrapper .item:nth-child(5)::after {
74 | animation: loading2 2s infinite .8s;
75 | }
76 |
77 |
78 | @keyframes loading2 {
79 | 0% {
80 | height: 50px;
81 | }
82 | 50% {
83 | height: 5px;
84 | }
85 | 100% {
86 | height: 50px;
87 | }
88 | }
--------------------------------------------------------------------------------
/loading/css/style3.css:
--------------------------------------------------------------------------------
1 | .loading3 .wrapper {
2 | text-align: center;
3 | }
4 |
5 | .loading3 .wrapper .item {
6 | display: inline-block;
7 | height: 30px;
8 | width: 30px;
9 | font-size: 0;
10 | transform: translateY(135px);
11 | }
12 |
13 | .loading3 .wrapper .item::before {
14 | content: '';
15 | display: inline-block;
16 | height: 30px;
17 | width: 30px;
18 | background-color: crimson;
19 | border-radius: 15px;
20 | }
21 |
22 | .loading3 .wrapper .item:nth-child(1)::before {
23 | animation: loading3 2s infinite 0s;
24 | }
25 | .loading3 .wrapper .item:nth-child(2)::before {
26 | animation: loading3 2s infinite 0.2s;
27 | }
28 | .loading3 .wrapper .item:nth-child(3)::before {
29 | animation: loading3 2s infinite 0.4s;
30 | }
31 |
32 | @keyframes loading3 {
33 | 0% {
34 | transform: scale(1);
35 | }
36 | 50% {
37 | transform: scale(0.1);
38 | }
39 | 100% {
40 | transform: scale(1);
41 | }
42 | }
--------------------------------------------------------------------------------
/loading/css/style4.css:
--------------------------------------------------------------------------------
1 | .loading4 .item {
2 | width: 100px;
3 | height: 100px;
4 | border: 10px solid crimson;
5 | margin: 0 auto;
6 | margin-top: 90px;
7 | animation: loading4-box 2s infinite 0s;
8 | }
9 |
10 | .loading4 .item::before {
11 | content: '';
12 | display: inline-block;
13 | vertical-align: top;
14 | width: 100px;
15 | height: 0px;
16 | background-color: crimson;
17 | animation: loading4 2s infinite 0s;
18 | }
19 |
20 | @keyframes loading4-box {
21 | 0% {
22 | transform: rotate(0deg);
23 | }
24 | 25% {
25 | transform: rotate(0deg);
26 | }
27 | 50% {
28 | transform: rotate(180deg);
29 | }
30 | 75% {
31 | transform: rotate(180deg);
32 | }
33 | 100% {
34 | transform: rotate(360deg);
35 | }
36 | }
37 |
38 | @keyframes loading4 {
39 | 0% {
40 | height: 0px;
41 | }
42 | 25% {
43 | height: 100px;
44 | }
45 | 50% {
46 | height: 100px;
47 | }
48 | 75% {
49 | height: 0px;
50 | }
51 | 100% {
52 | height: 0px;
53 | }
54 | }
--------------------------------------------------------------------------------
/loading/css/style5.css:
--------------------------------------------------------------------------------
1 | .loading5 .wrapper {
2 | height: 120px;
3 | width: 120px;
4 | display: flex;
5 | flex-flow: row wrap;
6 | transform: translateX(90px) translateY(90px);
7 | }
8 |
9 | .loading5 .wrapper .item {
10 | width: 36px;
11 | height: 36px;
12 | background-color: crimson;
13 | font-size: 0;
14 | margin: 2px;
15 | }
16 |
17 | .loading5 .wrapper .item:nth-child(1){
18 | animation: loading5 4s infinite 0s;
19 | }
20 | .loading5 .wrapper .item:nth-child(2){
21 | animation: loading5 4s infinite 0.25s;
22 | }
23 | .loading5 .wrapper .item:nth-child(3){
24 | animation: loading5 4s infinite 0.5s;
25 | }
26 |
27 | .loading5 .wrapper .item:nth-child(4){
28 | animation: loading5 4s infinite 0.75s;
29 | }
30 | .loading5 .wrapper .item:nth-child(5){
31 | animation: loading5 4s infinite 1s;
32 | }
33 | .loading5 .wrapper .item:nth-child(6){
34 | animation: loading5 4s infinite 1.25s;
35 | }
36 |
37 | .loading5 .wrapper .item:nth-child(7){
38 | animation: loading5 4s infinite 1.5s;
39 | }
40 | .loading5 .wrapper .item:nth-child(8){
41 | animation: loading5 4s infinite 1.75s;
42 | }
43 | .loading5 .wrapper .item:nth-child(9){
44 | animation: loading5 4s infinite 2s;
45 | }
46 |
47 | @keyframes loading5 {
48 | 0% {
49 | transform: translateY(0px);
50 | opacity: 1;
51 | }
52 | 5% {
53 | transform: translateY(20px);
54 | opacity: 0;
55 | }
56 | 45% {
57 | transform: translateY(20px);
58 | opacity: 0;
59 | }
60 | 55% {
61 | transform: translateY(0px);
62 | opacity: 1;
63 | }
64 | 100% {
65 | transform: translateY(0px);
66 | opacity: 1;
67 | }
68 | }
--------------------------------------------------------------------------------
/loading/css/style6.css:
--------------------------------------------------------------------------------
1 | .loading6 {
2 | animation: loading6 2s infinite linear 0s;
3 | }
4 |
5 | @keyframes loading6 {
6 | 0% {
7 | transform: rotate(0deg);
8 | }
9 | 100% {
10 | transform: rotate(360deg);
11 | }
12 | }
13 |
14 | .loading6 .item {
15 | width: 120px;
16 | height: 120px;
17 | background-color: crimson;
18 | transform: translateX(90px) translateY(90px);
19 |
20 | animation: loading6-item 2s infinite linear 0s;
21 | }
22 |
23 | @keyframes loading6-item {
24 | 0% {
25 | border-radius: 0;
26 | }
27 | 12.5% {
28 | border-bottom-right-radius: 60px;
29 | }
30 | 25% {
31 | border-radius: 0;
32 | }
33 | 37.5% {
34 | border-top-right-radius: 60px;
35 | }
36 | 50% {
37 | border-radius: 0;
38 | }
39 | 62.5% {
40 | border-top-left-radius: 60px;
41 | }
42 | 75% {
43 | border-radius: 0;
44 | }
45 | 87.5% {
46 | border-bottom-left-radius: 60px;
47 | }
48 | 100% {
49 | border-radius: 0;
50 | }
51 | }
--------------------------------------------------------------------------------
/loading/image/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhangyingwei/html-css-only/3af9f30135bb4780dbed33bee469a0d8e67a039b/loading/image/profile.png
--------------------------------------------------------------------------------
/loading/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | Loading...
13 |
14 |
15 |
16 |
17 |
18 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
38 |
39 |
40 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
59 |
60 |
12 |
13 |
登录
14 |
15 |
16 |
17 |
18 |
19 | 忘记密码
20 |
21 |
22 |
23 |
24 | 注册
25 |
26 |
27 | 提交
28 |
29 |
30 |
11 |
12 |
13 |
18 |
19 | Don`t have account?
Sign up
20 |
21 |
22 |
12 |
13 |
14 |
15 |
16 |
19 |
25 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
Nintendo
35 |
Switch
36 |
37 |
38 |
39 |
40 |
41 |
42 |
48 |
51 |
54 |
55 |
11 |
12 |
13 |
14 |
15 |
404
16 |
你查看的页面貌似丢失了呢...
17 |
返回首页,查看更多内容.
18 |
19 |
12 |
to be or not to be
13 |
that's a question
14 |
to be or not to be
15 |