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

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. 设计模式-单例模式code

    package singeton; import java.security.SecureRandom; /** * @author Zero * @since 2019-08-13. * Descr ...

  2. 现代前端库开发指南系列（二）：使用 webpack 构建一个库

    前言 在前文中,我说过本系列文章的受众是在现代前端体系下能够熟练编写业务代码的同学,因此本文在介绍 webpack 配置时,仅提及构建一个库所特有的配置,其余配置请参考 webpack 官方文档. 输 ...

  3. JQuery 表单textarea控制字数

    /** *textarea 字数限制 *obj textarea * maxlength 限制的最大字数 */ function textarealength(obj,maxlength){ var ...

  4. Android组件体系之BroadcastReceiver小结

    1.常见分类    BroadCastReceiver,按注册方式可以分为静态广播接收器和动态广播接收器.    静态广播接收器:不受程序是否启动的约束,当应用程序关闭之后,还是可以接收到广播(一般广 ...

  5. 做了这么久的程序员，你知道为什么会有 Lambda 表达式吗？

    Java8 有一些新的特性,今天老顾给大家分享一下关于 Lambda 表达式的由来,一开始感觉 Lambda 可读性蛮差的,不知道 为什么 Java8 会出来这个表达式?既然大佬们推出来,肯定是有原因 ...

  6. 破解另一家网站的反爬机制 & HMAC 算法

    零.写在前面 本文涉及的反爬技术,仅供个人技术学习,禁止并做到: 干扰被访问网站的正常运行 抓取受到法律保护的特定类型的数据或信息 搜集到的数据禁止传播.交给第三方使用.或者牟利 如有可能,在爬到数据 ...

  7. VUE+Element UI实现简单的表格行内编辑效果

    原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示 <!DOCTYPE html> <html> <head> <meta cha ...

  8. 分布式图数据库 Nebula RC2 发布：增强了 CSV Importer 功能

    Nebula Graph 是开源的分布式图数据库,可应用于知识图谱.社交推荐.风控.IoT 等场景. 本次 RC2 主要新增 GO FROM ... REVERSELY 和 GROUP BY 等语句, ...

  9. 在 ASP.NET Core 中启用跨域请求（CORS）

    本文介绍如何在 ASP.NET Core 的应用程序中启用 CORS. 浏览器安全可以防止网页向其他域发送请求,而不是为网页提供服务. 此限制称为相同源策略. 同一源策略可防止恶意站点读取另一个站点中 ...

  10. WinForm 无边框窗体改变尺寸及移动窗体

    #region 无边框窗体移动改变大小 [DllImport("user32.dll")] public static extern bool ReleaseCapture(); ...