过渡模块-编写过渡效果：

1、编写过渡套路：
    1.1不要管过渡，先编写基本界面
    1.2修改我们认为需要修改的属性
    1.3再给被修改属性的元素添加过渡即可

2、弹性效果
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            height: 100px;
            background-color: red;
            font-size: 80px;
            margin: 200px auto;
            text-align: center;
        }
        div span{
            /*transition-property:margin;*/
            /*transition-duration:2s;*/
            transition:margin 2s ease 0s;
        }
        div:hover span{
            margin: 0 30px;
        }
    </style>

<body>
        <div>
            <span>计</span>
            <span>算</span>
            <span>机</span>
            <span>科</span>
            <span>学</span>
            <span>与</span>
            <span>技</span>
            <span>术</span>
        </div>
    </body>

2、手风琴效果
    <style>
            *{
                margin: 0;
                padding: 0;
            }
            ul{
                border: 1px solid #000;
                margin: 300px auto;
                height: 500px;
                width: 1800px;
                overflow: hidden;
            }
            ul li{
                list-style: none;
                height: 500px;
                width: 300px;
                float: left;
                transition:width 0.5s;
            }
            ul li img{
                height: 500px;
            }
            ul:hover li{
                width: 200px;
            }
            ul li:hover{
                width: 800px;
            }
    </style>

<body>
    <ul>
        <li><img src="data:images/手风琴/1.jpg" alt=""/></li>
        <li><img src="data:images/手风琴/3.jpg" alt=""/></li>
        <li><img src="data:images/手风琴/4.jpg" alt=""/></li>
        <li><img src="data:images/手风琴/2.jpg" alt=""/></li>
        <li><img src="data:images/手风琴/5.jpg" alt=""/></li>
        <li><img src="data:images/手风琴/6.jpg" alt=""/></li>
    </ul>
    </body>

CSS学习笔记-过度模块-编写过渡效果的更多相关文章

  1. CSS学习笔记-过渡模块

    过渡模块:    1.过渡三要素        1.1必须要有属性发生变化        1.2必须告诉系统哪个属性需要执行过渡效果        1.3必须告诉系统过渡效果持续时长    2.格式: ...

  2. CSS学习笔记-03- 过渡模块之前奏篇 a标签的伪类选择器

    CSS3 2D转换CSS3 3D转换CSS3 过渡CSS3 动画 CSS3 的四大金刚. 想要实现酷炫的视觉效果,上面4个是必须要掌握的.学习之前,先复习一下 视觉盛宴的前菜 :a标签的伪类选择器 铛 ...

  3. CSS学习笔记-动画模块

    动画模块:    1.过渡和动画之间的异同        1.1不同点            (1)过渡必须人为触发才能执行            (2)动画不需要人为触发就可以执行        1 ...

  4. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  5. HTML+CSS学习笔记(2) - 认识标签（1）

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  6. HTML+CSS学习笔记(1) - Html介绍

    HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...

  7. AM335x(TQ335x)学习笔记——触摸屏驱动编写

    前面几篇文章已经通过配置DTS的方式完成了多个驱动的移植,接下来我们解决TQ335x的触摸驱动问题.由于种种原因,TQ335x的触摸屏驱动是以模块方式提供的,且Linux官方内核中也没有带该触摸屏的驱 ...

  8. CSS学习笔记之CSS3新特性

    目录 1.边框 2.背景 3.文本 4.字体 5.转换 6.过渡 7.动画 8.多列 9.自定义尺寸 CSS 用于控制网页的样式和布局,而 CSS3 是最新的 CSS 标准,这篇文章将着重介绍 CSS ...

  9. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

随机推荐

  1. 阿里云ECS部署Redis主备哨兵集群遇到的问题

    一.部署 详细部署步骤:https://blog.csdn.net/lihongtai/article/details/82826809 Redis5.0版本需要注意的参数配置:https://www ...

  2. Kafka实战(七) - 优雅地部署 Kafka 集群

    既然是集群,必然有多个Kafka节点,只有单节点构成的Kafka伪集群只能用于日常测试,不可能满足线上生产需求. 真正的线上环境需要考量各种因素,结合自身的业务需求而制定.看一些考虑因素(以下顺序,可 ...

  3. Nginx:The Location Block Selection Algorithm

    Nginx:The Location Block Selection Algorithm,摘自NGINX:A PRACTICAL GUIDE TO HIGH PERFORMANCE Nginx配置文件 ...

  4. 死磕 java线程系列之线程池深入解析——构造方法

    (手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本. 简介 ThreadPoolExecutor的构造方法是创建线程池的入口,虽然比较简单,但是信息量很大,由此也能 ...

  5. 使用VeeValidate的data-vv-scope指定验证范围

    <div class="login" v-show="activeTab === 1"> <div class="panel-con ...

  6. ServerSocket类的常用方法

    1.accept:侦听并接受此套接字的连接:此方法在连接传入之前一直阻塞. 2.setSoTimeout(timeout)方法的作用时设置超时时间,通过指定超时timeout值启用/禁用超时功能,以m ...

  7. Saltstack_使用指南09_远程执行-编写执行模块

    1. 主机规划 salt 版本 [root@salt100 ~]# salt --version salt (Oxygen) [root@salt100 ~]# salt-minion --versi ...

  8. SecureCRT 破解安装详细教程

    SecureCRT是一款支持SSH(SSH1和SSH2)的终端仿真程序  跟xshell类似. 一.下载文件软件包和破解文件(64版本),我已经放在百度云,链接:https://pan.baidu.c ...

  9. KubeSphere and Friends｜12 月 14 日相约北京，不见不散

    如今在容器圈提到 Kubernetes,可谓是无人不知无人不晓.KubeSphere 作为一款面向云原生设计的开源项目,目的是在 Kubernetes 之上构建分布式多租户容器管理平台,提供简单易用的 ...

  10. 在 Cocos2d-x 中添加自己的微博链接

    配置:OS X 10.10 + Xcode 6.0 + Cocos2d-x-3.2 一.Android 端代码 1.在 Cocos2dxActivity.java 中添加openUrl函数并导入响应包 ...