p{
font-size:60px;
font-weight:900px;
color:#999;
text-shadow:5px 5px 5px #333; 水平位移，垂直位移，模糊半径，颜色。
} 文字缩进: text-indent 文本换行：
p
{
width:100px;
border:solid 1px red;
word-wrap:break-word;/断单词/
word-break:break-all;/断字符/
white-space:nowrap;/强制在一行内显示所有文本/
}
overflow:hidden; 超出部分隐藏。
overflow:auto; 超出有滚动条。
overflow:srcoll; 超出不超出都有滚动条 文本溢出
p
{
width:200px;
white-space:nowrap;
border:solid 1px red;
text-overflow:clip;/不显示省略标记，而是简单的裁切掉/
text-overflow:ellipsis;/当对象内文本溢出时显示省略标记/
overflow:hidden;
}
注意：text-overflow是配合overflow使用的。 圆角 border-radius
border-top-left-radius:10px; 阴影 box-shadow :
box-shadow:5px 5px 5px #333; 水平位移，垂直位移，模糊半径，颜色。 背景图片铺满: background-size:cover; transform
#d1
{
width:100px;
height:100px;
background-color:#00F;
}
#d1:hover
{
transform:rotate(40deg) scale(1.2); /顺时针旋转40度，放大1.2倍/
transform:translate(40px,40px); /水平偏移40px,垂直偏移40px/
transform:skew(30deg,-10deg); /水平倾斜30度，垂直倾斜10度/
} 兼容性写法：
#d1:hover{
-ms-transform:rotate(40deg) scale(1.2); /顺时针旋转40度，放大1.2倍/ IE内核浏览器
-moz-transform:translate(40px,40px); /水平偏移40px,垂直偏移40px/ 火狐内核浏览器
-o-transform:skew(30deg,-10deg); /水平倾斜30度，垂直倾斜10度/ safari是苹果内核浏览器
-webkit-transform:rotate(40deg) scale(1.2); 谷歌内核浏览器
} 平滑过渡:
#d1
{
width:100px;
height:100px;
background-color:#00F;
}
#d1:hover
{
background-color:#F00;
transition:background-color 1s ease-in;/过渡的属性，如果是所有的则是all，经历的时间，过渡效果/
}
匀速：linear 加速：ease 开始慢:ease-in
结束慢: ease-out 开始结束慢中间快 : ease-in-out 更复杂的动画 animation :
#d1
{
magin:0px auto;
width:959px;
height:613px;
background-image:url(“11.jpg”);
animation:x-spin 20s infinite linear;/动画名称，经历时间，播放次数(为infinite则一直播放)，播放方式/
}
@-webkit-keyframes x-spin
{
0%{
transform:rotateX(0deg);/沿x轴开始旋转/
}
50%{
transform:rotateX(180deg);/沿x轴旋转180/
}
10%{
transform:rotateX(360deg);/沿x轴旋转360/
}
} 替换图片：
#d1 {
width: 239px;
height: 360px;
background-image: url(“../img/1.jpg”);
background-repeat: no-repeat;
}
#d1:hover {
background-image: url(“../img/10.jpg”);
transform: rotate(40deg);
transition: all ease 1s;
}
实例一
css: .pic img { width: 150px; border: solid 2px #fff; border-radius: 12px; cursor: pointer; } .pic { position: absolute; } .pic1 { top: 100px; left: 100px; transform: rotate(30deg); } .pic2 { top: 150px; left: 150px; transform: rotate(-30deg); } .pic3 { top: 180px; left: 180px; transform: rotate(40deg); } .pic4 { top: 100px; left: 230px; transform: rotate(-20deg); } .pic5 { top: 230px; left: 180px; transform: rotate(-40deg); } .pic6 { top: 140px; left: 250px; transform: rotate(34deg); } .pic7 { top: 90px; left: 350px; transform: rotate(55deg); } .pic8 { top: 240px; left: 400px; transform: rotate(-22deg); } .pic9 { top: 80px; left: 450px; transform: rotate(-24deg); } .pic:hover { transform: rotate(0deg) scale(1.5); transition: transform ease 1s; z-index:2; }
实例二：
css: #d1 { width: 600px; height: 338px; margin-top: 100px; margin-left: 100px; background-image: url("../img/11.jpg"); animation: donghua 10s ease infinite; } @keyframes donghua { 0% { transform: rotateY(0deg); } 50% { transform: rotateY(180deg) scale(1.5); } 100% { transform: rotateY(360deg) scale(1); } } 实例三：
css: body { background-color: #000; } .ball-box { height: 300px; width: 300px; position: absolute; top: 50%; left: 50%; margin: -150px 0px 0px -150px; perspective:3000px; } .ball { height: 100%; transform-style: preserve-3d; animation: rotate3d 20s infinite linear; } @-webkit-keyframes rotate3d { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .ball > p { border: solid 2px #fff; height: 100%; width: 100%; position: absolute; border-radius: 100%; } .line-1 { transform: rotateY(0deg); } .line-2 { transform: rotateY(36deg); } .line-3 { transform: rotateY(72deg); } .line-4 { transform: rotateY(108deg); } .line-5 { transform: rotateY(144deg); } .ball::after { content: ""; width: 1px; height: 500px; background-color: #ff0; display: block; transform: translateX(150px) translateY(-100px); } 重要亮点
transform-style: preserve-3d; 使其具有3d效果。
perspective:3000px; 透镜，相当于焦距，焦距越小成像越大，焦距越大，成像越大
