html+css布局实例:CSS过渡-Transitions手风琴效果之鼠标位置的图片自动移动
效果图:
小伙伴们需要对CSS过渡-Transitions和前面的基础知识有一定了解
你可以拿你自己的图片放进去:
小伙伴们我没有截取动图的软件,不能给你们看动图啦
鼠标没有点击之前:
鼠标点击图片时:
效果如下
<!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>Document</title><style>*{margin: 0;padding: 0;list-style: none;}ul{width: 1000px;height: 300px;border: 1px solid;margin: 50px auto;overflow: hidden;}ul li{width: 150px;height: 300px;/* 设置浮动后清---除浮动 */float: left;/* 默认移动方式 */transition: width 0.5s;}/* html文档执行顺序是自上而下的,所以你想让那个样式先生效 *//* 保险起见 */ul:hover li{width: 100px;}/* 鼠标移入 图片变为400 */ul li:hover{width: 400px;}</style>
</head>
<body><ul><li><img src="../images/ad7.jpeg" alt=""></li><li><img src="../images/ad8.jpg" alt=""></li><li><img src="../images/ad9.jpeg" alt=""></li><li><img src="../images/ad10.jpg" alt=""></li><li><img src="../images/ad11.jpg" alt=""></li><li><img src="../images/ad12.jpg" alt=""></li></ul>
</body>
</html>
html+css布局实例:CSS过渡-Transitions手风琴效果之鼠标位置的图片自动移动相关推荐
- CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼
文章转自:http://www.cnblogs.com/honoka/p/5161836.html 今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽 ...
- CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼...
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
- div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧 在DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定 ...
- css布局:为什么margin-right不起效果,如何居中显示。
css布局:为什么margin-right不起效果 ,以及如何居中显示. 不清楚这个问题其实是没有弄明白网页水平布局的一个小原理 假设这里有一个div,在这个div盒子里面有一个小的div盒子 (这里 ...
- html+css布局实例:CSS过渡-Transitions文字逐渐变大的效果
CSS过渡-Transitions文字逐渐变大的效果图: 小伙伴们我没有截取动图的软件,不能给你们看文字逐渐放大的动图啦 鼠标点击前: 鼠标点击后: 有两种代码,两种变大方式: 第一种: 动态效果展 ...
- CSS 布局实例系列(四)如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化?...
Hello,小朋友们,还记得我是谁吗?对了,我就是~超威~好啦,言归正传,今天的布局实例是: 实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化,就如下图: 肯定有人心里犯嘀咕 ...
- php div 实现上中下布局,上中下结构DIV CSS布局实例
实例布局之上中下结构DIV CSS布局 上中下结构为常见布局结构,一般普通(企业网站)网页我们可以大致分为上(头部).中(内容区).下(底部版权)组成.而这其实是由最简单上下结构CSS布局演变而成,只 ...
- CSS布局教程:用DIV CSS实现国内经典式三行两列布局-CSS布局实例
我们碰到过很多的企业网站或其它小型的展示类网站,有一些共同的特点,即顶部放一个大的导航或BANNER,右侧是链接或图片,左侧放置内容,页面底部放置版权信息等.这样的形式是国内经典式的布局,我们这里不对 ...
- div+css布局实例淘宝分析(三)(1)
在第二节我们分析了淘宝网页的导航条代码,这次我们来分析淘宝网页的主要内容块,由于内容比较多,所以我准备分开小块来分析,对于刚入门学DIV,CSS 布局的朋友来说,不知道从那里下手,我以为从分析优秀网站 ...
最新文章
- Linux系统调用--getrlimit()与setrlimit()函数详解【转】
- IB客座主编(一)--安普布线亚太区业务总监黎启枝
- 「SNOI2019」
- Java技术分享:集群环境下的定时任务
- worknc的后处理如何安装_UG NX后处理安装方法(新手入门)
- 来自官方文档的Ubuntu 16.04 + tensorflow-GPU 配置
- Rational Rose学习笔记02:创建用例图
- 数据库内存泄漏——A SQLiteConnection object for database '/data/data/.../databases/....db' was leaked!...
- mybatis中refid是什么意思
- ofstream的使用方法
- Android 打开WIFI并快速获取WIFI的信息
- 01【C3D 行为识别】项目下载 环境配置 数据集转化视频帧 UCF101数据集处理
- 如何让Win10 新建txt文档, 默认格式UTF-8
- ps 毛发 边缘_PS教程:教你如何利用PS调整边缘高速度高效率扣头发丝
- ffmpeg 音频转amr
- python-scrapy模拟登陆网站--登陆青果教务管理系统(三)
- 【TsinsenA1339】JZPLCM(顾昱洲) 树状数组
- win10无需密码退出天擎
- 有情感会说话,虚拟人脸Zoe诞生
- 中国古代经典励志名言100句,百读不厌,陪孩子一起读经典!
热门文章
- 【ML】KMeans 原理 + 实践(基于sklearn)
- Fragment not attached to Activity
- 天津轻工职业技术学院计算机专业怎么样,天津轻工职业技术学院可以转专业吗,天津轻工职业技术学院新生转专业政策...
- 书呆子rico_Excel书呆子优胜者的非常恐怖的秋季赠品
- 大数据工程师学习路线,大数据培训后好就业吗?能拿多少钱?
- vivo Hi-Fi+QQ音乐 数字音乐市场的一剂良方
- echarts:从github及其镜像下载china.js和china.json
- au6989sn-gtd_GTD和OmniFocus 2-我的工作流程
- 《方块方舟》自定义服务器工具,新闻-方块方舟官网-ARK正版授权-开放式体素沙盒生存游戏...
- 2019年TI杯 简易电路特性测试仪 制作过程(6)——测量任务分析(Av、fH) 20/05/01