css:精灵图,滑动门,三角形

sprites（精灵图）

1.概念

CSS Sprite也叫CSS精灵、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，由从前的多次请求变为一次请求。客户端每显示一图片都会向服务器发送请求，所以图片越多请求越多，造成延迟的可能性越大。所以页面有许多icon时，推荐使用CSS Sprite。

2.优点

（1）减少图片的字节。

（2）减少网页的http请求，从而大大的提高页面的性能。

（3）解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

3.原理

（1）需要一个设置好宽和高的容器

（2）通过background-image引入背景图片

（3）通过background-position把背景图片移动到自己需要的位置

调试方法:可以用浏览器自带的调试工具进行调试（如chrome浏览器按f12即可进行调试，慢慢移动background-position的值来达到理想的效果）

注：在使用雪碧图之前，我们首先应该用ps测量每个小图标的位置；下面这张图片就是由许多小图标组成的，先测量它们在这张图中的position;一般position为负值，因为需要把这个小图标向左上角平移裁切，所以position-x和position-y一般都是负值。

4.应用

<div class="icon"></div>

.icon {
        width: 230px;
        height: 230px;
        background-image: url('');
        background-repeat: no-repeat;
        background-position: -260px -30px;
        /*background可以简写为*/
         background: url('') no-repeat -260px -30px;
        /*background:background-image background-repeat background-position*/
    }

滑动门

应用

CSS可见性（元素可见性）
overflow： hidden； 将超出部分隐藏（部分隐藏）
display: none; 元素隐藏（全部隐藏）（隐藏元素不占置）
display: block; 显示元素
visibility： hidden； 隐藏元素（全部隐藏）（隐藏元素占置）

html

<div class="slide">
    <ul class="list">
      <li>
        <a href="#">box1</a> 
        <div class="box"></div>
      </li>
      <li>
        <a href="#">box2</a>
        <div class="box"></div>
      </li>
      <li>
        <a href="#">box3</a>
        <div class="box"></div>
      </li>
    </ul>
  </div>

css

body {
  margin: 0;
  padding: 0;
}
/* 去除ul,li本身才生的边距 */
div,ul,li {
  margin: 0;
  padding: 0;
}
.slide {
  width: 300px;
  height: 50px;
}
.list {
  width: 100%;
  height: 50px;
}
.list li {
  list-style: none;
  float: left;
  font-size: 20px;
  line-height: 50px;
  display: block;
  width: 33.33%;
  text-align: center;
}
.list li a {
  width: 100%;
  height: 50px;
  background: red;
  display: block;
  text-decoration: none;
  color: white;
}
.list li:hover a{
  background: gold;
}
/* 盒子向下偏移不会造成鼠标到中间空隙消失的情况，因为li把a标签和div包裹起来了（查看chrome调试） */
.list li .box {
  margin-top: 10px;
  width: 500px;
  height: 500px;
  background: green;
  box-sizing: border-box;
  border: 1px solid #fff;
  display: none;
  /* border-top: none; */
}
.list li:hover .box {
  display: block;
}

三角形

html

<div class="triangle">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
    <div class="box7"></div>
    <div class="box8"></div>
    <div class="box9"></div>
  </div>

css

.triangle {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.box1 {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top-color: red;
  background: gray;
}
.box2 {
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  background: gray;
}
.box3 {
  width: 0;
  height: 0;
  border-top: 50px solid black;
  border-right: 50px solid red;
  border-bottom: 50px solid green;
  border-left: 50px solid blue;
}
.box4 {
  width: 0;
  height: 0;
  background: gray;
  border-top: 100px solid red;
  border-left: 100px solid transparent;
}
.box5 {
  width: 0;
  height: 0;
  background: grey;
  border-top: 100px solid red;
  border-right: 100px solid transparent;
}
.box6 {
  width: 0;
  height: 0;
  background: grey;
  border-top: 100px solid red;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}
.box7 {
  width: 0;
  height: 0;
  background: grey;
  border-left: 100px solid red;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
}
.box8 {
  width: 0;
  height: 0;
  background: gray;
  border-right: 100px solid red;
  border-top: 50px solid transparent;
}
.box9 {
  width: 0;
  height: 0;
  background: grey;
  border-bottom: 100px solid red;
  border-left: 50px solid transparent;
}