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

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. SpringCloud-创建服务消费者-Feign方式(附代码下载)

    场景 SpringCloud-服务注册与实现-Eureka创建服务注册中心(附源码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/deta ...

  2. monkey测试跑多个apk|monkey命令

    1.如何跑多个apk的monkey? 黑名单:执行除了黑名单中以外的apk: 白名单:只执行在白名单中的apk. 黑名单的设置方法: a.创建一个名称为blacklist的txt文档,在文件中输入应用 ...

  3. Linux文本处理三剑客之sed

    推荐新手阅读[酷壳]或[骏马金龙]开篇的教程作为入门.骏马兄后面的文章以及官方英文文档较难. [酷壳]:https://coolshell.cn/articles/9104.html [骏马金龙-博客 ...

  4. 欧洲杯在即英超yabo055红单介绍！沃特福德vs曼彻斯特联 沃特福德雪上加霜

    北京时间12月22日22:00,2019-20赛季英超联赛第18轮打响,沃特福德主场迎战曼彻斯特联.本场曼联作客一步步得到支持,球队有望客场赢下比赛. [基本面分析] 1.2019-20赛季英超联赛第 ...

  5. 痛苦的 java.net.BindException: Address already in use: connect —— Nacos的坑

    我的dubbo应用, 刚开始的时候,启动一两个是没有问题的, 启动多了就大量出现: -- :: --- [TaskScheduler-] o.s.c.a.nacos.discovery.NacosWa ...

  6. SpringAOP基础

    例1.已知有这么一段代码,会打印出Hello public static void main(String[] args) { sayHello(); } public static void say ...

  7. Maven发布封装到中央仓库时候报错：no default secret key: No secret key

    今天因为发布swagger-spring-boot-starter做一个问题的修复,然后碰到了下面这个问题,记录一下解决过程,帮助后续碰到类似问题的童鞋: *gpg: WARNING: "- ...

  8. sqlserver 标准系统数据库

    SQL server系统数据库很重要,大部分时候都不应该修改他们.唯一例外的是model数据库和tempdb数据库.model数据库允许部署更改到任何新创建的数据库(如存储过程),而更改tempdb数 ...

  9. Android 8.1 SystemUI虚拟导航键加载流程解析

    需求 基于MTK 8.1平台定制导航栏部分,在左边增加音量减,右边增加音量加 思路 需求开始做之前,一定要研读SystemUI Navigation模块的代码流程!!!不要直接去网上copy别人改的需 ...

  10. Oracle查看 open_cursors 和 session_cached_cursors

    本文转自 http://blog.itpub.net/25583515/viewspace-2152997/ 查看当前session已使用的最大open cursor数 和cached cursor数 ...