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>

制作效果：