background-origin

设置元素背景图片的原始起始位置。必须保证背景是background-repeat为no-repeat此属性才会生效。

background-origin :border-box | padding-box | content-box;

padding-box：从padding区域（含padding）开始显示背景图像。

border-box：从border区域（含border）开始显示背景图像。

content-box：从content区域开始显示背景图像。

background-clip

设定背景图像向外裁剪的区域。

background-clip ： border-box | padding-box | content-box | text

background-size

设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。

background

例如：

background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px padding-box,

       url(test1.jpg) no-repeat scroll 10px 20px/70px 90px padding-box,

       url(test1.jpg) no-repeat scroll 10px 20px/110px 130px padding-box #aaa;

transition

简写格式如下：

  • transition:<transition-property><transition-duration><transition-timing-function><transition-delay>
  • <' transition-property '>：检索或设置对象中的参与过渡的属性
  • <' transition-duration '>：检索或设置对象过渡的持续时间
  • <' transition-timing-function '>：检索或设置对象中过渡的动画类型
  • <' transition-delay '>：检索或设置对象延迟过渡的时间

animation

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

  • 规定动画的名称
  • 规定动画的时长

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>菜鸟教程(runoob.com)</title>

 <style>

 div

 {

     width:100px;

     height:100px;

     background:red;

     position:relative;

     animation:myfirst 5s linear 2s infinite alternate;

     /* Firefox: */

     -moz-animation:myfirst 5s linear 2s infinite alternate;

     /* Safari and Chrome: */

     -webkit-animation:myfirst 5s linear 2s infinite alternate;

     /* Opera: */

     -o-animation:myfirst 5s linear 2s infinite alternate;

 }

 @keyframes myfirst

 {

     0%   {background:red; left:0px; top:0px;}

     25%  {background:yellow; left:200px; top:0px;}

     50%  {background:blue; left:200px; top:200px;}

     75%  {background:green; left:0px; top:200px;}

     100% {background:red; left:0px; top:0px;}

 }

 @-moz-keyframes myfirst /* Firefox */

 {

     0%   {background:red; left:0px; top:0px;}

     25%  {background:yellow; left:200px; top:0px;}

     50%  {background:blue; left:200px; top:200px;}

     75%  {background:green; left:0px; top:200px;}

     100% {background:red; left:0px; top:0px;}

 }

 @-webkit-keyframes myfirst /* Safari and Chrome */

 {

     0%   {background:red; left:0px; top:0px;}

     25%  {background:yellow; left:200px; top:0px;}

     50%  {background:blue; left:200px; top:200px;}

     75%  {background:green; left:0px; top:200px;}

     100% {background:red; left:0px; top:0px;}

 }

 @-o-keyframes myfirst /* Opera */

 {

     0%   {background:red; left:0px; top:0px;}

     25%  {background:yellow; left:200px; top:0px;}

     50%  {background:blue; left:200px; top:200px;}

     75%  {background:green; left:0px; top:200px;}

     100% {background:red; left:0px; top:0px;}

 }

 </style>

 </head>

 <body>

 <p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

 <div></div>

 </body>

 </html>

transform

#8.12.16总结#background transition、animation、transform的更多相关文章

  1. css 动画 transform transition animation

    1.transform  transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...

  2. CSS动画：animation、transition、transform、translate

    https://blog.csdn.net/px01ih8/article/details/80780470 一.区分容易混淆的几个属性和值 先区分一下css中的几个属性:animation(动画). ...

  3. css3之transition、transform、animation比较

    css3动画多少都有些了解,但是对于transition.transform.animation这几个属性一直是比较模糊的,所以啊,这里做一个总结,也希望大家都可以对此有一个更好地理解.    其实, ...

  4. css3 transition animation nick

    时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...

  5. Atitti css transition Animation differ区别

    Atitti  css   transition Animation differ区别 1.1. transition的优点在于简单易用,但是它有几个很大的局限.  1 1.2. Transition ...

  6. Atitti  css   transition Animation differ区别

    Atitti  css   transition Animation differ区别 1.1. transition的优点在于简单易用,但是它有几个很大的局限.  1 1.2. js 动态改变 st ...

  7. A transition animation compatible Library.

    Android5.0之后为我们提供了许多炫酷的界面过渡效果,其中共享元素过渡也是很有亮点的一个效果,但这个效果只能在Android5.0之后使用,那今天我们就来将共享元素过渡效果兼容到Android4 ...

  8. CSS3 & transition & animation

    CSS3 & transition & animation https://developer.mozilla.org/en-US/docs/Web/CSS/transition-ti ...

  9. css3动画transition animation

    CSS动画简介  transition   animation transition过渡:css3通过transitions属性引入时间概念,通过开始.结束状态自动计算中间状态,实现状态改变的过渡效果 ...

随机推荐

  1. JAVA设计模式《三》

    上一篇为大家介绍了一下关于模板方法模式的实现,后来我发现里面有一点小瑕疵,本篇重新为大家介绍一下关于模板方法模式的实现.另外为大家分享一下关于策略模式的实现. 一.模板方法模式: 对于上一篇为大家介绍 ...

  2. Oracle闪回技术(Flashback)

    闪回技术有闪回表.闪回删除.闪回查询.闪回事务查询.闪回事务.闪回数据库.闪回数据归档.其中,闪回查询.闪回事务查询用来“观察”过去:闪回数据归档并不是一个独立的功能,其功能是扩展闪回查询的时间窗口: ...

  3. Prim算法(三)之 Java详解

    前面分别通过C和C++实现了普里姆,本文介绍普里姆的Java实现. 目录 1. 普里姆算法介绍 2. 普里姆算法图解 3. 普里姆算法的代码说明 4. 普里姆算法的源码 转载请注明出处:http:// ...

  4. mysql 命令重命名表RENAME TABLE 句法

    mysql 命令重命名表RENAME TABLE 句法 RENAME TABLE tbl_name TO new_tbl_name[, tbl_name2 TO new_tbl_name2,...]更 ...

  5. javascript学习笔记（四）：事件处理函数和动态创建html标记。

    1 HTML的事件属性  全局事件属性:HTML 4 增加了使事件在浏览器中触发动作的能力,比如当用户点击元素时启动 JavaScript. a. Window 事件属性,针对 window 对象触发 ...

  6. 开源服务专题之------sshd服务安装管理及配置文件理解和安全调优

    本专题我将讨论一下开源服务,随着开源社区的日趋丰富,开源软件.开源服务,已经成为人类的一种公共资源,发展势头可谓一日千里,所以不可不知.SSHD服务,在我们的linux服务器上经常用到,很重要,涉及到 ...

  7. VMware中网络设置之Bridged

    1.设置linux虚拟机Bridged模式. 2.查找网关地址:点击虚拟机工具栏编辑---Virtual Network Editor,选中VMnet0,然后在Bridged to 下拉框中选择可以本 ...

  8. 图论 --- spfa + 链式向前星 ： 判断是否存在正权回路 poj 1860 : Currency Exchange

    Currency Exchange Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 19881   Accepted: 711 ...

  9. asp.net各种cookie代码和解析

    Cookie是一段文本信息,在客户端存储 Cookie 是 ASP.NET 的会话状态将请求与会话关联的方法之一.Cookie 也可以直接用于在请求之间保持数据,但数据随后将存储在客户端并随每个请求一 ...

  10. C#写快速排序

    //先上快排代码------------------------------------------------------------------------public static void Q ...