一、手风琴效果

    <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. SpringBoot 的不同

    这些在写前端页面的时候,ssm框架中,在页面做出修改之后,保存一下,重新刷新一下浏览器页面就发生了更新 但是sprigBoot中好像不一样,好像是需要对页面进行重新编译一下,浏览器页面才会发生变化 ( ...

  2. 在Linux环境下设置 ora-01031:insufficient privileges解决方法总结

    今天需要使用sys用户处理问题,但是报错上面ora-01031:insufficient privileges. 在网上有很多方法,这个是自己经过测试的方法步骤. 1:首先检查文件sqlnet.ora ...

  3. Arduino系列之按键模块（一）

    今天我将简单介绍按键模块计数的原理: 我们常用的按键及按键模块有2脚和4脚的,其内部结构如图所示,当按下按键时就会接通按键两端,当放开时,两端自然断开.                         ...

  4. python安装BeautifulSoup4

    今天学习使用python爬虫,书上说让安装一个BeautifulSoup的插件,网上找了,说是下载压缩文件,直接解压然后,通过两行代码就实现了,我下载了两个,还是无法使用,后来就使用在在Pycharm ...

  5. Eureka注册中心高可用集群配置

    Eureka高可用集群配置 当注册中心扛不住高并发的时候,这时候 要用集群来扛: 我们再新建两个module  microservice-eureka-server-2002  microservic ...

  6. session的属性设置

    2.       session的属性设置 先看案例: 登陆页面: <%@page contentType="text/html;charset=gb2312"%> & ...

  7. ubuntu 如何搭建svn 服务器

    1.在终端中直接输入  sudo apt-get install subversion,选择安装即可 来这个subversion同时包含了服务端和客户端. 2.(可选)看版本命令 svnserve - ...

  8. 什么是伪静态，以及ubuntu + apache 如何实现伪静态

    原文链接:http://www.cnblogs.com/ainiaa/archive/2010/07/25/1784564.html php伪静态 一直在做php的开发工作.在开发的过程中老早就听说了 ...

  9. https原理总结

    博客搬家: https原理总结 最近在公司项目的服务器上做一些内部接口,要求使用https,于是花时间研究了一波.我们熟知的http在传输时未对数据进行加密,在传输一些敏感信息时存在着不小的安全隐患. ...

  10. HDU_3652_数位dp

    http://acm.hdu.edu.cn/showproblem.php?pid=3652 cal(a,b,c,d),a表示当前位置,b表示是否有13的3种状态,c表示前面的数%13后的剩余,d表示 ...