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 属性 一. ...
随机推荐
- [Android] charles高级使用总结
reference to : http://blog.csdn.net/a910626/article/details/52823981 charles高级使用总结 网速模拟 点击菜单“Proxy→T ...
- kettle系列-6.kettle实现多字段字典快速翻译
在数据清洗转换中,常见的字典翻译,如性别在原表中是1(男).2(女)等,类似还有很多较大的字典需要翻译,若同一个表中有很多个字典需要翻译,采用[数据库查询]方式翻译的话效率就会相当低下. 这里采用ja ...
- teamviewer "TeamViewer Daemon is not running
执行下面的命令问题解决: # teamviewer --daemon enable enable Sat Jan :: CST Action: Installing daemon () for 'up ...
- 【React】启动dva脚手架
开始前: 确保node版本为6.5以上. // 安装脚手架 npm i dva-cli -g // 自动安装新工程 dva new newProjectName // 导入antd包 npm i an ...
- CentOS 7 安装后没有ifconfig命令
/bin,/sbin,/usr/bin,/usr/sbin下面都没有ifconfig命令. 执行命令 yum install net-tools 即可.
- curl使用简单介绍
http://www.linuxidc.com/Linux/2008-01/10891.htm Curl是Linux下一个很强大的http命令行工具,其功能十分强大. 二话不说,先从这里开始吧! $ ...
- openmp 的使用
http://blog.csdn.net/gengshenghong/article/details/7003110 说明:这部分内容比较基础,主要是分析几个容易混淆的OpenMP函数,加以理解. ( ...
- Hadoop 全分布模式 平台搭建
现将博客搬家至CSDN,博主改去CSDN玩玩~ 传送门:http://blog.csdn.net/sinat_28177969/article/details/54138163 Ps:主要答疑区在本帖 ...
- Mac AppleScript 自动完成按键
本人用AppleScript成功实现了打开锐捷app,并且在用户验证框输入我的用户密码,然后强制退出锐捷.(至于为什么这么做呢?用校园网的痛苦,一言难尽啊!) 学习以下内容,首先你要自行百度资料来学习 ...
- [翻译] ORMLite document -- How to Use Part (二)
前言 此文档翻译于第一次学习 ORMLite 框架,如果发现当中有什么不对的地方,请指正.若翻译与原文档出现任何的不相符,请以原文档为准.原则上建议学习原英文文档. ----------------- ...