题外话

最近百度前端学院的春季班又开始了，感觉自己前端基础还不够牢固，于是尝试着报了名，从第一个任务开始，打算重新夯实一下基础。

虽然这些任务只是一些没有js的页面，但其中也发现了不少没遇到过的css样式，或者说是一些技巧。

首先是transition这个css3的属性。

这个属性主要是起到一个过渡效果，实现了一些以前需要js才能实现的效果。

.mask button{
       margin-top: 50px;
       border-radius: 5px;
       border-style:none;
       color: #fff;
       outline: none;
       width: 320px;
       height: 70px;
       font-size: 21px;
       background-color: red;
       transition: all ease-out 1s;
       cursor: pointer;
   }
   .mask button:hover{
       opacity: 0.5;
       filter:alpha(opacity:50);
  }

以上这段代码就实现了鼠标悬浮于按钮上时，按钮透明度由1缓慢（ease-out方式）变化为0.5的效果。
关于这个属性，想要了解更多可以看 这里

使用focus实现如下选择框切换

主要代码如下：

<form>
          <div class="selectArea flexBox">
              <div class="selectBox" tabindex="0">
                  <div class="select" selected="中国" ></div>
                  <ul class="option">
                      <li>中国</li>
                      <li>其他</li>
                  </ul>
              </div>
              <div class="selectBox" tabindex="0">
                  <div class="select" selected="省份" ></div>
                  <ul class="option">
                      <li>江苏省</li>
                      <li>浙江省</li>
                      <li>上海市</li>
                      <li>北京市</li>
                  </ul>
              </div>
              <div class="selectBox" tabindex="0">
                  <div class="select" selected="城市" ></div>
                  <ul class="option">
                      <li>南京</li>
                      <li>杭州</li>
                      <li>浦东</li>
                  </ul>
              </div>
              <button class="button">搜索</button>
          </div>
      </form>

.section3 .selectBox{
      outline: none;
      position: relative;
      height: 41px;
  }
  .section3 .selectBox:focus>.select{
      border: 2px solid #c00 ;
  }
  .section3 .selectBox:focus > .option{
      position: absolute;
      display: block;
      background-color: #dadada;
      width: 200px;
      left: 30px;
      border-style: none solid solid solid;
      border-color: #c00;
      border-width: 2px;
   }
   .section3 .selectBox:focus > .option li{
      font-size: 13px;
      padding:20px 20px 10px 20px;
  }
  .option li:hover{
      background-color: #de0000;
      cursor: pointer;
      color:white;
      transition: background-color ease-out 1.5s;
  }
  .selectBox> .option{
      position: absolute;
       display: none;
   }

这里只需要预先设置.option不显示，然后通过focus来使其显示即可达到类似选项卡的效果。

使用transform实现图片缩放效果

如上图，当鼠标悬浮于图片上时，图片会自动放大。代码也不复杂：

.section4 .img1 img{
        transition:all ease-out 1s;
    }
    .section4 .img1 img:hover{
        transform: scale(1.5);
    }

主要讲transition和transform属性结合，即可实现这样的效果。
具体更多关于transform，可以看这里

css实现小三角形状效果

效果如下：

先来看看实现的代码：

.imgLeft:after{
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        border-width: 40px 40px 40px 0;
        border-style: solid;
        border-color:   transparent #ffffff transparent  transparent;
        right: 0;
        top: 50%;
        margin-top: -40px;
    }

一开始我也是摸不着头脑，后来将该元素width和height调制较大后才理解来原理，如下：

将元素高宽变为0，尖头那个方向不设边框，其他设置较宽边框，尖头反方向边框设置颜色，其为透明，即可形成该效果。

线条的伸缩效果。

当鼠标悬浮时，右边线条会有中间向两边伸长。
代码如下：

.section6 .mid .title:after{
        content: '';
        width: 40px;
        margin-left: -20px;
        border: 2px solid #555555;
        position: absolute;
        top:250px;
        left: 215px;
        transition: all ease-out 1.2s;
    }
    .section6 .mid:hover> .title:after{
        margin-left: -50px;
        width: 100px;
    }

这里要注意的是，必须要添加margin-left，否则无法实现由中间向两边延展的效果。

flex伸缩盒布局

这个布局可以实现页面的简单自适应效果，具体可以看阮一峰的博客,也可以看这个

总结

总的来说，虽然是一些比较基础的页面，但是还是发现了自己在基础方面的不足，同时在ife这个平台上能够看到其他小伙伴的代码，也有利于自己更加深入的思考，继续加油！