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

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. CSS 解决z-index上层元素遮挡下层元素点击事件问题

    解决z-index上层元素遮挡下层元素点击事件问题 by:授客 QQ:1033553122 开发环境 Win 10 element-ui  "2.8.2" Vue 2.9.6 需求 ...

  2. 7款Chrome去广告插件

     互联网时代,大家都习惯在电脑或手机上查阅信息.观看视频.遇到不知道的东西,百度一下:想看的电视剧,爱奇艺腾讯A站B站搜一下.整个操作十分简单,大到八九十岁的老人,小到几岁孩子,都能做到.然而,很多时 ...

  3. 代码管理平台之svn

    yum install -y subversion(server和client均安装subversion) configure svn:[root@node01 ~]# mkdir -p /data/ ...

  4. c++11多线程笔记

    1 thread类thread f;线程等待join()线程分离detach() thread类不可拷贝复制 std::this_thread::yield(); 2 bind 与lambda表达式 ...

  5. ES6 学习之 let

    关于闭包: <html> <body> <div> <div> <button >aaa</button> <button ...

  6. [转载] redis学习入门 Redis 3.2.100

    参考博客: https://blog.csdn.net/flyer_tang/article/details/80320974 https://blog.csdn.net/weixin_3077313 ...

  7. seaborn画出的一些好看的图片

    PYSPARK_DRIVER_PYTHON=/home/zhangyu/anaconda3/bin/jupyter-notebook PYSPARK_DRIVER_PYTHON_OPTS=" ...

  8. maven 解决jar包冲突及简单使用

    maven 解决jar包冲突 1.jar包冲突原因 maven中使用坐标导入jar包时会把与之相关的依赖jar包导入(导入spring-context的jar时就会把spring的整个主体导入) ,而 ...

  9. 配置基于服务器认证的Dynamics 365 Customer Engagement和SharePoint Online集成

    我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  10. diango url的命名和反向解析

    url的命名和反向解析 静态路由 url(r'^login/', views.login,name='login'), 反向解析ht 模板 {% url 'login' %} --> '/app ...