CSS3学习（7）

CSS 动画

1.动画改变颜色

div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example; //动画名
animation-duration: 4s; //持续时间
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

keyframes 关键帧

2.动画改变颜色和位置

div {
width: 100px;
height: 100px;
background-color: red;
position: relative; //相对默认位置移动
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

from 等于0%，to 等于100%。

3.动画延迟

div里加上 animation-delay: 2s; 代表延迟2秒后开始动画。

4.动画运行次数

animation-iteration-count: 3; 运行3次动画停止
animation-iteration-count: infinite; 永久运行

iteration迭代 infinite无限

5.动画反方向运行

animation-direction: reverse; 反方向运行
animation-direction: alternate; 交替方向运行

reverse 相反的 alternate 交替

6.动画速度曲线

div {
width: 100px;
height: 50px;
background-color: red;
font-weight: bold;
position: relative;
animation: mymove 5s infinite;
}
@keyframes mymove {
from {left: 0px;}
to {left: 300px;}
}
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

animation-timing-function可以理解为-动画时间函数，一个封装好的函数可直接拿来用。

CSS 工具提示

.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext { //后代选择器
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0
/* 定位工具提示 */
position: absolute; //相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。
z-index: 1; //在更高的图层上
top: -5px;
left: 105%;
}
.tooltip:hover .tooltiptext { //tooltip有鼠标悬停时的tooltiptext
visibility: visible; //显示
}

CSS 分页

1.简单分页

.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}

<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">»</a>
</div>

2.面包屑

ul.breadcrumb { //class为breadcrumb的ul
padding: 8px 16px;
list-style: none; //不要ul的那个点
background-color: #eee;
}
ul.breadcrumb li {display: inline;} //行内
ul.breadcrumb li+li:before { //每两个li的组合，第二个li之前加上该css。
padding: 8px;
color: black;
content: “/\00a0”;
}
ul.breadcrumb li a {color: green;} //ul下的li的所有a

<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Pictures</a></li>
<li><a href="#">Summer 15</a></li>
<li>Italy</li>
</ul>

CSS 多列

.newspaper {
column-count: 3; //3列
column-gap: 40px; //列的间隙
column-rule: 1px solid lightblue; //列之间规则（分割线）的宽度 样式 颜色
}
h2 {
column-span: all; //合并单元格的感觉
}

<div class="newspaper">
<h2>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h2>
话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。
</div>

CSS 用户界面

div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: horizontal;
overflow: auto;
}

resize-改变大小，有三种选择：both都要、horizontal水平、vertical垂直。
用户可以通过拖拉边角进行大小的改变。