分享一个CSS3制作的分类入口动画效果，主要使用了CSS3位移translate，滤镜filter和透明度opacity，整体动画效果如下：
效果图.gif
第一步：
书写html结构布局，结构主要是a分类入口盒子，img入口图片和.white白色遮罩，.txtbox文字盒子。对应的内容html里面有注释。
下面是详细的html结构代码：
<div class="enter">
<!-- 入口超链接 -->
<a href="#">
<!-- 图片 -->
<img src="a.png" alt="">
<!-- 白色遮罩 -->
<div class="white"></div>
<!-- 文字内容 -->
<div class="txtbox">
<h3>居家收纳</h3>
<p>Home Daily</p>
</div>
</a>
<!-- 入口超链接 -->
<a href="#">
<!-- 图片 -->
<img src="b.png" alt="">
<!-- 白色遮罩 -->
<div class="white"></div>
<!-- 文字内容 -->
<div class="txtbox">
<h3>居家收纳</h3>
<p>Home Daily</p>
</div>
</a>
<!-- 入口超链接 -->
<a href="#">
<!-- 图片 -->
<img src="c.png" alt="">
<!-- 白色遮罩 -->
<div class="white"></div>
<!-- 文字内容 -->
<div class="txtbox">
<h3>居家收纳</h3>
<p>Home Daily</p>
</div>
</a>
<!-- 入口超链接 -->
<a href="#">
<!-- 图片 -->
<img src="d.png" alt="">
<!-- 白色遮罩 -->
<div class="white"></div>
<!-- 文字内容 -->
<div class="txtbox">
<h3>居家收纳</h3>
<p>Home Daily</p>
</div>
</a>
</div>
第二步：
书写css静态样式，注意使用的图片是正方形，a分类入口盒子要旋转transform:rotate(-45deg)变成棱形，a分类入口盒子里面的文字盒子.txtbox要旋转回正方向transform:rotate(45deg)，对应的代码在css里面有注释提示。
旋转前
旋转后
第三步：
书写好静态布局，开始制作动画，下面是动画制作思路，相关代码在css里面有注释。
鼠标移动上a盒子，a盒子保持旋转旋转translate(-45deg)，位移transform:translate(5px)。
默认设置.white白色遮罩的透明度opacity设置成0。
鼠标移动上a盒子，设置白色遮罩.white透明的opacity变成1显示。
默认设置标题h3和段落p设置位正负值transform:translate(100%)移出盒子外部。
鼠标移动上a盒子，设置标题h3和段落p设置transform:translate(0)回到原来的位置。
鼠标移动上a盒子，设置图片滤镜， filter: grayscale(100%) blur(2px); 灰度100%并且模糊blur。
注意：以上:hover鼠标移上效果都需要回到标签初始状态添加transition过渡时间。
下面是详细的css布局样式+动画的代码：
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
}
.enter {
width: 538px;
height: 324px;
margin: 100px auto;
position: relative;
}
.enter a {
width: 143px;
height: 145px;
/* 正方形的图片盒子旋转-45deg */
transform: rotate(-45deg);
text-align: center;
color: #666;
position: absolute;
transition: 0.5s;
}
/* 白色遮罩 */
.white {
width: 80%;
height: 80%;
background: rgba(255, 255, 255, 0.7);
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
/* 默认透明度隐藏白色遮罩 */
opacity: 0;
transition: 0.5s;
}
.txtbox {
position: absolute;
width: 100%;
height: 50px;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
/* 文字要旋转回来正方向 */
transform: rotate(45deg);
overflow: hidden;
}
.txtbox p {
color: #f60;
}
.enter a:nth-child(1) {
left: 32px;
top: 30px;
}
.enter a:nth-child(2) {
left: 248px;
top: 30px;
}
.enter a:nth-child(3) {
left: 139px;
top: 141px;
}
.enter a:nth-child(4) {
left: 360px;
top: 140px;
}
/* 文字标题向左边移动隐藏 */
.txtbox h3 {
transform: translateX(-100%);
transition: 0.5s 0.1s;
}
/* 段落向左边移动隐藏 */
.txtbox p {
transform: translateX(100%);
transition: 0.5s 0.2s;
}
.enter img {
transition: 0.5s;
}
/* 鼠标移上盒子 */
.enter a:hover {
/* 盒子保持旋转旋转-45deg，位移45deg */
transform: rotate(-45deg) translate(-5px);
}
/* 鼠标移上盒子，设置img */
.enter a:hover img {
/* 滤镜：灰度100% 模糊2px */
filter: grayscale(100%) blur(2px);
}
/* 鼠标移上盒子，标题位移回原来的位置 */
.enter a:hover h3 {
transform: translateX(0);
}
/* 鼠标移上盒子，段落位移回原来的位置 */
.enter a:hover p {
transform: translateX(0);
}
/* 鼠标移上盒子，白色遮罩透明度变成 1 */
.enter a:hover .white {
opacity: 1;
}
</style>
