HTML5/CSS3能实现的一些效果

利用html5和css3的新特性，可以更方便地实现一些效果。

• 移到图片上，图片变淡
• 点击图标放大
• 热点图
• 两面切换
• 分页栏的翻转效果

移到图片上，图片变淡

之前是使用jq的fadeTo来完成，现在可以用伪元素来完成。
伪元素::before为加在父类的内容前的内容，必须有content属性。
在使用:hover的时候，看好要有变化的主体是什么，是谁在变化，是元素呢，还是元素的伪元素，还是内部的子元素？
HTML

<div id="pic"><img src="IMG1.jpg" alt=""></div>

CSS
利用伪元素，定义了一层半透明的遮罩，显示为none,当鼠标移动到图片上时，伪类：hover定义了伪元素::before此时显示为block，遮罩出现。

 /*制作隐藏遮罩*/
    img{
        width:200px;
        height:200px;
    }
    #pic{
        position:relative;
    }
    #pic::before{
     /*一定要加content*/
        content:'';
        display:none;
        position:absolute;
        width:200px;
        height:200px;
        top:0;
        left:0;
        background:rgb(0,0,0,0.3);
    }
    #pic:hover::before{
        display:block;
    }

再补一个ICONFONT总结：

1. 根据自己存放的路径引入CSS文件。<link href="iconfont/iconfont.css" rel="stylesheet">
2. 根据下载下来的官方html文件，加入@font-face、.iconfont。
3. 加入类就可以使用：

 <span class="iconfont">&#xe69b;</span>

4.定义font-family和content就可以在伪元素中使用：

 input[type="week"]::after{
        font-family:'iconfont';
        content: '\e69b';
        color:red;
 }

点击图标放大

HTML

<div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
 </div>

CSS

*{
        box-sizing:border-box;
    }
    ul{
        border-spacing: 50px;
    }
    li{
        /* float:left; */
        display:table-cell;
        vertical-align: middle;
        /* margin:10px; */
        /* padding:13px; */
        width:50px;
        height:50px;
        border:1px solid red;
        border-radius:50%;
        list-style-type: none;
        text-align:center;
        font-size:20px;
    }
    li:hover{
        transform:scale(1.2);
    }

效果：

热点图

HTML

  <!-- 热点图 -->
<div class="rediantu">
    <div id="DOT1"></div>
    <div id="DOT2"></div>
    <div id="DOT3"></div>
    <div id="DOT4"></div>
</div>

CSS
这边原来有很对冗余代码，已经进行了一些优化，用到优先级判断和后来居上原则。
主要思路是：
设置DOT1不动，DOT2-4的宽高、Box-shadow等都一样，duration总时间为1.2s，然后分别设置0s，0.4s，0.8s的延迟，形成水波纹的效果。

    .rediantu{
        position:relative;
        display:table-cell;
        border:1px solid purple;
        width:100px;
        height:100px;
    }
    
    @keyframes change1{
        0%{

        }
        70%{
            width: 30px;
            height: 30px;
            opacity: 1;
        }
        100%{
            width: 60px;
            height: 60px;
            opacity: 0;
        }
    }

    .rediantu div{
            position:absolute;
            top:50%;
            left:50%;
            /* 用transition代替负Margin技术 */
            transform:translate(-50%,-50%);
            width: 6px;
            height:6px;
            border-radius:50%;
    }
    .rediantu div:nth-last-child(1){  
            width:4px;
            height:4px;
            border:1px solid blue;
            background-color: blue;
    }
    .rediantu div:nth-last-child(2){
        animation:change1 1.2s linear 0s infinite normal backwards;
            box-shadow:0 0 10px blue;
    }
    .rediantu div:nth-last-child(3){
        animation:change1 1.2s linear 0.4s infinite normal backwards;
            box-shadow:0 0 10px blue;
    }
    .rediantu div:nth-last-child(4){
        animation:change1 1.2s linear 0.8s infinite normal backwards;
            box-shadow:0 0 10px blue;
    }

两面切换

先来看效果

鼠标经过后

<!-- 两面切换 -->
<div class="shift">
    <div id="ro1">正面</div>
    <div id="ro2">反面</div>
</div>

CSS
如果要保留子元素的3D效果，别忘了在父元素中加transform-style: preserve-3d;。
思路是用div设正面和反面，正面设置z-index=1，放在上面，而反面设置翻转180°。最后设置包裹整体的DIV在鼠标移到上面的时候翻转180°。

 body{
    /* perspective:500px; */
      transform-style: preserve-3d;
    }
  .shift{
      display:block;
      position: relative;
      width:200px;
      height:200px;
      transition: all .3s;
      transform-style: preserve-3d;
  }
  .shift div{
      position:absolute;
      top:50%;
      left:50%;
      margin-left:-100px;
      margin-top: -100px;
      width:200px;
      height:200px;
      border-radius: 50%;
      text-align:center;
      padding:85px 0;
  }
  .shift div:first-child{
      z-index:1;
      background-color:pink;
  }
  .shift div:last-child{
      transform:rotateY(180deg);
      background-color:purple;
  }
  .shift:hover{
      transform:rotateY(180deg);
  }

分页栏的翻转效果

效果图

鼠标移到上面

HTML

    <div class="nav_bar">
        <div id="first">上面</div>
        <div id="second">下面</div>
    </div>

CSS
同样设两个DIV，用translate和rotate将两面设置成垂直的效果。最后包裹他们的div进行90度的翻转。

 /* 翻转分页 */
  .nav_bar{
      position:absolute;
      top:50px;
      left:50px;
      width:100px;
      height: 100px;
      transform-style: preserve-3d;
      transition: all .3s;
      transform:translateZ(10px);
  }
  .nav_bar div{
      position:absolute;
      top:50%;
      left:50%;
      margin-left:-50px;
      margin-top:-10px;
      width:100px;
      height: 20px;
  }
  #first{
      background-color: red;
      transform:translateZ(10px);
      z-index:1;
  }
  #second{
      background-color: purple;
      transform:translateY(10px) rotateX(-90deg);
  }
  .nav_bar:hover{
      transform:rotateX(90deg);
      /* transform-origin: center center; */
  }