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 属性 一. ...
随机推荐
- 总结一下项目中遇到的分页问题，使用bootstrap-table来做的后台分页，大家可以借鉴一下 （分页第一篇）
前台进入bootstrap的js和css文件,我就不多少了,另外要引进bootstrap-table的js和css 废话不多说,直接代码. 框架为ssm,代码很清楚 <div class=& ...
- 忘记mysq rootl密码
忘记mysq rootl密码 1 mysql忘记root密码 1.1 查看mysql的进程 [root@mysql data]# cat /data/mysql.localdoma ...
- Redis Sentinel集群配置中的一些细节
今天在配置Redis集群,用作Tomcat集群的缓存共享.关于Redis集群的配置网上有很多文章,这里只是记录一下我在配置过程中遇到的一些小的细节问题. 1. 关于Protected Mode的问题 ...
- vmware下centos7桥接模式无法上网
前一段时间由于想给vm中的centos分配一个独立的IP,就将网络适配器的连接方式由NAT改为桥接,一切顺利. 今天再次开机,IP居然变成了192开头的局域网,并且ping不通外网,经过查找资料,解决 ...
- visual studio 2015连接到MySql相关问题
vs中使用服务器资源管理器连接到MySQL没有成功.按照网上提供的解决方法,相关插件已经安装: 1.控制面板中,MySQL Connector Net 6.9.9已经安装(原安装版本为6.9.8,后升 ...
- 【Java EE 学习 55】【酒店会员管理系统项目总结】
本酒店会员管理系统使用了SSH框架和传值播客提供的协同OA静态页面. 项目地址:https://github.com/kdyzm/HotelMembersManagement 一.需求分析 酒店会员管 ...
- 学习EXT.JS5时的重点载图
组件实例化的五种方式,最后一种不建议了 MVVM的图示,及controller的生存周期和MVC的不一样. VIEWCONTROLLER如何得到VIEW的实例呢,注意LOOKUPREFERENCE的使 ...
- C++ 系列：内存布局
转载自http://www.cnblogs.com/skynet/archive/2011/03/07/1975479.html 为什么需要知道C/C++的内存布局和在哪可以可以找到想要的数据?知道内 ...
- SQL Server 事务以及事务日志综述
事务是一个非常重要的概念,特此在这里写一些文章来总结.整篇文章还在持续更新中. 在本系列文章中,你将看到以下内容: 数据库事务(Database Transaction)概述 事务操作(BEGIN/C ...
- eclipse控制台乱码