目录
一、CSS使用技巧
1.1、精灵图使用
(1)、原理
(2)、示例
.box1 {
width: 60px;
height: 60px;
margin: 100px auto;
background: url(images/sprites.png) no-repeat -182px 0;
}
1.2、字体图标使用
(1)、原理
(2)、示例
/* 字体声明 */
@font-face {
font-family: ‘icomoon‘;
src: url(‘fonts/icomoon.eot?p4ssmb‘);
src: url(‘fonts/icomoon.eot?p4ssmb#iefix‘) format(‘embedded-opentype‘),url(‘fonts/icomoon.ttf?p4ssmb‘) format(‘truetype‘),url(‘fonts/icomoon.woff?p4ssmb‘) format(‘woff‘),url(‘fonts/icomoon.svg?p4ssmb#icomoon‘) format(‘svg‘);
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
font-family: ‘icomoon‘;
font-size: 100px;
color:pink;
}
1.3、CSS三角制作
(1)、原理
(2)、示例
.box2 {
width: 0;
height: 0;
border: 50px solid transparent;
border-left-color: pink;
}
1.4、表单轮廓和防止拖拽
(1)、示例
input, textarea {
/* 取消表单轮廓 */
outline: none;
}
textarea {
/* 防止拖拽文本域 */
resize: none;
}
1.5、鼠标样式
(1)、示例
<ul>
<li style="cursor: default;">我是默认的小白鼠标样式</li>
<li style="cursor: pointer;">我是鼠标小手样式</li>
<li style="cursor: move;">我是鼠标移动样式</li>
<li style="cursor: text;">我是鼠标文本样式</li>
<li style="cursor: not-allowed;">我是鼠标禁止样式</li>
</ul>
1.6、图片和文字对齐方式
(1)、示例
img {
vertical-align: middle;
}
| baseline | 默认。元素放置在父元素的基线上。 |
|---|---|
| sub | 垂直对齐文本的下标。 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
| text-bottom | 把元素的底端与父元素字体的底端对齐。 |
| length | |
| % | 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 |
| inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
1.7、溢出文字隐藏
(1)、单行
div {
width: 150px;
height: 80px;
background-color: pink;
margin: 100px auto;
white-space: nowrap;/* normal：换行显示。nowrap：单行显示 */
overflow: hidden;
text-overflow: ellipsis;/* 3. 文字溢出的时候用省略号来显示 */
}
(2)、多行
div {
width: 150px;
height: 65px;
background-color: pink;
margin: 100px auto;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;/* 弹性伸缩盒子模型显示 */
-webkit-line-clamp: 3;/* 限制在一个块元素显示的文本的行数 */
-webkit-box-orient: vertical;/* 设置或检索伸缩盒对象的子元素的排列方式 */
}
1.8、CSS初始化
/* 把我们所有标签的内外边距清零 */
* {
margin: 0;
padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal
}
/* 去掉li 的小圆点 */
li {
list-style: none
}
img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle
}
button {
/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
cursor: pointer
}
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button,
input {
/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
二、CSS 3
2.1、过渡
(1)、概念
(2)、属性
| 属性 | 描述 | 值 |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | none、all、property(属性列表) |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | |
| transition-delay | 规定过渡效果何时开始。默认是 0。 |
(3)、示例
div {
width: 100px;
height:100px;
transition:all 1s linear;
}
div:hover {
width: 200px;
height:200px;
}
2.2、动画
(1)、概念
(2)、属性
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画。 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 |
| animation-name | 规定 @keyframes 动画的名称。 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
| animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 |
| animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 |
| animation-delay | 规定动画何时开始。默认是 0。 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 |
(3)、示例
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
2.3、2D 转换
(1)、概念
(2)、属性
| Property | 描述 |
|---|---|
| transform | 适用于2D或3D转换的元素 |
| transform-origin | 允许您更改转化元素位置 |
(3)、转换方法
- translate()
- rotate()
- scale()
- skew()
- matrix()
| 函数 | 描述 |
|---|---|
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| translate(x,y) | 定义 2D 转换，沿着 X 和 Y 轴移动元素。 |
| translateX(n) | 定义 2D 转换，沿着 X 轴移动元素。 |
| translateY(n) | 定义 2D 转换，沿着 Y 轴移动元素。 |
| scale(x,y) | 定义 2D 缩放转换，改变元素的宽度和高度。 |
| scaleX(n) | 定义 2D 缩放转换，改变元素的宽度。 |
| scaleY(n) | 定义 2D 缩放转换，改变元素的高度。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| skew(x-angle,y-angle) | 定义 2D 倾斜转换，沿着 X 和 Y 轴。 |
| skewX(angle) | 定义 2D 倾斜转换，沿着 X 轴。 |
| skewY(angle) | 定义 2D 倾斜转换，沿着 Y 轴。 |
2.4、3D 转换
(1)、概念
(2)、属性
| 属性 | 描述 | |
|---|---|---|
| transform | 向元素应用 2D 或 3D 转换。 | |
| transform-origin | 允许你改变被转换元素的位置。 | |
| transform-style | 规定被嵌套元素如何在 3D 空间中显示。 | flat、preserve-3d |
| perspective | 规定 3D 元素的透视效果。 | number(像素)、none |
| perspective-origin | 规定 3D 元素的底部位置。 | |
| backface-visibility | 定义元素在不面对屏幕时是否可见。 |
(3)、3D 转换方法
| 函数 | 描述 |
|---|---|
| matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate3d(x,y,z) | 定义 3D 转化。 |
| translateX(x) | 定义 3D 转化，仅使用用于 X 轴的值。 |
| translateY(y) | 定义 3D 转化，仅使用用于 Y 轴的值。 |
| translateZ(z) | 定义 3D 转化，仅使用用于 Z 轴的值。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 定义 3D 缩放转换，通过给定一个 X 轴的值。 |
| scaleY(y) | 定义 3D 缩放转换，通过给定一个 Y 轴的值。 |
| scaleZ(z) | 定义 3D 缩放转换，通过给定一个 Z 轴的值。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿 Z 轴的 3D 旋转。 |
| perspective(n) | 定义 3D 转换元素的透视视图。 |
(4)、示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
perspective: 1000px;
}
section {
position: relative;
width: 300px;
height: 200px;
margin:300px auto;
transform-style: preserve-3d;
animation: muma 10s linear infinite;
}
@keyframes muma{
from{transform: rotateY(0deg);}
to{transform: rotateY(360deg);}
}
section:hover {
animation-play-state: paused;
}
section div {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: url(images/pink.jpg) no-repeat;
}
section div:nth-child(1){
transform: translateZ(300px);
}
section div:nth-child(2){
transform: rotateY(60deg) translateZ(300px);
}
section div:nth-child(3){
transform: rotateY(120deg) translateZ(300px);
}
section div:nth-child(4){
transform: rotateY(180deg) translateZ(300px);
}
section div:nth-child(5){
transform: rotateY(240deg) translateZ(300px);
}
section div:nth-child(6){
transform: rotateY(300deg) translateZ(300px);
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>