• 欢迎访问杨思积的博客,专注于前端资讯分享,前端技术交流!

CSS感知鼠标方向

精选代码 Tomy 420次浏览 已收录 0个评论 扫描二维码
<style type="text/css">
.user_wns_wrjj990{width: 1000px;height: auto; overflow:hidden;cursor:pointer;}
.user_wns_wrjj990 [fox=con]{width:calc((990px - 10px * 3) / 4);background: url(http://img14.360buyimg.com/cms/jfs/t2440/158/2211029431/63092/8a132fbf/56f8e700N59df203e.jpg) -616px 0 no-repeat;height:calc((990px - 10px * 3) / 4 / 3 * 4);position: relative;overflow: hidden; margin:10px 10px 0 0; float:left;}
.user_wns_wrjj990 [fox=con] [fox$=_c]:nth-of-type(2n-1){width: 240px;
    height: 240px;
    transform: rotate(45deg) skew(8deg,8deg);
    position: absolute;
    left: 2px;}
.user_wns_wrjj990 [fox=con] [fox$=_c]:nth-of-type(2n){width: 240px;
    height: 240px;
    transform: rotate(45deg) skew(8deg,8deg);
    position: absolute;
    top: 42px;}
.user_wns_wrjj990 [fox^=top]{top: -151px;}
.user_wns_wrjj990 [fox^=right]{left: 148px;}
.user_wns_wrjj990 [fox^=bottom]{bottom:-151px;}
.user_wns_wrjj990 [fox^=left]{right:147px;}
.user_wns_wrjj990 [fox=con]:hover [fox$=_c]{transform:none;width: 100%;height: 100%;top: 0;left: 0;}
.user_wns_wrjj990 [fox=con] [fox$=_c]:hover{ z-index:5;}
.user_wns_wrjj990 [fox$=_c] [fox$=_con]{display: block;width:calc((990px - 10px * 3) / 4);height:calc((990px - 10px * 3) / 4 / 3 * 4);  background-image:linear-gradient(0deg,#4fc4b2,#fff,#b0fef2);}
.user_wns_wrjj990 [fox^=top] [fox$=_con]{ transform:translateY(-100%);}
.user_wns_wrjj990 [fox^=bottom] [fox$=_con]{ transform:translateY(100%);}
.user_wns_wrjj990 [fox^=left] [fox$=_con]{ transform:translateX(-100%);}
.user_wns_wrjj990 [fox^=right] [fox$=_con]{ transform:translateX(100%);}
.user_wns_wrjj990 [fox$=_c]:hover [fox$=_con]{ transform:translateY(0);transition:all .3s linear; transform:translateX(0);}
</style>
<div style="width:100%; height:1080px;background-color: #fcd7e2; ">
<div style="width:990px; height:auto; margin:0 auto;">
<div class="user_wns_wrjj990">
<div fox="con">
        <div fox="top_c"><a fox="con_con"></a></div>
        <div fox="right_c"><a fox="con_con"></a></div>
        <div fox="bottom_c"><a fox="con_con"></a></div>
        <div fox="left_c"><a fox="con_con"></a></div>
</div>
<div fox="con">
        <div fox="top_c"><a fox="con_con"></a></div>
        <div fox="right_c"><a fox="con_con"></a></div>
        <div fox="bottom_c"><a fox="con_con"></a></div>
        <div fox="left_c"><a fox="con_con"></a></div>
</div>
<div fox="con">
        <div fox="top_c"><a fox="con_con"></a></div>
        <div fox="right_c"><a fox="con_con"></a></div>
        <div fox="bottom_c"><a fox="con_con"></a></div>
        <div fox="left_c"><a fox="con_con"></a></div>
</div>
<div fox="con">
        <div fox="top_c"><a fox="con_con"></a></div>
        <div fox="right_c"><a fox="con_con"></a></div>
        <div fox="bottom_c"><a fox="con_con"></a></div>
        <div fox="left_c"><a fox="con_con"></a></div>
</div>
<div fox="con">
        <div fox="top_c"><a fox="con_con"></a></div>
        <div fox="right_c"><a fox="con_con"></a></div>
        <div fox="bottom_c"><a fox="con_con"></a></div>
        <div fox="left_c"><a fox="con_con"></a></div>
</div>
<div fox="con">
        <div fox="top_c"><a fox="con_con"></a></div>
        <div fox="right_c"><a fox="con_con"></a></div>
        <div fox="bottom_c"><a fox="con_con"></a></div>
        <div fox="left_c"><a fox="con_con"></a></div>
</div>
<div fox="con">
        <div fox="top_c"><a fox="con_con"></a></div>
        <div fox="right_c"><a fox="con_con"></a></div>
        <div fox="bottom_c"><a fox="con_con"></a></div>
        <div fox="left_c"><a fox="con_con"></a></div>
</div>
<div fox="con">
        <div fox="top_c"><a fox="con_con"></a></div>
        <div fox="right_c"><a fox="con_con"></a></div>
        <div fox="bottom_c"><a fox="con_con"></a></div>
        <div fox="left_c"><a fox="con_con"></a></div>
</div>
</div>
</div>
</div>

代码演示
杨思积的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明CSS感知鼠标方向
喜欢 (1)
[嘿嘿,你懂的]
分享 (0)
Tomy
关于作者:
一个前端爱好者!
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址