CSS学习笔记-过渡模块
过渡模块:
1、过渡三要素
1.1必须要有属性发生变化
1.2必须告诉系统哪个属性需要执行过渡效果
1.3必须告诉系统过渡效果持续时长
2、格式:
div{
width:100px;
height:100px;
background-color:red;
transition-property:width;
transition-duration:0.5s;
}
div:hover{
width:300px;
}
(:link默认/:visited访问后/:hover鼠标悬浮/:active长按) 爱恨原则:【L】o【v】e 【H】【a】te
3、注意点:
当多个属性需要同时执行过渡效果时,用逗号隔开即可:
transition-property:width,background-color;
transition-duration:5s,5s;
过度模块其他属性:
1、transition-dalay:2s;
告诉系统延迟多少秒之后才开始过渡
2、transition-timing-funtion:linear;
取值:linear/ease/ease-in/ease-out/ease-in-out
过渡模块_连写:
1、连写格式:
transition:过渡属性 过渡时长 运动速度 延迟时间;
2、过渡连写注意点:
2.1如果想给多个属性添加过渡效果,用逗号隔开即可,如:
transition:width 1s linear 0s,background-color 1s linear 0s;
2.2连写的时候可以省略后面的两个参数,保证前面的三要素即可,如:
transition:width 1s,background-color 1s;
2.3如果多个属性运动的速度/延迟的时间/持续时间都一样,可以简写为:
transition:all 0s;
CSS学习笔记-过渡模块的更多相关文章
- CSS学习笔记-过度模块-编写过渡效果
过渡模块-编写过渡效果: 1.编写过渡套路: 1.1不要管过渡,先编写基本界面 1.2修改我们认为需要修改的属性 1.3再给被修改属性的元素添加过渡即可 2.弹性效果 < ...
- CSS学习笔记-03- 过渡模块之前奏篇 a标签的伪类选择器
CSS3 2D转换CSS3 3D转换CSS3 过渡CSS3 动画 CSS3 的四大金刚. 想要实现酷炫的视觉效果,上面4个是必须要掌握的.学习之前,先复习一下 视觉盛宴的前菜 :a标签的伪类选择器 铛 ...
- CSS学习笔记-动画模块
动画模块: 1.过渡和动画之间的异同 1.1不同点 (1)过渡必须人为触发才能执行 (2)动画不需要人为触发就可以执行 1 ...
- CSS学习笔记之CSS3新特性
目录 1.边框 2.背景 3.文本 4.字体 5.转换 6.过渡 7.动画 8.多列 9.自定义尺寸 CSS 用于控制网页的样式和布局,而 CSS3 是最新的 CSS 标准,这篇文章将着重介绍 CSS ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- HTML+CSS学习笔记(5)- 与浏览者交互,表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
- HTML+CSS学习笔记(4) - 认识标签(3)
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
随机推荐
- 区块链学习笔记:DAY01 区块链的技术原理
其实很早之前就听过区块链,也看过有关区块链的介绍,那个时候的理解主要还是一句话:分布式记账 然后开始关注比特币,听了有几年了,对于其来历.用途其实一直都是一知半解. 这次的课算是第一次以一个学员的身份 ...
- 【跟唐老师学习云网络】 - 第6篇 ARP你在哪
[摘要] 这一章节你的角色就是ping报文这个"使者",你要去往目的地,然后回到本机.然而目的地路漫漫,不知道要经过多少个小地盘(局域网),没两把刷子也不好行走江湖.所以你作为使者 ...
- 单片机内存分配中的.text .data .bss heap stack
[本文转自:http://www.51hei.com/bbs/dpj-41696-1.html] .text段:代码段(code segment/text segment)通常是指用来存放程序执行代码 ...
- 想实现多人协作的“在线Excel”?真没那么简单
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. Excel是我们办公中常用的工具 ,它几乎能为我们处理大部分数据,友好的交互 ...
- 在ASP.NET Core中使用托管启动(hosting startup)程序集,实现批量注册service
在启动ASPNET Core时可以从外部程序集向应用添加增强功能.例如,外部库可以用托管启动( hosting startup) 实现为应用程序提供附加配置(Configuration)或服务(ser ...
- 基于 HTML5 + WebGL 的 3D 太阳系系统
前言 近年来随着引力波的发现.黑洞照片的拍摄.火星上存在水的证据发现等科学上的突破,以及文学影视作品中诸如<三体>.<流浪地球>.<星际穿越>等的传播普及,宇宙空间 ...
- html5 中video标签属性
<video id="haoroomsvideo" src="haorooms.mp4" poster="images/haorooms.j ...
- CMAKE同时编译C++和CUDA文件
1. 首先是运行环境 Ubuntu 16.04 G++ 5.4.0 CUDA 8.0 2. 文件结构 cv@cv:~/myproject$ tree src src/ |-- CMakeLists.t ...
- 使用Advanced Installer打包工具如何设置是否安装预安装程序包
要保证我们的程序能在目标机器上正常运行,便需要保证目标机器上提供了程序运行的必要组件. 而在使用Advanced Installer打包工具制作程序安装包时,我们可以通过配置“需求-运行环境-程序包- ...
- linux 删除.svn文件
linux删除当前目录及其子目录下的.svn文件,linux下删除全部的.svn文件 find . -name "*.svn" -type d -print -exec rm -r ...