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. ASP.NET和IIS工作原理

    图为iis6.0运行asp.net的原理. browser向iis发送HTTP请求,HTTP.SYS将其分发给W3SVC(World Wide Web Publishing Service),后者解析 ...

  2. MySQL(Navicat)运行.sql文件时报错：[Err] 2006 - MySQL server has gone away 的解决方法

    背景: 今天导入一个数据量很大的.sql文件时,报错: 原因: 可能是sql语句过长,超过mysql通信缓存区最大长度. 解决:1. 编辑 MySQL 安装目录下的 my.ini,在最后添加以下内容: ...

  3. 每日学习总结<二> 2015-9-1

    Android:      知识点: 子线程中无法更新UI,因为UI是线程不安全的. Android的UI单线程模式: 不能阻塞UI线程: 不能从UI线程的外部访问Android UI toolkit ...

  4. Android中Services简析

    Services是Android中四大基础组件(Activities. Services. Content Providers. BroadCast Receivers)之一,主要用于在后台长时间运行 ...

  5. JavaScript客户端MVC 框架综述

    简介 15 年前,许多人都使用 Perl 和 ColdFusion 之类的工具构建网站.我们经常编写可以在页面顶部查询数据库的脚本,对数据应用必要的转换,以及在同一个脚本底部显示数据.这类架构适合于向 ...

  6. 从零开始学习jQuery (一) 入门篇

    本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些 ...

  7. 下一代USB接口将支持双向拔插,于明年亮相

    近日,USB接口标准制定组织表示新一代USB接口将于明年年中亮相,而其名称目前被暂定为了USB Type-C.该组织表示USB Type-C标准将允许制造商采用更纤薄的接口设计,在实用性大大提高的同时 ...

  8. Java NIO：浅析I/O模型

    也许很多朋友在学习NIO的时候都会感觉有点吃力,对里面的很多概念都感觉不是那么明朗.在进入Java NIO编程之前,我们今天先来讨论一些比较基础的知识:I/O模型.下面本文先从同步和异步的概念 说起, ...

  9. BitCoin - BlockChain

    BitCoin 比特币, 参考: BlockChain 区块链, 参考: 参考

  10. Oracle中添加新用户并赋予权限

    --创建一个新用户NewUser 并设置密码为1 create user NewUser identified by 1; --为该用户赋予权限 grant connect , Resource to ...