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. 自己动手写中文分词解析器完整教程，并对出现的问题进行探讨和解决（附完整c#代码和相关dll文件、txt文件下载）

    中文分词插件很多,当然都有各自的优缺点,近日刚接触自然语言处理这方面的,初步体验中文分词. 首先感谢harry.guo楼主提供的学习资源,博文链接http://www.cnblogs.com/harr ...

  2. 使用Google产品以来遇到的最糟糕、最霸道、最让人抓狂的设计

    很久没有登录cnblogs@gmail.com这个邮箱,今天通过gmail.com登录了一下,登录后出现一个对话框要求设置性别与出生日期,而且必须要设置,不设置不让登录. 这个邮箱是我们网站用的是邮箱 ...

  3. Windows 8（虚拟机环境）安装.NET Framework3.5(includes .NET 2.0 and 3.0)

    按照这篇文章:http://blogs.technet.com/b/aviraj/archive/2012/08/04/windows-8-enable-net-framework-3-5-inclu ...

  4. 学习使用 CSS3 制作网站面包屑导航效果

    作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...

  5. Linux 启动过程分析

    本文仅简单介绍Linux的启动过程,在此基础上做简要的分析.对于Linux启动过程中内部详细的函数调用不做介绍,只是希望本文能给新手起到一个抛砖引玉的作用,以便深入研究Linux的启动过程.下图基本展 ...

  6. 【转】FastCgi与PHP-fpm关系

    刚开始对这个问题我也挺纠结的,看了<HTTP权威指南>后,感觉清晰了不少. 首先,CGI是干嘛的?CGI是为了保证web server传递过来的数据是标准格式的,方便CGI程序的编写者. ...

  7. express 框架之session

    一.什么是session? 最近在学习node.js 的express框架,接触到了关于session方面的内容.翻阅了一些的博客,学到了不少东西,发现一篇博文讲的很好,概念内容摘抄如下: Sessi ...

  8. spring 数据校验之Hibernate validation

    1.需要的jar包 2.springsevlet-config.xml配置 在spring3之后,任何支持JSR303的validator(如Hibernate Validator)都可以通过简单配置 ...

  9. CSS基础-插曲

    CSS学习 1:通过css来设置边框的颜色 我们可以通过border:10px solid red;来统一的设置颜色,但是我们有的时候需要每个边框的颜色不一样,我们就需要通过各自设置的方法来设置边框的 ...

  10. 上传文件被nginx全部缓存的问题

    nginx采用1.5.6. 后端采用nodejs+formidable的方式接受上传文件,本问题的对应与采用什么样的后端没太大关系,这里只是交代一下. 问题: 在前端页面上将文件上传,nginx没有将 ...