CSS动画之过渡模块
:hover伪类选择器可以用于所有的选择器(只有在悬停时，执行选择器的属性)
CSS3中新增过渡模块：transition property（属性）duration（过渡效果花费的时间）timing-function（过渡效果的时间曲线）delay（过渡效果何时开始）简写：transition：过渡属性 过渡时长 过渡速度 过渡延迟 （！！如果有多组属性要改变则直接用逗号隔开写几组即可）如果有的属性相同则例：all 5s表示都是5s完成
三要素：必须属性发生变化 必须告诉系统哪个属性变化 必须告诉系统变化时长
要实现多个属性变化效果，用逗号隔开
在设计过渡效果时：1：不管过渡，先编写基本界面
2：修改我们需要修改的属性
3：给我们认为需要修改的属性元素添加过渡
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>过渡模块</title>
6 <style>
7 *{
8 padding: 0;
9 margin: 0;
10 }
11 div{
12 background-color: red;
13 width: 100px;
14 height: 50px;
15 /*告诉系统那个属性需要执行过渡效果*/
16 transition-property: width,background-color;
17 /*告诉系统过渡效果持续的时长*/
18 transition-duration: 3s,3s;
19 /*告诉系统延迟多少秒再发生变化*/
20 transition-delay: 1s,1s;
21 }
22 div:hover{
23 width: 300px;
24 background-color: #5bc0de;
25 }
26 ul{
27 list-style: none;
28 width: 500px;
29 height: 100px;
30 background-color: yellow;
31 }
32 li{
33 width: 50px;
34 height: 20px;
35 background-color: red;
36 transition-property: width,background-color;
37 transition-duration: 3s,3s;
38 }
39 ul:hover li{
40 width: 500px;
41 background-color: #5bc0de;
42 }
43 .box1{
44 transition-timing-function: ease;
45 }
46 .box2{
47 transition-timing-function: ease-in;
48 }
49 .box3{
50 transition-timing-function: ease-out;
51 }
52 .box4{
53 transition-timing-function: ease-in-out;
54 }
55 .box5{
56 transition-timing-function: linear;
57 }
58
59
60 </style>
61 </head>
62 <body>
63
64 <div></div>
65 <br>
66 <ul>
67 <li class="box1">box1</li>
68 <li class="box2">box2</li>
69 <li class="box3">box3</li>
70 <li class="box4">box4</li>
71 <li class="box5">box5</li>
72 </ul>
73 </body>
74 </html>
CSS动画之过渡模块的更多相关文章
- 【CSS】css动画及过渡和变换属性
1.css动画 创建一个动画: @keyframes name{ //动画名字 0% { //动画开始 transform: translateY(0); } 100% { //动画结束 transf ...
- CSS学习笔记-过渡模块
过渡模块: 1.过渡三要素 1.1必须要有属性发生变化 1.2必须告诉系统哪个属性需要执行过渡效果 1.3必须告诉系统过渡效果持续时长 2.格式: ...
- 前端学习笔记之CSS过渡模块
阅读目录 一 伪类选择器复习 二 过渡模块的基本使用 三 控制过渡的速度transition-timing-function 四 过渡模块连写 一 伪类选择器复习 注意点: #1 a标签的伪类选择器可 ...
- css过渡模块和2d转换模块
今天,我们一起来研究一下css3中的过渡模块.2d转换模块和3d转换模块 一.过渡模块transition (一)过度模块的三要素: 1.必须要有属性发生变化 2.必须告诉系统哪个属性需要执行过渡效果 ...
- css动画过渡
css动画过渡css代码: .div03{ width:100px;height:100px;background: rebeccapurple;color: #fff; -webkit-transi ...
- CSS动画之动画模块
过渡模块和动画模块的区别:过渡动画需要人为的去触发这个反应,而动画模块不需要人为相同点:都是动画:都是系统新增的属性:都是要满足三要素才有动画效果三要素:1.告诉系统执行哪个动画,要写出动画名称:an ...
- CSS过渡、CSS动画
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script s ...
- CSS学习笔记-05 过渡模块的基本用法
话说 1对情侣两情相悦,你情我愿.时机成熟,夜深人静...咳 ,如果就这么直奔主题,是不是有点猴急,所以,还是要来点前戏@. 铛 铛, 这个时候 过渡模块出现了. 划重点: 上代码: <!DOC ...
- 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
随机推荐
- PHP代码审计02之filter_var()函数缺陷
前言 根据红日安全写的文章,学习PHP代码审计审计的第二节内容,题目均来自PHP SECURITY CALENDAR 2017,讲完这个题目,会有一道CTF题目来进行巩固,外加一个实例来深入分析,想了 ...
- 日志分析平台ELK之前端展示kibana
之前的博客一直在聊ELK集群中的存储.日志收集相关的组件的配置,但通常我们给用户使用不应该是一个黑黑的shell界面,通过接口去查询搜索:今天我们来了ELK中的前端可视化组件kibana:kibana ...
- Java知识系统回顾整理01基础06数组04增强型for循环
增强型for循环在遍历一个数组的时候会更加快捷 一.增强型for循环 注:增强型for循环只能用来取值,却不能用来修改数组里的值 public class HelloWorld { public st ...
- 【编程开发】Python---列表
ERROR:错误 waring:警告,还没到犯错的地步 print(r'\n') r"字符串",字符串里的所有字符都不转义 str = "abcdef" 如果 ...
- Kafka单机安装
一.Kafka简介 Kafka是由Apache软件基金会开发的一个开源流处理平台,由Scala和Java编写.Kafka是一种高吞吐量的 分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作 ...
- 第一个月多测师讲解__项目讲解以及注意事项（肖sir）
一.目的讲解流程:(讲述业务时长10-15分钟为宜)1.自我介绍礼貌用语,姓名,籍贯,学校,个人技能,经验,表现,兴趣爱好等 ,1分钟 ,谢谢2.介绍项目的名字 ,项目的背景,(涉及什么架构)3.对项 ...
- <二分查找+双指针+前缀和>解决子数组和排序后的区间和
<二分查找+双指针+前缀和>解决子数组和排序后的区间和 题目重现: 给你一个数组 nums ,它包含 n 个正整数.你需要计算所有非空连续子数组的和,并将它们按升序排序,得到一个新的包含 ...
- 【KM算法】UVA 11383 Golden Tiger Claw
题目大意 给你一个\(n×n\)的矩阵G,每个位置有一个权,求两个一维数组\(row\)和\(col\),使\(row[i] + col[j]\ge G[i][j]\),并且\(∑row+∑col\) ...
- 痞子衡嵌入式：恩智浦i.MX RT1xxx系列MCU硬件那些事（2.4）- 串行NOR Flash下载算法(Keil MDK工具篇)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是Keil MDK工具下i.MXRT的串行NOR Flash下载算法设计. 在i.MXRT硬件那些事系列之<在串行NOR Flash ...
- requests设置代理ip
# coding=utf-8 import requests url = "http://test.yeves.cn/test_header.php" headers = { &q ...