破格式版面
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
| <div class="wrap">
<div class="item">
<div class="icon"><i class="fas fa-fish fa-4x"></i></div>
<div class="text">
<h3>金魚系列 VI</h3>
<p>
破格式設計切版，進階的簡單切版。
</p>
<p>
不起作家科技臉色設施積極中文此刻在這我來內置模組，無線電力種種發佈眼光治理東方設施，未來讓她老婆手續限制科學明天不可語言擁有歌詞。
</p>
</div>
</div>
<div class="item">
<div class="icon"><i class="fas fa-brain fa-4x"></i></div>
<div class="text">
<h3>切版切切切</h3>
<p>
跟著金魚系列切版，可補強觀念，也可學到很多切版!
</p>
<p>
不起作家科技臉色設施積極中文此刻在這我來內置模組，無線電力種種發佈眼光治理東方設施，未來讓她老婆手續限制科學明天不可語言擁有歌詞。
</p>
</div>
</div>
<div class="item">
<div class="icon"><i class="fas fa-code fa-4x"></i></div>
<div class="text">
<h3>多多練習</h3>
<p>
多多練習，就會進步!
</p>
<p>
不起作家科技臉色設施積極中文此刻在這我來內置模組，無線電力種種發佈眼光治理東方設施，未來讓她老婆手續限制科學明天不可語言擁有歌詞。
</p>
</div>
</div>
</div>
|
CSS
.wrap 裡的 padding-top: 50px; 是要補上因爲破格凸出的圖示空間(依照圖示的大小來設定)。
為了 RWD 應用，因此使用 % 來處理寬高。
另外 icon 外框使用 :before 來處理，先做成圓形，但是因為 border 是由正方形變化成圓形，會有斜角交接點的問題。因此要將其旋轉來解決，左、下邊框做透明處理。
最後加上 animation 做持續左右搖動動畫。
ps.
CSS 筆記 - 三角形演進史
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
| // css reset
* {
margin: 0;
padding: 0;
list-style: none;
}
body,
html {
height: 100%;
}
body {
box-sizing: border-box;
font-family: 'Noto Sans TC', sans-serif;
display: flex;
align-items: center;
}
.wrap {
width: 1200px;
margin: 0 auto;
// item 變為橫排
display: flex;
// 補回往上推擠圖示的空間(依照自己設定的圖示大小給予適當的像素值)
padding-top: 50px;
}
.item {
// RWD 處理，寬度一開始式設定 33.33333%，要扣掉線條寬度以及 margin 寬度，最後變成 29.33333%
width: 29.33333%;
height: 269px;
text-align: center;
margin: 0 3%;
background-color: #aaa;
border: 5px solid #ffd665;
border-radius: 20px;
box-shadow: 5px 10px 5px #aaa;
position: relative;
cursor: pointer;
//item hover
&:hover {
.fas {
// 持續左右搖動動畫 infinite 持續 alternate 來回
animation: shake 0.2s linear infinite alternate;
transition: all 0.5s;
// color: #ffebb4;
filter: drop-shadow(0 0 10px #ffebb4);
}
}
.icon {
width: 150px;
height: 150px;
margin: -75px auto 0;
background-color: #aaa;
// 做成圓形
border-radius: 100%;
// 偽元素的相對定位
position: relative;
// icon 外框線
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border: 5px solid #ffd665;
// 扣掉邊框，才會剛好圓形在框中間
top: -5px;
left: -5px;
border-radius: 100%;
border-left: 5px solid transparent;
border-bottom: 5px solid transparent;
// 旋轉上、右框線，形成半圓
transform: rotate(-45deg);
}
.fas {
// 置中對齊，高度也為 150 px
line-height: 150px;
color: #ffd665;
}
}
.text {
padding: 20px;
// 絕對定位於 item，正方形旋轉後下方空間太大，為了讓畫面好看且平衡，使用絕對定位讓文字與 .icon 空間相距適合的距離。
position: absolute;
top: 30px;
h3 {
color: #ffd665;
font-size: 32px;
font-weight: 500;
padding-bottom: 1%;
}
p {
color: #ffffff;
font-weight: 100;
line-height: 1.5;
padding-bottom: 5%;
}
}
}
@keyframes shake {
0% {
transform: rotate(-10deg);
}
100% {
transform: rotate(10deg);
}
}
|
參考：
https://hsuchihting.github.io/css/20200721/3279463377/
https://www.youtube.com/watch?v=l-sQNXNrw3s
https://hsuchihting.github.io/css/20200718/3868981590/
