純HTML+CSS:滑動(dòng)手風(fēng)琴

效果一:當(dāng)鼠標(biāo)移動(dòng)到圖標(biāo)上時(shí),圖片會(huì)響應(yīng)所點(diǎn)處圖標(biāo)變大且變色,在其右側(cè)會(huì)展示出文字

效果如下:

圖標(biāo)樣式部分可在bootcdn中搜索genericons,使用<link href>引入

<link rel="stylesheet">

HTML部分


```<!DOCTYPE html>

<html lang="en">

<head>

? ? <meta charset="UTF-8">

? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">

? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">


? ? <link rel="stylesheet" href="inde.css">

? ? <title>Slider</title>

</head>

<body>

<div class="container">

<header><h1>手風(fēng)琴</h1></header>

</div>

<ul class="slider">

? <li class="tab">

? ? ? <div class="social youtube">

? ? ? ? ? <a href="#" >youtube</a>

? ? ? </div>

? ? ? <div class="content">

? ? ? ? ? <h1>youtube</h1>

? ? ? ? ? <p>content</p>

? ? ? </div>

? </li>

</body>

</html>```


html沒(méi)什么好說(shuō)的 就是建立6個(gè)盒子

CSS部分

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容