Other_4.仿-慕課網課程選項卡_效果2（文字變換，圖片伸縮）

2024-04-27 15:14:32

字體：大中小

來源：轉載

供稿：網友

這是仿-慕課網課程選項卡的第二個效果（文字變換，圖片伸縮）。

<!DOCTYPE html><html><head><meta charset="utf-8"><title>仿-慕課網課程選項卡_效果2</title> <style>*{padding: 0;margin:0;list-style: none;text-decoration: none;font-family:Microsoft YaHei}.ul2{margin:30px 0 0 50px;width: 800px;height: 200px;}

.ul2 li{float: left; margin-right: 20px;}

nav .box2{width: 225px;height: 175px;box-shadow: 0 4px 20px #ccc;position: relative;overflow: hidden;cursor: pointer;transition: 0.5s}nav .ul2 .first{background: #fff;position: absolute;top:105px;}nav .ul2 .first .top2{width: 225px;height: 40px;text-align: center;line-height: 40px;font-size: 15px;}nav .ul2 .box2 .bottom2{width: 205px;height: 30px;line-height: 30px;font-size: 12px;color:#999;padding: 0 10px}nav .ul2 .box2 .bottom2 span{float: right;}nav .ul2 .last{background: #fff;position: absolute;top:105px;display: none;}nav .ul2 .last .top2{color: #666;font-size: 12px;text-align: center;width: 225px;height: 30px;padding: 5px 0}nav .ul2 .box2 img{transition: 1.5s}nav .ul2 .box2:hover img{transform: scale(1.3); }nav .ul2 .box2:hover .last{display: block;}nav .ul2 .box2:hover{box-shadow: 0 4px 30px #B2B2B2;}</style></head><body>

效果二<nav><ul class="ul2"><li><div class="box2"><img src="../img/01.jpg"/><div class="first"><p class="top2">php入門篇</p><p class="bottom2">更新至7-14<span>課程時長:5小時56分</span></p></div><div class="last"><p class="top2">3小時輕松幫你快速掌握PHP語言基礎知識,為后續PHP進級課程學習打下基礎。</p><p class="bottom2">2015-08-17<span>272648人學習</span></p></div></div></li><li><div class="box2"><img src="../img/01.jpg"/><div class="first"><p class="top2">PHP入門篇</p><p class="bottom2">更新至7-14<span>課程時長:5小時56分</span></p></div><div class="last"><p class="top2">3小時輕松幫你快速掌握PHP語言基礎知識,為后續PHP進級課程學習打下基礎。</p><p class="bottom2">2015-08-17<span>272648人學習</span></p></div></div></li><li><div class="box2"><img src="../img/01.jpg"/><div class="first"><p class="top2">PHP入門篇</p><p class="bottom2">更新至7-14<span>課程時長:5小時56分</span></p></div><div class="last"><p class="top2">3小時輕松幫你快速掌握PHP語言基礎知識,為后續PHP進級課程學習打下基礎。</p><p class="bottom2">2015-08-17<span>272648人學習</span></p></div></div></li></ul></nav></body></html>

制作效果：