选择器
边框、阴影
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快速复习的更多相关文章

  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. java socket网络编程(多线程技术)

    Client.java import java.io.*; import java.net.*; import java.util.*; public class Client { public st ...

  2. ZOJ Problem - 2588 Burning Bridges tarjan算法求割边

    题意:求无向图的割边. 思路:tarjan算法求割边,访问到一个点,如果这个点的low值比它的dfn值大,它就是割边,直接ans++(之所以可以直接ans++,是因为他与割点不同,每条边只访问了一遍) ...

  3. Chapter 1 First Sight——16

    I drove around the school, following the line of traffic. 我开车绕学校随着交通线. 我开车穿过校园,紧跟着大部队. I was glad to ...

  4. ADB shell出现error:device offline提示

    解决办法: 1.adb kill-server 2.adb start-server 3.adb remount执行这3个命令然后重新键入adb shell应该就可以了

  5. mybatis与spring整合(基于配置文件)

    本文主要介绍了如何将mybatis和spring整合在一起使用,本人使用的是mybatis3.05 + spring3.1.0M2 ,使用dbcp作为数据库连接池. 1.编写数据访问接口(UserDa ...

  6. angularJS在创建指令需要注意的问题(指令中使用ngRepeat)

    现在发现,当初的自己真的是太菜了,为什么你在指令中更改数据,没有作用呢?这其实是原型链的问题. 详细的我就不在这里说了,有位大神早已发布了这个内容,在这里复制个地址给大家,有兴趣的可以看看 http: ...

  7. (转) 通过input分片的大小来设置map的个数

    摘要 通过input分片的大小来设置map的个数 map inputsplit hadoop 前言:在具体执行Hadoop程序的时候,我们要根据不同的情况来设置Map的个数.除了设置固定的每个节点上可 ...

  8. 原创:运行loadtest时报错the load test results repository was created with a previous version and is not compatible

    如果run setting中的Storage Type设置为DataBase,则需要设置数据库来保存loadtest的运行结果,如下图所示 图:Storage Type设置为DataBase 图:在M ...

  9. zookeeper常用sehll命令

    ZooKeeper服务命令: 在准备好相应的配置之后,可以直接通过zkServer.sh 这个脚本进行服务的相关操作 1. 启动ZK服务:       sh bin/zkServer.sh start ...

  10. mysql----快速删除数据表(drop,truncate.delete)

    概念: 三者均可删除数据表 TRUNCATE TABLE 在功能上与不带 WHERE 子句的 DELETE 语句相同:二者均删除表中的全部行.但 TRUNCATE TABLE 比 DELETE 速度快 ...