这个案例介绍如何使用css3实现音乐专辑展示动效，效果如下：
效果图
第一步：
分析布局搭建结构，盒子内部有一个专辑封面图和渐变底色的弹出层，为了制作专辑列表效果，盒子使用ul>li布局，里面弹出层使用为元素:before，和伪元素同级的有专辑标题文字h3和日期文字段落p，分享按钮使用iconfont，详细结构如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>音乐专辑展示动效--css3旋转</title>
<!--引入图标字体-->
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1007598_x7y6h3aps0r.css" />
</head>
<body>
<div class="all">
<ul>
<li class="total">
<img src="01.jpg" alt="" />
<div class="desc">
<h3>花约--Twins</h3>
<p>2017-06-22</p>
</div>
<div class="icon">
<span class="iconfont icon-bofang"></span>
<span class="iconfont icon-fenxiang"></span>
</div>
</li>
</ul>
</div>
</body>
</html>
第二步：
先把静态布局书写出来，遮罩层和内容描述icon都使用定位，详细css样式如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>音乐专辑展示动效--css3旋转</title>
<!--引入图标字体-->
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1007598_x7y6h3aps0r.css" />
<style>
*{padding: 0; margin: 0; list-style: none;}
.all{
width: 1000px;
height: 300px;
margin: 100px
auto;
}
/*专辑盒子*/
.total{
width: 300px;
height: 300px;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
position: relative;
color:#fff;
text-align: center;
}
.total img{
width: 100%;
}
/*伪元素遮罩*/
.total:before{
content:"";
width: 90%;
height: 90%;
background: linear-gradient(120deg,rgba(255,78,80,0.6),rgba(249,212,35,0.6));
box-shadow: 0 0 5px rgba(0,0,0,0.5);
position: absolute;
left: 0;
top:0;
right: 0;
bottom: 0;
margin: auto;
}
/*内容描述*/
.total .desc{
width: 100%;
height:80px;
position: absolute;
left: 0;
top:0;
right: 0;
bottom: 0;
margin: auto;
left: 0;
}
.total h3{height:50px; line-height: 50px; font-size: 28px;}
.total p{height:30px; line-height: 30px; font-size: 22px;}
/*icon图标*/
.total .icon{
position: absolute;
right: 25px;
bottom:25px;
}
.total .iconfont{
width:40px;
line-height: 40px;
background:rgba(255,255,255,0.3);
display:inline-block;
text-align: center;
font-size: 26px;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body>
<div class="all">
<ul>
<li class="total">
<img src="01.jpg" alt="" />
<div class="desc">
<h3>花约--Twins</h3>
<p>2017-06-22</p>
</div>
<div class="icon">
<span class="iconfont icon-bofang"></span>
<span class="iconfont icon-fenxiang"></span>
</div>
</li>
</ul>
</div>
</body>
</html>
样式书写后，效果如下图：
静态效果图
第三步：
书写css3动效，通过观察分析最终效果图可知，当鼠标移上类名为total盒子的时候，图片进行了逆时针旋转放大，遮罩层默认不透明度为0，并进行了顺时针旋转缩小，文字缩小并伴随着不透明度变化，icon放大出现，鼠标移上对应的iconfont，修改背景颜色和添加投影。
添加css3动效果后代码如下，包含详细注释：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>音乐专辑展示动效--css3旋转</title>
<!--引入图标字体-->
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1007598_x7y6h3aps0r.css" />
<style>
*{padding: 0; margin: 0; list-style: none;}
.all{
width: 1000px;
height: 300px;
margin: 100px
auto;
}
/*专辑盒子*/
.total{
width: 300px;
height: 300px;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
position: relative;
color:#fff;
text-align: center;
/*隐藏放大的内容*/
overflow: hidden;
}
.total img{
width: 100%;
transition:0.5s;
}
/*伪元素遮罩*/
.total:before{
content:"";
width: 90%;
height: 90%;
background: linear-gradient(120deg,rgba(255,78,80,0.6),rgba(249,212,35,0.6));
box-shadow: 0 0 5px rgba(0,0,0,0.5);
position: absolute;
left: 0;
top:0;
right: 0;
bottom: 0;
margin: auto;
/*图片旋转放大会挡住遮罩层，设置层级*/
z-index: 1;
/*默认逆时针旋转，并放大隐藏*/
transform: rotate(-45deg) scale(1.5);
opacity: 0;
/*添加过渡动画*/
transition:0.5s;
}
/*内容描述*/
.total .desc{
width: 100%;
height:80px;
position: absolute;
left: 0;
top:0;
right: 0;
bottom: 0;
margin: auto;
left: 0;
z-index: 1;
/*默认放大，不透明度为0*/
transform: scale(3);
opacity:0;
/*添加过渡动画*/
transition:0.5s;
}
.total h3{height:50px; line-height: 50px; font-size: 28px;}
.total p{height:30px; line-height: 30px; font-size: 22px;}
/*icon图标*/
.total .icon{
position: absolute;
right: 25px;
bottom:25px;
z-index: 1;
/*默认缩小*/
transform: scale(0);
/*添加过渡动画*/
transition:0.5s;
}
.total .iconfont{
width:40px;
line-height: 40px;
background:rgba(255,255,255,0.3);
display:inline-block;
text-align: center;
font-size: 26px;
font-weight: bold;
cursor: pointer;
/*添加过渡动画*/
transition:0.5s;
}
/*鼠标移上盒子*/
/*图片逆时针旋转放大*/
.total:hover img{
transform: rotate(-45deg) scale(1.5);
}
/*遮罩层顺时针旋转缩小*/
.total:hover:before{
transform: rotate(0deg) scale(1);
opacity: 1;
}
/*文字缩小伴随不透明度*/
.total:hover .desc{
transform: scale(1);
opacity: 1;
}
/*图标放大出现*/
.total:hover .icon{
transform: scale(1);
}
/*鼠标移上iconfont改变背景颜色增加投影*/
.total .iconfont:hover{
background:#62CDA4;
box-shadow:0 0 5px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div class="all">
<ul>
<li class="total">
<img src="01.jpg" alt="" />
<div class="desc">
<h3>花约--Twins</h3>
<p>2017-06-22</p>
</div>
<div class="icon">
<span class="iconfont icon-bofang"></span>
<span class="iconfont icon-fenxiang"></span>
</div>
</li>
</ul>
</div>
</body>
</html>
第四步：
复制结构修改内容，调整盒子间距，得到最终效果如下图：
最终效果
网友评论