css3快速复习
选择器
边框、阴影
border-radius: 50%; 设置正圆形
背景的改变
CSS3重要的新东西:
● transition
过度,让一个元素从一个样式,变为另一个样式,不再是干蹦了,而是有动画,均匀的完成。
transition属性要写给元素的原来样式中,
transition:要过度的css属性 时长 是否匀速 延迟;
比如:transition:all 1s ease 0s;如果要匀速,写linear
transition属性什么时候能够触发??
:hover可以触发过渡
JS直接控制元素的样式改变,也会触发过渡
JS控制加一个类名,也会触发过渡
★总结:一切能够让元素的CSS改变的行为,都能够触发过渡。
transition属性能够过渡什么属性?
基本上一切的属性,transition都可以过渡。
● transform
变形。实际上,就是让一个元素拥有“维度”
transform:rotateY(-40deg) rotateX(-40deg) translateZ(300px);
让一个盒子,绕Y轴旋转-40度,绕X轴旋转-40度,然后朝着自己现在所对的方向,前进300px。
● animation
CSS3中,:hover可以给任何标签设置,表示鼠标悬停的样式。
动画。和transition不一样,这个animation不需要触发条件,自己就能动。
animation: name duration timing-function delay iteration-count direction;
调用:
animation:tiao 1s ease 0s infinite alternate;
/*定义动画*/
@-webkit-keyframes tiao{
from {
top:200px;
}
to {
top:250px;
}
}
曲线运动
jQuery的animate无法完成曲线运动,必须要借助插件来完成。
jquery.path.js
path就是路径
css3快速复习的更多相关文章
- Unity 游戏框架搭建 2019 (十八~二十) 概率函数 & GameObject 显示、隐藏简化 & 第二章 小结与快速复习
在笔者刚做项目的时候,遇到了一个需求.第一个项目是一个跑酷游戏,而跑酷游戏是需要一条一条跑道拼接成的.每个跑道的长度是固定的,而怪物的出现位置也是在跑道上固定好的.那么怪物出现的概率决定一部分关卡的难 ...
- CSS3快速浏览器前缀的方法
在做前端开发时,经常要在css3的属性前加上各浏览器厂商的前缀:,如 Chrome(谷歌浏览器) :-webkit- Safari(苹果浏览器) :-webkit- Firefox(火狐浏览器) :- ...
- [状态更新]MSE三个月快速复习计划,成功考上复旦软工
最后更新,6月21日收到录取通知书啦,感谢当初不曾放弃的自己: 更新一下状态: 3.3日 分数出来了,过了复试线. 最初写这篇博客的时候,是希望自己能够每天或者至少每周更新下自己的复习状态,这样能够确 ...
- java快速复习 一 基础语法
最近看很多算法书,比较不错的有不少都是java语言描述,所以用一天时间快速研究并整理java ,参考资料:java入门经典 Call this file "Example2.java&qu ...
- vue快速复习手册
1.基本使用 <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Vue的基本 ...
- C++ 基础语法 快速复习笔记(3)---重载函数,多态,虚函数
1.重载运算符和重载函数: C++ 允许在同一作用域中的某个函数和运算符指定多个定义,分别称为函数重载和运算符重载. 重载声明是指一个与之前已经在该作用域内声明过的函数或方法具有相同名称的声明,但是它 ...
- C++ 基础语法 快速复习笔记---面对对象编程(2)
1.C++面对对象编程: a.定义: 类定义是以关键字 class 开头,后跟类的名称.类的主体是包含在一对花括号中.类定义后必须跟着一个分号或一个声明列表. 关键字 public 确定了类成员的访问 ...
- C++ 基础语法 快速复习笔记(1)
最近要刷题,重温一下C++基本的概念...233 1.概念: C++ 是一种静态类型的.编译式的.通用的.大小写敏感的.不规则的编程语言,支持过程化编程.面向对象编程和泛型编程. C++ 被认为是一种 ...
- html5+css3 快速学习
http://kuai.qietu.com/books/html5_preview/index.htm#slide1
随机推荐
- Lucene + Hadoop 分布式搜索运行框架 Nut 1.0a9转自http://www.linuxidc.com/Linux/2012-02/53113.htm
1.概述 不管程序性能有多高,机器处理能力有多强,都会有其极限.能够快速方便的横向与纵向扩展是Nut设计最重要的原则,以此原则形成以分布式并行计算为核心的架构设计.以分布式并行计算为核心的架构设计是N ...
- Java中域 实例域 静态域
1.java中的域 所谓的域,翻译成英文就是field, 也就是我们常说的字段,或者说是属性. 比如类的字段(属性),局部的,全局的.所谓域,其实是“field”的翻译 然后实例域,就是 实例(&qu ...
- Boyer Moore算法(字符串匹配)
上一篇文章,我介绍了KMP算法. 但是,它并不是效率最高的算法,实际采用并不多.各种文本编辑器的"查找"功能(Ctrl+F),大多采用Boyer-Moore算法. Boyer-Mo ...
- webstrom自定义代码块的设置方法
webstrom里面的自定义代码块叫做活动模版 在文件 -> 设置 -> 编辑器 -> 活动模版可以打开 里面的$var$ 代表一个变量 两个相同的$var$在不全后可以同时修改, ...
- 转:LoadRunner中参数化技术详解
LoadRunner中参数化技术详解 LoadRunner在录制脚本的时候,只是忠实的记录了所有从客户端发送到服务器的数据,而在进行性能测试的时候,为了更接近真实的模拟现实应用,对于某些信息需要每次提 ...
- Json.net对数据的解析
在官网下载Json.net文件后,解压完将Net20下面的DLL复制到Assets目录下. using UnityEngine; using System.Collections; using New ...
- 【转】PHP里的basename函数不支持中文名的解决
今天用到basename 函数获取文件名称时,发现如果是中文的文件名返回只有后缀的空文件名(如:.pdf) string basename ( string path [, string suf ...
- SD卡读写扇区注意事项(转)
源:http://blog.163.com/zhaojun_xf/blog/static/30050580201151410635516/ 在调试SD卡时,大家都喜欢使用扇区进行验证.也就是说,一般都 ...
- Struts+Spring+Hibernate的Web应用执行过程
struts1和spring有两种整合的方法 一种是action和spring bean映射:一种是将action交给spring初始化 第一种方式:访问.do的URL->tomcat接收到r ...
- 我的android学习脚步----------- Button 和监听器setonclicklistener
最基本的学习,设置一个按钮并监听实现实时时刻显示 首先XML布局,在layout中的 activity_main.xml中拖一个Button按钮到相应位置 然后在xml文件中做修改 <Rela ...