CSS基础篇之背景、过渡动画
background-origin（背景原点）
设置元素背景图片的原始起始位置。必须保证背景是background-repeat为no-repeat属性才能生效。
background-origin：border-box|padding-box|content-box；
border-box
这是用border-box时图片位于边框左上角
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.img{
border: 30px dotted black;
width: 400px;
height: 204px;
background: url(36686900_p0.jpg) no-repeat;
background-origin: border-box;
</style>
</head>
<body>
<div class="img"></div>
</body>
</html>
padding-box
它看上去和下面的content-box没什么不同，但仔细用浏览器的开发者工具(F12)来看一下图片的位置的话padding-box位于内边距以内含内边距、内容这两个里面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.img{
border: 30px dotted black;
width: 400px;
height: 204px;
background: url(36686900_p0.jpg) no-repeat;
background-origin: padding-box;
</style>
</head>
<body>
<div class="img"></div>
</body>
</html>
content-box
content-box位于内容部分padding-box位于内边距以内包括内边距，两者需要区分好。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.img{
border: 30px dotted black;
width: 400px;
height: 204px;
background: url(36686900_p0.jpg) no-repeat;
background-origin: content-box;
</style>
</head>
<body>
<div class="img"></div>
</body>
</html>
背景显示区域
设定背景区域裁剪的区域
语法：
background-clip：border-box|padding-box|content-box|text
将图片的溢出部分裁剪。
裁剪部分理解和背景原点意思理解可以为一样
三个以不同位置裁剪的图片。
背景大小
background-size
以长度或者百分比显示，还可以通过cover和contain对图片进行伸缩。
div{
background：url(img.jpg);
background-size:80px 30px;
background-repeat:no-repeat;
}
背景样式缩写
规格background：背景色 背景图 背景平铺方式 背景定位
缩写
div{background：#ccc url(img.png) no-repeat left top;}
多重背景
语法：background： [background-color] | [background-image]| [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
也可以拆开写
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;
注意用缩写时记得用 , 号间隔
如果有size值，需要紧跟position用 / 隔开
如果有多个背景图，如果其它属性只有一个，表明所有图片都应用到。
background-color只能设置一个。
列表样式
1.项目符号
list-style-type：符号样式；
ul{
list-style-type：符号样式；
}
符号样式有很多
disc：
实心圆(CSS1)
circle：
空心圆(CSS1)
square：
实心方块(CSS1)
decimal：
阿拉伯数字(CSS1)
lower-roman：
小写罗马数字(CSS1)
upper-roman：
大写罗马数字(CSS1)
lower-alpha：
小写英文字母(CSS1)
upper-alpha：
大写英文字母(CSS1)
none：
不使用项目符号(CSS1)
armenian：
传统的亚美尼亚数字(CSS2)
cjk-ideographic：
浅白的表意数字(CSS2)
georgian：
传统的乔治数字(CSS2)
lower-greek：
基本的希腊小写字母(CSS2)
hebrew：
传统的希伯莱数字(CSS2)
hiragana：
日文平假名字符(CSS2)
hiragana-iroha：
日文平假名序号(CSS2)
katakana：
日文片假名字符(CSS2)
katakana-iroha：
日文片假名序号(CSS2)
lower-latin：
小写拉丁字母(CSS2)
upper-latin：
大写拉丁字母(CSS2)
自定义项目符号
用图片插入
list-style-image：none|url
ul{
list-style-image：url(img.png);
}
变形样式
改变元素大小，透明，旋转角度，扭曲等
语法：transorm：none |<transform-function>+
translate()： 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
transform-origin:任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。
translateX()： 指定对象X轴（水平方向）的平移
translateY()： 指定对象Y轴（垂直方向）的平移
rotate()： 指定对象的2D rotation（2D旋转），需先有 <' transform-origin '> 属性的定义
scale()： 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
skew()： 指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
translate3d()： 指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
过渡动画
<' transition-property '>：
检索或设置对象中的参与过渡的属性
<' transition-duration '>：
检索或设置对象过渡的持续时间
<' transition-timing-function '>：
检索或设置对象中过渡的动画类型
<' transition-delay '>：
检索或设置对象延迟过渡的时间
利用上面过渡动画和变形样式做出
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.img{
width: 100px;
height: 100px;
border-radius: 10px;
background-color: #808080;
/*移动X,Y*/
/*transform: translate(30% 30%);*/
/*移动X*/
/*transform: translateX(200%);*/
/*移动y*/
/* transform: translateY(200%);*/
transition: all 1s;
}
.img:hover{
-webkit-transform: translateY(200%); }
.img:active{
-webkit-transform: translate(200% 200%);
}
</style>
</head>
<body>
<div class="img"></div>
</body>
</html>
还有
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.img2{
width: 100px;
height: 100px;
border-radius: 10px;
background-color: black;
transform-origin:0 0;
/*transform: rotate(15deg);*/
transition: all 1s;
}
.img2:hover{
-webkit-transform: rotate(15deg);
}
.img2:active{ -webkit-transform:translateY(200%) ;
}
</style>
</head>
<body>
<div class="img2"></div>
</body>
</html>
CSS基础篇之背景、过渡动画的更多相关文章
- CSS基础篇之了解CSS和它的基本属性
CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...
- Css中的变形及过渡动画
在css3的标准中新增加了变形样式,这些样式使得网页中各元素的位置形状的变换变得更加容易.其语法如下: transform:none | <transform-function>+ 其中对 ...
- css基础-盒子模型+背景和列表
border-style的值: none 无 dotted 点状 dashed 虚线 solid 实线 double 双实线 margin: 垂直方向两个相邻元素都设置了外边距,那么外边距会发生合并 ...
- CSS 奇技淫巧：动态高度过渡动画
这个问题源自于掘金上的一个留言,一个朋友问到,为什么我下面这段代码的高度过渡动画失效了? 伪代码大概是这样: { height: unset; transition: all 0.3s linear; ...
- CSS 基础篇、绝对有你想要
本章内容: 简介 CSS 定义 四种引入方式 样式应用的顺序 选择器(Selector) * 通用元素选择器 标签选择器 class 类选择器 # ID选择器 , 多元素选择器 后代元素选择器 > ...
- html+css基础篇
2016年11月19号,计划把基础在看一下,听大神说好的东西就要多看几遍,知识是学来用的解决问题的,加油 接下来的是我在自学中的小笔记吧,每天都在保持几个小时的学习思考状态,由于要升本所以学前端的时间 ...
- CSS基础篇之选择符3
border(边框) 如何用CSS调出边框 我们给p标签加一个边框试一下 p{ border:1px solid #ccc:/*这是缩写*/ } 第一个值是为边框的宽度 第二个值是为边框线样式为直线 ...
- CSS基础篇之选择符
关系选择符 E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素. <html> <head> <meta chars ...
- html/css基础篇——iframe和frame的区别【转】
转自共享圈的使用iframe的优缺点,为什么少用iframe以及iframe和frame的区别.其中本人不认同的地方有做小修改 注:HTML5不再支持使用frame,iframe只有src 属性 一. ...
随机推荐
- javase-->基础知识（二）
1.算术运算符 7种:+,-,*,/,%,++,--; --------------------注意不要想当然,按照类型规则来计算 ++在变量前,先加1再取变量使用 --同理 在变量 ...
- iOS 数据存储规则
概观 iCloud的备份包括,它可以自动每天通过Wi-Fi备份用户的iOS设备.在您的应用程序的主目录都被备份,唯一的例外是应用程序本身捆绑,缓存目录和temp目录.购买的音乐,应用程序,电子书,相机 ...
- [笔记]linux下环境变量配置字段
一般修改/etc/profile文件 java: export JAVA_HOME=/usr/lib/java/jdk1.8.0_92export CLASSPATH=.:$JAVA_HOME/lib ...
- Java中的private protected public和default的区别
转至:http://blog.sina.com.cn/s/blog_74c571240101jaf5.html 类内部 本包 子类 外部包 public √ √ √ √ pro ...
- AOJ 0033 Ball【DFS】
有一个筒,从A口可以放球,放进去的球可通过挡板DE使其掉进B管或C管里,现有带1-10标号的球按给定顺序从A口放入,问是否有一种控制挡板的策略可以使B管和C管中的球从下往上标号递增. 输入: 第一行输 ...
- C# 通过模拟http请求来调用soap、wsdl
C#调用webservice的方法很多,我说的这种通过http请求模拟来调用的方式是为了解决C#调用java的远程API出现各种不兼容问题. 由于远程API不在我们的控制下,我们只能修改本地的调用代码 ...
- 清理SYSAUX表空间
1.查看SYSAUX表空间中数据分布情况 col SEGMENT_NAME for a30 set lines 999 select * from (select segment_name,PARTI ...
- XOR Swap
swap(a, b): a ^= b b ^= a a ^= b 先明确一下,a ^ a = 0,同时对于一切数x ^ 0 = x 可以这样理解,第三行: b ^= a b ^= a ^ b b = ...
- ExtJS 中类的选项 - config
首先看一个例子,我们在ExtJS中定义一个Window对象,代码如下: var win = Ext.create("Ext.window.Window", { title: '示例 ...
- 关于P,V操作理解的突破，关于并发设计与并行
今天又找了一篇博客研究P,V操作.. 发现..它有一个变量没有声明.. 我就换了篇博客..http://c.biancheng.net/cpp/html/2600.html 然后就看懂了.. 关键突破 ...