选择器
边框、阴影
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;

  1. /*定义动画*/
  2. @-webkit-keyframes tiao{
  3. from {
  4. top:200px;
  5. }
  6. to {
  7. top:250px;
  8. }
  9. }

曲线运动
jQuery的animate无法完成曲线运动,必须要借助插件来完成。
jquery.path.js
path就是路径

css3快速复习的更多相关文章

  1. Unity 游戏框架搭建 2019 (十八~二十) 概率函数 & GameObject 显示、隐藏简化 & 第二章 小结与快速复习

    在笔者刚做项目的时候,遇到了一个需求.第一个项目是一个跑酷游戏,而跑酷游戏是需要一条一条跑道拼接成的.每个跑道的长度是固定的,而怪物的出现位置也是在跑道上固定好的.那么怪物出现的概率决定一部分关卡的难 ...

  2. CSS3快速浏览器前缀的方法

    在做前端开发时,经常要在css3的属性前加上各浏览器厂商的前缀:,如 Chrome(谷歌浏览器) :-webkit- Safari(苹果浏览器) :-webkit- Firefox(火狐浏览器) :- ...

  3. [状态更新]MSE三个月快速复习计划,成功考上复旦软工

    最后更新,6月21日收到录取通知书啦,感谢当初不曾放弃的自己: 更新一下状态: 3.3日 分数出来了,过了复试线. 最初写这篇博客的时候,是希望自己能够每天或者至少每周更新下自己的复习状态,这样能够确 ...

  4. java快速复习 一 基础语法

    最近看很多算法书,比较不错的有不少都是java语言描述,所以用一天时间快速研究并整理java  ,参考资料:java入门经典 Call this file "Example2.java&qu ...

  5. vue快速复习手册

    1.基本使用 <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Vue的基本 ...

  6. C++ 基础语法 快速复习笔记(3)---重载函数,多态,虚函数

    1.重载运算符和重载函数: C++ 允许在同一作用域中的某个函数和运算符指定多个定义,分别称为函数重载和运算符重载. 重载声明是指一个与之前已经在该作用域内声明过的函数或方法具有相同名称的声明,但是它 ...

  7. C++ 基础语法 快速复习笔记---面对对象编程(2)

    1.C++面对对象编程: a.定义: 类定义是以关键字 class 开头,后跟类的名称.类的主体是包含在一对花括号中.类定义后必须跟着一个分号或一个声明列表. 关键字 public 确定了类成员的访问 ...

  8. C++ 基础语法 快速复习笔记(1)

    最近要刷题,重温一下C++基本的概念...233 1.概念: C++ 是一种静态类型的.编译式的.通用的.大小写敏感的.不规则的编程语言,支持过程化编程.面向对象编程和泛型编程. C++ 被认为是一种 ...

  9. html5+css3 快速学习

    http://kuai.qietu.com/books/html5_preview/index.htm#slide1

随机推荐

  1. vmware卸载问题

    1. VMware版本问题:http://www.wuji8.com/meta/15866846.html2. VMware卸载问题:http://www.veryhuo.com/a/view/716 ...

  2. PAT (Advanced Level) 1096. Consecutive Factors (20)

    如果是素数直接输出1与素数,否则枚举长度和起始数即可. #include<cstdio> #include<cstring> #include<cmath> #in ...

  3. [转]solr DataImportHandler 解决mysql 表导入内存溢出问题

    最近一个项目要用到solr做全文检索,开始盲人摸象. 用tomcat 7 开始配置,开始正常,但是遇到cookie里有中文就报错. 无奈,换tomcat 6, 结果DataImportHandler ...

  4. EL表达式,保留小数点后两位

    你遇到过页面显示小数有9.987870488E9这个吗? 这是因为没有保留小数的原因 有时候用js保留小数很麻烦的时候,可以用EL表达式 <fmt:formatNumber type=" ...

  5. C++ Builder string相互转换(转)

    源:http://www.cnblogs.com/zhcncn/archive/2013/05/20/3089084.html 1. char*->string (1)直接转换 const ch ...

  6. FusionCharts使用问题及解决方法(一)-FusionCharts常见问题大全

    当你利用FusionCharts创建图表时报错,原因是多方面的.本文总结了一些常见问题及解决方法供大家参考,希望对大家有帮助. 如果你无法看到任何图表: 如果浏览器中的进度条一直加载,或者右键菜单显示 ...

  7. 盖房子(house)

    盖房子(house) 题目描述 FJ最近得到了面积为n*m的一大块土地,他想在这块土地上建造一所房子,这个房子必须膏形的.但是,这块土地并非十全十美,上面有很多不平坦的地方(也可以叫瑕疵).这些瑕疵十 ...

  8. Block 朴实理解

    转载自:http://www.cnblogs.com/lzz900201/archive/2013/04/17/3025340.html block是个什么玩意儿 Block是Apple Inc.为C ...

  9. CodeForces 158B Taxi(贪心)

    贪心,注意优先级,4单独,3与1先匹配,2与2匹配(注意判断2有没有剩下),然后2与两个1匹配,最后4个1匹配就可以了. #include<iostream> #include<cs ...

  10. npm install含义 及vue安装启动项目时报错解决及vue建项目时各文件间的依赖关系

    全局安装vue-cli,使用命令npm install -g vue-cli. 下载模板代码,使用命令vue init webpack my-project,之后会有一些询问,按需填写即可. 最后会看 ...