|
導(dǎo)讀網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而,超級文本標(biāo)記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立... 網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而,超級文本標(biāo)記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標(biāo)記語言之所以稱為超文本標(biāo)記語言,是因為文本中包含了所謂“超級鏈接”點(diǎn)。 本篇文章給大家?guī)淼膬?nèi)容是關(guān)于如何使用純CSS實現(xiàn)電源開關(guān)控件(附源碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。效果預(yù)覽
源代碼下載https://github.com/comehope/front-end-daily-challenges 代碼解讀定義 dom,包含 3 個元素,分別代表 <input type="checkbox" class="toggle"> <div class="switch"></div> <div class="light"></div> 居中顯示: body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #eee;
}定義控件的樣式,把控件的設(shè)置為透明,使其不可見,但仍可與用戶交互。其中字號大小是變量,因為 body {
font-size: var(--font-size);
}
:root {
--font-size: 16px;
}
.toggle {
position: absolute;
font-size: var(--font-size);
width: 5em;
height: 8em;
margin: 0;
filter: opacity(0);
cursor: pointer;
z-index: 2;
}設(shè)置開關(guān)的輪廓: .switch {
position: absolute;
width: 5em;
height: 8em;
border-radius: 1.2em;
background: linear-gradient(#d2d4d6, white);
}用陰影使開關(guān)變得立體: .switch {
box-shadow:
inset 0 -0.2em 0.4em rgba(212, 212, 212, 0.75),
inset 0 -0.8em 0 0.1em rgba(156, 156, 156, 0.85),
0 0 0 0.1em rgba(116, 116, 116, 0.8),
0 0.6em 0.6em rgba(41, 41, 41, 0.3),
0 0 0 0.4em #d4d7d8;
}用偽元素設(shè)置 .toggle ~ .switch::before,
.toggle ~ .switch::after {
position: absolute;
width: 100%;
text-align: center;
font-size: 1.4em;
font-family: sans-serif;
text-transform: uppercase;
}
.toggle ~ .switch::before {
content: '|';
bottom: 1em;
color: rgba(0, 0, 0, 0.5);
text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.8);
}
.toggle ~ .switch::after {
content: 'O';
top: 0.6em;
color: rgba(0, 0, 0, 0.45);
text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.4);
}把 <input type="checkbox" checked="checked" class="toggle"> 設(shè)置處于 .toggle:checked ~ .switch {
background: linear-gradient(#a1a2a3, #f0f0f0);
box-shadow:
inset 0 0.2em 0.4em rgba(212, 205, 199, 0.75),
inset 0 0.8em 0 0.1em rgba(255, 255, 255, 0.77),
0 0 0 0.1em rgba(116, 116, 118, 0.8),
0 -0.2em 0.2em rgba(41, 41, 41, 0.18),
0 0 0 0.4em #d4d7d8;
}設(shè)置處于 .toggle:checked ~ .switch::before {
bottom: 0.3em;
text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.5);
}
.toggle:checked ~ .switch::after {
top: 1.2em;
text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.15);
}接下來設(shè)置燈光效果。 .toggle ~ .light {
width: 100vw;
height: 100vh;
background-color: #0a0a16;
z-index: 1;
filter: opacity(0.7);
}再設(shè)置處于 .toggle:checked ~ .light {
filter: opacity(0);
}大功告成! 以上就是如何使用純CSS實現(xiàn)電源開關(guān)控件(附源碼)的詳細(xì)內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章! 網(wǎng)站建設(shè)是一個廣義的術(shù)語,涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!