Top Pens Of 2013（100）—— Direction aware hover pure CSS

2013年前100：https://codepen.io/2013/popular/pens/
第100：https://codepen.io/FWeinb/pen/GrpqB
有感：首先要先想思路，写代码就快了。不然对着原作者的代码一模一样的敲过去，也没啥用。
成品：
这里写图片描述

该如何实现？
5个正边形，初始安排在上下左右方向，使用overflow:hidden 可以将其隐藏
将c看做 1，得到 a 的值是 1 * sin45° = 0.7071 （写完后才发现这个灰色的小方块在这里其实没有啥作用，不懂原作者为啥要写它，误导人。。。）

将小方块移到 center正边形的各个边的中线点，然后 transform: rotate(45deg) 照着中心点旋转45度

不加overflow:hidden;的效果：
开始写代码：
index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Direction aware hover pure CSS</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <div class="box">
            <div class="box_top">Top -> Bottom</div>
            <div class="box_right">Right -> Left</div>
            <div class="box_bottom">Bottom -> Top</div>
            <div class="box_left">Left -> Right</div>
            <div class="box_center">
                hover from any side
            </div>
        </div>
    </body>
</html>

style.css

html, body {
    font-family: helvetica sans-serif;
}
.box {
   position: absolute;
   top: 20%;
   left: 50%;
   width: 10em;
   height: 10em;
   line-height: 10em;
}
.box_top, .box_right, .box_bottom, .box_left, .box_center {
   position: absolute;
   width: inherit;
   height: inherit;
   line-height: inherit;
   text-align: center;
   transition: .4s ease;
}
.box_top:before, .box_right:before, .box_bottom:before, .box_left:before{
   content: '';
   position: absolute;
   width: 70.71%;
   height: 70.71%;
   transform: rotate(45deg);
}
.box_top:hover, .box_right:hover, .box_bottom:hover, .box_left:hover {
   transform: translateX(0);
   z-index: 1;
}
.box_top {
   background: lightcoral;
   /*初始在最上边*/
  transform: translateY(-100%);
}
.box_top:before {
    /*移到center正方形的 上 边 的中心*/
    top: 64.645%;
}
/*center正方形 移动*/
.box_top:hover ~ .box_center {
  transform: translateY(100%);
}

.box_right {
   background: skyblue;
   transform: translateX(100%); 
}
.box_right:before {
    right: 64.645%;
    top: 14.645%;
}
.box_right:hover ~ .box_center {
  transform: translateX(-100%);
}

.box_bottom {
   background: yellow;
   transform: translateY(100%); 
}
.box_bottom:before {
   bottom: 64.645%;
}
.box_bottom:hover ~ .box_center {
  transform: translateY(-100%);
}

.box_left {
   background: lightgreen;
   transform: translateX(-100%);    
}
.box_left:before {
   top: 14.645%;
   left: 64.645%;   
}
.box_left:hover ~ .box_center {
  transform: translateX(100%);
}

.box_center {
   background: orange;  
   z-index: -1;
}

Top Pens Of 2013（100）—— Direction aware hover pure CSS

猜你喜欢