一 伪类选择器复习

注意点：

#1 a标签的伪类选择器可以单独出现，也可以一起出现

#2 a标签的伪类选择器如果一起出现，有严格的顺序要求，否则失效

    编写的顺序必须要严格遵循： l v h a

        a:link{

            color: skyblue;

        }

        a:visited {

            color: green;

        }

        a:hover {

            color: #e9289c;

        }

        a:active {

            color: pink;

        }

二 过渡模块的基本使用

#1、过渡三要素

1.1 必须要有属性发生变量，如

        div:hover {

            width: 300px;

        }

1.2 必须告诉系统哪个属性需要执行过渡效果

        transition-property: width;

1.3 必须告诉系统过渡效果持续时长

        transition-duration: 5s;

#2、注意：

    当多个属性需要同时执行过渡效果时，用逗号分隔即可

        transition-property:width,background-color;

        transition-duration: 5s,5s;
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        div {

            width: 100px;

            height: 50px;

            background-color: red;

            /*

            告诉系统哪个系统需要执行过渡效果

            transition-property: width;

            /*告诉系统过渡效果持续的时长

            transition-duration: 5s;

            css是层叠样式表，这么写会跟上面的冲突，所以我们需要修改

            transition-property: background-color;

            transition-duration: 5s;

            */

            transition-property:width,background-color;

            transition-duration: 5s,5s;

        }

        /*

        hover这个伪类选择器除了可以用在a标签上，还可以用在任何其他的标签上

        */

        div:hover {

            width: 300px;

            background-color: green;

        }

    </style>

</head>

<body>

<div></div>

</body>

</html>

示范

三 控制过渡的速度transition-timing-function

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        div {

            width: 100px;

            height: 50px;

            background-color: red;

            transition-property: width;

            transition-duration: 5s;

            /*告诉系统延迟多少秒开始动画*/

            transition-delay: 2s;

        }

        div:hover {

            width: 300px;

        }

        ul {

            width: 800px;

            height: 500px;

            margin: 0 auto;

            background-color: pink;

            border: 1px solid #000;

        }

        ul li {

            list-style: none;

            width: 100px;

            height: 50px;

            margin-top: 50px;

            background-color: blue;

            transition-property: margin-left;

            transition-duration: 10s;

        }

        ul:hover li {

            margin-left: 700px;

        }

        ul li:nth-child(1) {

            transition-timing-function: ease;

        }

        ul li:nth-child(2) {

            transition-timing-function: linear;

        }

        ul li:nth-child(3) {

            transition-timing-function: ease-in;

        }

        ul li:nth-child(4) {

            transition-timing-function: ease-in-out;

        }

        ul li:nth-child(5) {

            transition-timing-function: ease-in-out;

        }

    </style>

</head>

<body>

<div></div>

<ul>

    <li>ease</li>

    <li>linear</li>

    <li>ease-in</li>

    <li>ease-out</li>

    <li>ease-in-out</li>

</ul>

</body>

</html>

示范

四 过渡模块连写

#1 过渡属性连写

transition: 过渡属性 过渡时长 运动速度 延迟时间;

#2 过渡连写注意点

2.1 和分开写一样，如果想给多个属性添加过渡效果也是用逗号隔开即可

2.2 连写的时间，可以省略后面的两个参数，因为只要编写了前面两个参数

就满足了过渡的三要素

2.3 如果多个属性运动的速度、延迟时间、持续时间都一样，那么可以简写为

transition: all 5s;
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        div {

            width: 100px;

            height: 50px;

            background-color: red;

            /*transition: width 5s linear 0s;*/

            /*transition: width 5s linear 0s,background-color*/

            /*5s linear 0s;*/

            /*transition: width 5s,background-color 5s;*/

            /*transition: width 5s,background-color,height 5s;*/

            transition: all 5s;

        }

        div:hover {

            width: 500px;

            background-color: blue;

            height: 500px;

        }

    </style>

</head>

<body>

<div></div>

</body>

</html>

示范

五 练习

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        div {

            height: 100px;

            background-color: grey;

            margin-top: 100px;

            text-align: center;

        }

        span {

            font-size: 50px;

            line-height: 100px;

            transition: all 5s;

        }

        div:hover span {

            margin-left: 50px;

        }

    </style>

</head>

<body>

<div>

    <span>EGON</span>

    <span>是</span>

    <span>讲</span>

    <span>师</span>

    <span>界</span>

    <span>的</span>

    <span>恐</span>

    <span>怖</span>

    <span>分</span>

    <span>子</span>

</div>

</body>

</html>

弹性效果

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        div {

            width: 1000px;

            height: 300px;

            margin: 0 auto;

        }

        img {

            width: 200px;

            height: 300px;

        }

        ul {

            width: 1000px;

            height: 300px;

            background-color: grey;

            list-style: none;

            margin: 100px auto;

            /*

            最后一张图片超出了，因为每一张图片很大

            但默认情况我们不想看到，所以剪裁掉多余

            */

            overflow: hidden;

        }

        ul li {

            width: 100px;

            height: 300px;

            float: left;

            transition: all 0.3s;

        }

        ul:hover li {

            width: 88px;

        }

        /*谁更具体谁的优先级更高，ul 下的li更具体，而ul可能指定有很多li*/

        ul li:hover {

            width: 200px;

        }

    </style>

