一、手风琴效果

    <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转换模块的更多相关文章

  1. css过渡模块和2d转换模块

    今天,我们一起来研究一下css3中的过渡模块.2d转换模块和3d转换模块 一.过渡模块transition (一)过度模块的三要素: 1.必须要有属性发生变化 2.必须告诉系统哪个属性需要执行过渡效果 ...

  2. 2D转换模块

    2D转换模块(transform) 1.取值:rotate(45deg)--- 旋转,默认以自己为中心作为参考点来旋转 .translate(100px,0px)--- 平移,第一个参数代表水平方向, ...

  3. 基于css3实现手风琴效果

    终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这 ...

  4. 使用 jQuery & CSS3 实现优雅的手风琴效果

    手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...

  5. 基于 jQuery 实现垂直滑动的手风琴效果

    今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...

  6. JS+JQ手风琴效果

    最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; p ...

  7. 纯CSS手风琴效果

    CSS手风琴效果 主体代码如下:                                                                                     ...

  8. jquery 图片手风琴效果

    这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...

  9. 一步步教你css3手风琴效果的实现

    什么是手风琴效果? 首先我们先来看一段动画,如下图所示: 在上面动画中,我们不难发现,一排照片正常排列,当我鼠标移上(:hover)时,照片会变大显示并且把其它照片挤小.那么在鼠标来回移动的过程中,画 ...

随机推荐

  1. X-CTF(REVERSE入门) re1

    运行程序 32位ida打开,shift+f12查看运行时的中文,这里双击flag get字符串进入rdata段 双击后面的函数,进入text段,小的窗口视图里可以看见汇编代码调用函数的句子 右边的即是 ...

  2. A Simple Introduction To Computer Networking

    Most networking discussions are a jumble of acronyms. Forget the configuration details - what are th ...

  3. copy constructor和copy assignment operator的区别

    拷贝构造函数(copy constructor)被用来以一个对象来初始化同类型的另一个对象,拷贝赋值运算符(copy assignment operator)被用来将一个对象中的值拷贝到同类型的另一个 ...

  4. java架构之路-（netty专题）netty的基本使用和netty聊天室

    上次回顾: 上次博客,我们主要说了我们的IO模型,BIO同步阻塞,NIO同步非阻塞,AIO基于NIO二次封装的异步非阻塞,最重要的就是我们的NIO,脑海中应该有NIO的模型图. Netty概念: Ne ...

  5. js笔记（2）--第一天记录

    ---恢复内容开始--- 模仿了网站的一个常见小功能,开关灯小功能. 代码: <!DOCTYPE html> <html lang="en"> <he ...

  6. 基于TensorFlow的MNIST手写数字识别-初级

    一:MNIST数据集    下载地址 MNIST是一个包含很多手写数字图片的数据集,一共4个二进制压缩文件 分别是test set images,test set labels,training se ...

  7. Codeforces_820

    A.直接模拟. #include<bits/stdc++.h> using namespace std; int c,v0,v1,a,l; int main() { ios::sync_w ...

  8. BZOJ 3339 Rmq Problem(离线+线段树+mex函数)

    题意: q次询问,问[l,r]子区间的mex值 思路: 对子区间[l,r],当l固定的时候,[l,r]的mex值对r单调不减 对询问按照l离线,对当前的l,都有维护一个线段树,每个叶节点保存[l,r] ...

  9. 2019icpc西安邀请赛

    来源:https://www.jisuanke.com/contest/2625?view=challenges 更新中 A.Tasks 直接贪心 代码:听说当时很多队伍提前拆题甚至上机了,所以很多0 ...

  10. error C2338: No Q_OBJECT in the class with the signal (NodeCreator.cpp)

    在Qt中,当派生类需要用到信号与槽机制时,有两个要求. 1.该类派生自QObject类. 2.类中有Q_OBJECT宏. 本次报错的原因就是因为没有在类中添加Q_OBJECT宏. 而我的出错原因更傻逼 ...