前端特效 - 前置- - 01. 百叶窗

　逆水行舟用力撑，一篙松劲退千寻。

01.百叶窗

今日份打卡！---经验值+1！

进度：001

效果图：

鼠标经过：

（有过渡）

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>百叶窗</title><style>*{padding: 0;margin: 0;}body{background-color: darkslategray;}.box{width: 1700px;height: 224.5px;margin: 20% 20%;}li{width   : 65px;height  : 224.5px;display: inline-block;list-style: none;position: relative;transition: all 0.3s;}/* li:hover{width: 200px;} */.img{position: absolute;left: 0;bottom: 0;}.box:hover li{width: 200px;}</style>
</head>
<body><ul  class="box"><li><div class="img"><img src="../案例/images/2.jpg" alt="" width="400px" height=""></div></li><li><div class="img"><img src="../案例/images/3.jpg" alt="" width="400px" height=""></div></li><li><div class="img"><img src="../案例/images/4.jpg" alt="" width="400px" height=""></div></li><li><div class="img"><img src="../案例/images/1.jpg" alt="" width="400px" height=""></div></li></ul>
</body>
</html>

前端特效 - 前置- - 01. 百叶窗相关推荐

【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）
卡塔尔世界杯元素python海龟绘图(附源代码) 世界杯主题前端特效5个(附源码)程序人生本文目录: 一.python turtle海龟绘图卡塔尔世界杯元素 (1).绘制效果图 (2).代码演示方法 ...
三郎前端特效学习源代码：魔法旋转粒子动态渐变特效
三郎前端特效学习源代码:魔法旋转粒子动态渐变特效简单介绍效果图源代码 html部分 js部分第二个js部分简单介绍类似电影里的魔法效果轨迹次数速度都可以自己改改效果图源代码 html ...
用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）
活动地址:CSDN21天学习挑战赛用代码写出浪漫合集(爱心.玫瑰花) 本文目录: 一.前言二.用python.matplotlib.Matlab.java绘制爱心 (1)爱心图形1( ...
推荐八款来自极客标签的超棒前端特效[第八期]
为什么80%的码农都做不了架构师?>>> 日期:2013-6-24 来源:GBin1.com 本周,我们带来了极客社区推荐的10款前端特效,非常有趣的小游戏和页面生成.希望可 ...
推荐10款来自极客标签的超棒前端特效[第五期]
来源:GBin1.com 本周推荐的10款来自极客社区的前端特效!希望大家会喜欢! 使用CSS实现网格矩阵多维体效果用鼠标触动旋转魔方,会将其转化为立体模式旋转. GBdebug在线调试地址:htt ...
H5+css+js前端特效源代码：发光动画按钮：上传按钮
前端特效:发光动画按钮:上传按钮 H5+CSS+JS 骨架+皮肤+功能效果展示源代码: H5部分: <!DOCTYPE html> <html lang="en&quo ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <! ...
Web前端-html页面-01（锚点、表单、个人简历）
Web前端学习中-01 先来几张图镇楼! 1.锚点链接 2.单选框图片背景更换 3.嵌套表格 4.HTML版个人简历
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个复古手机键盘（带声音）的动画效果~~适合初学者~超简单~
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个复古手机键盘(带声音)的动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYPE ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYP ...

前端特效 - 前置- - 01. 百叶窗

逆水行舟用力撑，一篙松劲退千寻。

01.百叶窗

前端特效 - 前置- - 01. 百叶窗相关推荐

最新文章

热门文章