CSS3笔记

动画

<!DOCTYPE html>
<html>
<title>Animation测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<style type="text/css">
div{
    height: 100px;
    width: 100px;
    position: fixed;
    background-color: black;
    animation: changeColor infinite;/*声明动画: 动画名称 耗时 速度 延时 次数 顺序*/
    -webkit-animation-name: changeColor 2s;/*兼容谷歌和Safari*/
    -moz-animation-name: changeColor 2s;/*兼容火狐*/
    -o-animation-name: changeColor 2s;/*Opera*/
    animation-duration:2s;/*播放两秒的动画,被infinite覆盖了*/
    animation-timing-function:linear;/*匀速播放动画*/
    animation-delay: 1s;/*延时一秒播放动画*/
    animation-direction: reverse;/*反向播放*/
    animation-fill-mode: forwards;/*使用动画最后的样式*/
}
@keyframes changeColor{
    0%   {background: red; left:0px; top:0px;}/*时间开始*/
    25%  {background: yellow; left:200px; top:0px;}/*时间到25%*/
    50%  {background: blue; left:200px; top:200px;}/*时间到50%*/
    75%  {background: green; left:0px; top:200px;}/*时间到75%*/
    100% {background: red; left:0px; top:0px;}/*时间到100%*/
}
</style>
</head>
<body>
<div></div>
<body>

类名	说明
-wekit	谷歌和 Safari
-o	Opera
-moz	火狐
@keyframes `动画名称`	声明一个动画
animation `动画名称耗时速度延时次数顺序`	声明使用一个动画及所有属性,可不全
animation-name `动画名称`	表示使用哪一个声明的动画
animation-duration `2ms毫秒/2s秒`	表示动画一个周期执行多久
animation-timing-function `速度`
linear	匀速
ease	低速->加快->变慢
ease-in	低速开始，匀速结束
ease-out	匀速开始，低速结束
ease-in-out	低速开始，匀速，低速结束
cubic-bezier(n,n,n,n)	指定速度进行,0<n<1,可以是小数
animation-delay `2ms毫秒/2s秒`	表示动画延时多久开始
animation-iteration-count `次数/infinite无数次`	表示动画执行多少次
animation-direction `动画播放顺序,可多个拼接`
normal	默认
reverse	反向运行
alternate	反向并交替,带时间功能的函数也反向
alternate-reverse	反向交替，反向开始交替
animation-play-state `paused暂停/running运行`
animation-fill-mode `动画结束状态`
none	保留默认
forwards	最后停留的样式
backwards	第一个的样式
both	兼容两个

变形,过渡

<!DOCTYPE html>
<html>
<title>Animation测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<style type="text/css">
div{
    text-align: center;
    width: 200px;
    height: 200px;
    line-height: 200px;
    word-break: keep-all;
    white-space: nowrap;
    background-color: #EFFAFF;
    float: left;
    margin: 50px 100px 50px 0px;
}
div:nth-child(2){
    transform: rotate(20deg);//顺时针旋转20度
}
div:nth-child(3){
    transform: rotate(-20deg);//逆时针旋转20度
}
div:nth-child(4){
    transform: skewX(10deg);//竖X轴逆时针倾斜10度
}
div:nth-child(5){
    transform: skewY(20deg);//横轴y轴顺时针倾斜10度
}
div:nth-child(6){
    transform: skew(10deg, 20deg);//x倾斜10度,y轴倾斜20度
}
div:nth-child(7){
    transform: translateX(10px);//向右移动10个象素
}
div:nth-child(8){
    transform: translateY(20px);//向下移动20个象素
}
div:nth-child(9){
    transform: translate(10px, 20px);//向右移动10个象素，向下移动20个象素
}
div:nth-child(10){
    transform: scaleX(1.3);//横向放大1.3倍
}
div:nth-child(11){
    transform: scaleY(0.5);//竖向缩小0.5倍
}
div:nth-child(12){
    transform: scale(1.3, 0.5);//横向放大1.3倍,竖向缩小0.5倍
}
div:nth-child(13){
    transition:width ease 0.2s, height ease 0.3s;
}
div:nth-child(13):hover{
    height: 100px;
    width: 100px;
}

</style>
</head>
<body>
<div>normal</div>
<div>transform: rotate(20deg)</div>
<div>transform: rotate(-20deg)</div>
<div>transform: skewX(10deg);</div>
<div>transform: skewY(20deg);</div>
<div>transform:skew(10deg,20deg);</div>
<div>transform:translateX(10px);</div>
<div>transform:translateY(20px);</div>
<div>transform:translate(10px, 20px);</div>
<div>transform:scaleX(1.3);</div>
<div>transform:scaleY(0.5);</div>
<div>transform:scaleY(1.3, 0.5);</div>
<div>transition:width ease 0.2s,<br/>height ease 0.3s;</div>
<body>

