HTML连载67-手风琴效果、2D转换模块
一、手风琴效果
<style>
*{
margin:0;
padding:0;
}
ul{
width: 960px;
height: 300px;
margin:100px auto;
border:1px solid red;
}
ul li {
list-style: none;
width: 158px;
height: 300px;
float:left;
border:1px solid black;
transition-property:width;
transition-duration:1s;
}
ul li img {
height: 300px;
width: 300px;
}
ul:hover li{
width: 100px;
}
ul li:hover{
width: 300px;
}
</style>
</head>
<body>
<ul>
<li><img src="data:image/play_tennis.jpg" alt=""></li>
<li><img src="data:image/play_tennis.jpg" alt=""></li>
<li><img src="data:image/play_tennis.jpg" alt=""></li>
<li><img src="data:image/play_tennis.jpg" alt=""></li>
<li><img src="data:image/play_tennis.jpg" alt=""></li>
<li><img src="data:image/play_tennis.jpg" alt=""></li>
</ul>
二、2D转换模块
1.什么是2D转换模块？
<style>
*{
margin:0;
padding:0;
}
ul{
width: 800px;
height: 500px;
border:1px solid black;
margin:10px auto;
}
ul li {
list-style:none;
height: 50px;
width: 100px;
margin:0 auto;
margin-top:50px;
text-align:center;
line-height:50px;
}
ul li:nth-child(2){
transform:rotate(90deg);/*参数是指它的旋转度数*/
}
ul li:nth-child(3){
transform:translate(-100px,0px);/*里面的参数代表平移多少个单位长度*/
}
ul li:nth-child(4){
transform:scale(1.5,0.5);/*第一个参数就是水平方向缩放的系数，第二个参数就是垂直方向的缩放系数*/
/*如果里面只有一个参数的话，就代表水平和垂直都是这个缩放系数*/
}
ul li:nth-child(5){
transform:rotate(45deg) translate(100px,20px) scale(2,3);
/*注意点：如果需要多个转换，那么使用空格来隔开;2D的转换模块会修改元素的坐标系，所以旋转之后在平移
可能就会遇到不是水平平移的，因此要注意一下
*/
}
</style>
</head>
<body>
<ul>
<li>正常的</li>
<li>旋转的</li>
<li>平移的</li>
<li>缩放的</li>
<li>综合的</li>
</ul>
三、源码：
D167_AccordinEffect.htmlD168_2DTransformModule.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D167_AccordinEffect.html
https://github.com/ruigege66/HTML_learning/blob/master/D168_2DTransformModule.html
2.CSDN：https://blog.csdn.net/weixin_44630050
3.博客园：https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包
HTML连载67-手风琴效果、2D转换模块的更多相关文章
- css过渡模块和2d转换模块
今天,我们一起来研究一下css3中的过渡模块.2d转换模块和3d转换模块 一.过渡模块transition (一)过度模块的三要素: 1.必须要有属性发生变化 2.必须告诉系统哪个属性需要执行过渡效果 ...
- 2D转换模块
2D转换模块(transform) 1.取值:rotate(45deg)--- 旋转,默认以自己为中心作为参考点来旋转 .translate(100px,0px)--- 平移,第一个参数代表水平方向, ...
- 基于css3实现手风琴效果
终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这 ...
- 使用 jQuery & CSS3 实现优雅的手风琴效果
手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...
- 基于 jQuery 实现垂直滑动的手风琴效果
今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...
- JS+JQ手风琴效果
最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; p ...
- 纯CSS手风琴效果
CSS手风琴效果 主体代码如下: ...
- jquery 图片手风琴效果
这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...
- 一步步教你css3手风琴效果的实现
什么是手风琴效果? 首先我们先来看一段动画,如下图所示: 在上面动画中,我们不难发现,一排照片正常排列,当我鼠标移上(:hover)时,照片会变大显示并且把其它照片挤小.那么在鼠标来回移动的过程中,画 ...
随机推荐
- Python的条件控制及循环
一.条件控制: 1.If语句的使用: Python中if语句的一般形式如下所示: 上图中: 如果 "score>=90" 为 True 将执行 "print(‘优秀 ...
- php--->把json传来的stdClass Object类型转array
php把json传来的stdClass Object类型转array 1.Php中stdClass.object.array的概念 stdClass是PHP的一个基类,即一个空白的类,所有的类几乎都继 ...
- HDU-2841 Visible Trees(莫比乌斯反演)
Visible Trees 传送门 解题思路: 实际上的答案就是1~n与1~m之间互质的数的对数,写出式子就是 \(ans=\sum^{n}_{i=1}\sum^{m}_{j=1}[gcd(i,j)= ...
- MVVM的理解和Vue的生命周期
一.对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View 代表UI 组件,它负责将数 ...
- static静态变量在c++类中的应用实例
这个static 如果写在类中,那么就可以得到一个局部的静态变量,也就是说可以实现在类内保存某个特殊值不随函数释放而消失的作用.应用中由于赋初值的位置不对而报错,错误提示为:“无法解析外部符号 ... ...
- SQL Server 常用的数据类型
1. 字符串数据类型 char 此数据类型可存储1~8000个定长字符串,字符串长度在创建时指定:如未指定,默认为char(1).每个字符占用1byte存储空间. nchar ...
- java枚举类的常见用法
枚举类型(Enumerated Type) 很早就出现在编程语言中,它被用来将一组类似的值包含到一种类型当中.而这种枚举类型的名称则会被定义成独一无二的类型描述符,在这一点上和常量的定义相似.不过相比 ...
- Go语言项目中使用zap日志库（翻译）
本文先介绍了Go语言原生的日志库的使用,然后详细介绍了非常流行的Uber开源的zap日志库,同时介绍了如何搭配Lumberjack实现日志的切割和归档. 在Go语言项目中使用Uber-go的Zap L ...
- 关于使用详解ASP.NET State Service
ASP.NET State Service服务如果启动可以解决这个问题,它会生成一个aspnet_state.exe进程,这个就是Session信息的进程.只要这个进程在,就算是重启了IIS,站点的S ...
- Hapi+MySql项目实战环境初始化（一）
因为项目要求特殊的原因,公司要求使用Nodejs+HApi(纯英文的API)+Mysql构建新的项目.网上找了一堆资料,看了半天一脸懵逼.结论就是:版本的差异,资料国内几乎都是旧的17年前的了.根据资 ...