Other_4.仿-慕课网课程选项卡_效果2（文字变换，图片伸缩）
来源：互联网 发布：中国为什么维稳 知乎 编辑：程序博客网 时间：2024/06/08 05:45
这是仿-慕课网课程选项卡的第二个效果（文字变换，图片伸缩）。
<!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>
制作效果：
鼠标经过：
- Other_4.仿-慕课网课程选项卡_效果2（文字变换，图片伸缩）
- Other_3.仿-慕课网课程选项卡_效果1（上下伸缩）
- flex（伸缩盒）仿外卖选项
- 赵雅智_名片夹（4）_Android中listview可折叠伸缩仿手风琴效果（静态）
- 赵雅智_名片夹（5）_Android中listview可折叠伸缩仿手风琴效果（动态）
- 仿windows选项卡效果拾零
- 仿windows选项卡效果拾零
- 仿海报工厂效果的自定义View（在图片上输入文字）
- 仿163首页广告伸缩效果
- 仿射变换（2）
- PS制作文字扫描效果（仿旧效果）
- 仿windows选项卡-2
- Flex 效果_可伸缩隐藏菜单
- 仿网易div css滑动门选项卡效果
- 仿qq顶部栏tab选项卡切换效果
- Android实现仿网易首页选项卡动态滑动效果
- Android ViewPage+Fragment伸缩实现菜单效果，仿Ifanr
- 仿射变换2
- 宇宙总统
- 邮件群发（配置文件读取多个发送对象）
- unity 创建预制体的实例
- XCode打开Archive界面
- kernel 调用uefi的run time service 关机
- Other_4.仿-慕课网课程选项卡_效果2（文字变换，图片伸缩）
- 利用log4j显示hibernate打印sql中的参数
- 红外项目总结
- php学习笔记
- 《javascript设计模式与开发实践》阅读笔记（10）—— 组合模式
- IOS 数据持久化的NSKeyedArchiver CoreData FMDB几种方式的用法
- javascript基础（数组）（十九）
- RAC的关闭与启动
- JavaScript 后台处理（Web Worker）