类名	说明
transform	声明使用图形转换
rotate `角度/deg->degress`	图形旋转,0度位于左下角,3点钟为45度,6点钟为90度
skew `(x->竖,逆时针)(y->横,顺时针)`	图形倾斜,零点位于图形正中心,旋转两条交中垂直线
skew (`deg`) = skewX(`deg`), skew(30deg)	表示x轴逆时针旋转30度
skewY(`30deg`)	表示y轴顺时针旋转30度
skew(`30deg`,`40deg`)	表示x轴旋转30度，y轴旋转40度
translate(x象素,y象素) 填写一个默认为x,	图形位移,0坐标为左上角,横x,竖y,y值坐标相反
scale(x, y)填写一个为x	图形缩放,正值放大,负值缩小,大小扩充为等比
3d系列和矩阵比较复杂很多不支持	不记了
transition `过渡1`，`过渡2`， …	一定的时间区间内平滑地过渡
transition-property	指定过渡的css属性
transition-duration	指定过渡需要的时间
transition-timing-function	指定过渡的速率
transtion-delay	指定过渡开始延迟多少秒

背景,边框

类名	入参
background-attachment	背景图定位
scroll	背景会和当前元素绑定，滚动文字图片还是一样
fixed	背景会和网页绑定，相对网页是固定的
local	背景位置在哪就在哪
local, scroll	元素在哪就在哪，图片和网页绑定
background-clip	规定背景的区域
border-box	背景包括了边框，默认值
content-box	背景不包括边框，内容有多大就多大
padding-box	背景不包括边框
background-origin	背景从哪里填充
content-box	内容从文字开始填充
padding-box	从盒子的左上角开始填充，默认值
border-box	和盒子的边框开始填充
border-style	边框样式
dotted	全是圆形，太小的时候看起来像正方形
dashed	全是长方形
solid	视线
double	两条细线
groove	凹下去的3D线条
ridge	凸起来的3D线条
inset	看得见的凹下去效果
outset	看得出的突出效果
outline `颜色,边框的样式,边框的宽度`	边框再加一层边框
border-image `图片路径`	给边框设置图片
border-image-slice: 上,右,下,左	图片裁剪对应位置多少像素或百分比
border-image-width: 上,右,下,左	图片在对应位置边框里面的宽度
border-image-outset: 上,右,下,左	图片在对应位置该溢出多少
border-image-repeat: 上,右,下,左	图片在对应位置的填充方式
stretch	拉伸图片
repeat	图片平铺
round	图片平铺并且会智能拉伸
box-shadow	盒子设置阴影`inset 10px 10px 5px 0px blue`
inset	内阴影，没有则为外阴影(默认值)
offset-x	阴影横向偏移的位置，以左上角为零X坐标
offset-y	阴影纵向偏移的位置，以左上角为零Y坐标,坐标相反
blur-radius	阴影的模糊半径,必须>0，边缘模糊化
spread-radius	扩展或缩小阴影
font-variant: `normal/small-caps`	`small-caps`普通字母大写,大写字母更大
content	主要用于标签插入内容,选择器里面使用
a:after { content: “ (“ attr(href) “)”; }	给每个url链接加个括号
h1:before {content:url(hao.png}	给每个h1之前添加一张hao.png图片
counter-reset `name` `id`	数字每遇到定义的节点便重置为`id`默认为0
counter-increment `name`	递增指定的name对象
content `counter(section)`	counter获取当前section的`id+1`
list-style-image: url(‘/hao.png’)	替换有序无序列表的列表项的标记
list-style-position: `inside/outside`	列表项的位置放在文本内还是文本外
column-count：`num`	文本内容要分割的列数
column-gap: `20px`	列与列之间的间隔
column-rule： `10px solid black`
column-rule-width	列与列间的边框宽度
column-rule-style	列与列间的边框线条样式
column-rule-color	列与列间的边框线条颜色
vertical-align	元素的垂直对齐方式
sub/super	垂直对齐文本的下标/垂直对齐文本的上标
top/middle/bottom	垂直对齐行内最高/居中/底部
text-top/top-middle	垂直行内字体顶部对齐/底部对齐
border-collapse: `collapse;`	合并表格的默认双线表格
border-spacing： `10px 10px`	表格里面小格子的x,y间距
caption-side: `bottom/top`;	表格的标题位置表格底部/表格顶部
empty-cells: `hide/show`;	隐藏表格里面空小格子的边框和背景
text-transform	`uppercase全部大写/capitalize首字母大写/lowercase`
white-space	规定段落中的文本不进行换行，处理空格的方式
nowrap	内容不换行
pre	保留空格不换行
pre-wrap	保留空格换行
pre-line	合并空格换行
word-spacing `10px`	单词的间距
text-overflow `clip/elipsis/str`	修剪文本/省略号代替溢出文本/自定义字符表示溢出文本
text-shaow	类型box-shaow
word-break `break-all/keep-all`	允许单词行内换行/只能在半角空格或连字符处换行
word-wrap `break-word`	允许长单词行内换行