</head>

<body>

<div>

    <ul>

        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225724530-539090864.jpg" alt=""></li>

        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225751362-1832630751.jpg" alt=""></li>

        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225809591-1990809146.jpg" alt=""></li>

        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225816920-580320384.jpg" alt=""></li>

        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225828392-1011509025.jpg" alt=""></li>

        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225836490-1526815653.jpg" alt=""></li>

        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225847998-887601490.jpg" alt=""></li>

        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225853390-460353134.jpg" alt=""></li>

        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225859796-1981914722.jpg" alt=""></li>

        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225906468-571800433.jpg" alt=""></li>

    </ul>

</div>

</body>

</html>

手风琴效果

前端学习笔记之CSS过渡模块的更多相关文章

  1. 前端学习笔记之CSS选择器

    阅读目录 一 基本选择器 二 后代选择器.子元素选择器 三 兄弟选择器 四 交集选择器与并集选择器 五 序列选择器 六 属性选择器 七 伪类选择器 八 伪元素选择器 九 CSS三大特性 一 基本选择器 ...

  2. 前端学习笔记之CSS网页布局

    CSS网页布局   阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如w ...

  3. 2、前端学习笔记之——css

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 前端学习笔记之CSS属性设置

    CSS属性设置   阅读目录 一 字体属性 二 文本属性 三 背景属性 四 盒子模型 五 盒子模型各部分详解 一 字体属性 1.font-weight:文字粗细 取值 描述 normal 默认值,标准 ...

  5. 前端学习笔记之css清除浮动float的七种常用方法总结和兼容性处理

    在清除浮动前我们要了解两个重要的定义: 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来. 高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮 ...

  6. 前端学习笔记之CSS浮动浅析

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  7. 前端学习笔记之CSS介绍

    阅读目录 一 什么是CSS 二 为何要用CSS 三 如何使用CSS 一 什么是CSS CSS全称Cascading Style Sheet层叠样式表,是专用用来为HTML标签添加样式的. 样式指的是H ...

  8. 前端学习笔记之CSS文档流

    先引用一段W3C的文档: 9.3 Positioning schemes In CSS 2.1, a box may be laid out according to three positionin ...

  9. 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

随机推荐

  1. x86 体系指令

    FASM 第二章 - 2.1 x86 体系指令 Author: 徐艺波  From: xuyibo.org  Updated: 2008-04-17   官方论坛   本站软件反馈.软件开发交流.   ...

  2. $.when()方法监控ajax请求获取到的数据与普通ajax请求回调获取到的数据的不同

    1.$.when(ajax).done(function(data)}); 2.$.ajax().done(function(data){}); 1中的data被封装进一个对象[data, " ...

  3. Ubuntu adb devices :???????????? no permissions (verify udev rules) 解决方法

    Ubuntu adb devices :???????????? no permissions (verify udev rules) 解决方法http://www.cnblogs.com/cat-l ...

  4. sencha touch 入门系列 （五）sencha touch运行及代码解析（上）

    由于最近项目比较忙,加之还要转战原生开发,所以很久没更新了,今天我们接着上一次的内容往下讲: 首先我们打开index.html,这是我们整个程序的访问入口,也是整个项目的引入地: <!DOCTY ...

  5. 【BZOJ2314】士兵的放置 树形DP

    [BZOJ2314]士兵的放置 Description 八中有N个房间和N-1双向通道,任意两个房间均可到达.现在出了一件极BT的事,就是八中开始闹鬼了.老大决定加强安保,现在如果在某个房间中放一个士 ...

  6. angular -- ng-ui-route路由及其传递参数？script标签版

    考虑到 多视图等因素,所以 angular 的路由考虑使用 ng-ui-route来做,而不使用 ng-route来做! <!DOCTYPE html> <html lang=&qu ...

  7. Oracle数据库PL/SQL Developer查询结果显示问号乱码的解决方法

    PL SQL Developer,查询结果中的中文变成了一堆问号,SQL语句中的中文被提示invalid character,不能识别. 解决方法: 执行,select userenv('langua ...

  8. 系统中同时有 python2和 python3，怎么让 ipython 选择不同的版本启动？

    已经安装的情况下: > which ipython /usr/local/bin/ipython > cat /usr/local/bin/ipython  #!/usr/local/op ...

  9. python的pip的配置文件路径在哪里？如何修改pypi源？

    官方文档: https://pip.pypa.io/en/stable/user_guide/#configuration 举个例子: Windows用户想要更改pypi源,可以在%APPDATA%目 ...

  10. pandas 从txt读取DataFrame&DataFrame格式化保存到txt

    前提 首先保证你txt里的文本内容是有规律可循的(例如,列与列之间通过“\t”.“,”等指定的可识别分隔符分隔): 例如我需要读取的数据,(\t)分隔: (此文件内容是直接以DataFrame格式化写 ...