这个案例介绍如何使用css3实现音乐专辑展示动效，效果如下：
效果展示图
第一步：
分析布局搭建结构，盒子内部有一个专辑封面图，依次出现的矩形渐变色块，音乐专辑标题名称h3和日期文字段落p，播放和分享按钮使用iconfont制作，总盒子排布使用ul>li，详细结构如下：
<!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="" />
<!--矩形色块-->
<span class="gray one"></span>
<span class="gray two"></span>
<span class="gray three"></span>
<span class="gray four"></span>
<!--文案描述-->
<div class="desc">
<p>2017-06-22</p>
<h3>花约-Twins</h3>
</div>
<!--icon-->
<div class="icon">
<span class="iconfont icon-bofang"></span>
<span class="iconfont icon-fenxiang"></span>
</div>
</li>
</ul>
</div>
</body>
</html>
第二步：
书写静态布局，包括实体化各部分盒子和定位排版布局，矩形色块宽度占盒子的25%，渐变背景颜色，文案描述定位在盒子下方，按钮盒子实体化定位在盒子右方，详细代码如下：
<!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;
position: relative;
color:#fff;
}
.total img{
width:100%;
}
/*矩形色块*/
.gray{
width: 25%;
height: 100%;
position: absolute;
background: linear-gradient(180deg,rgba(0,0,0,0.2),rgba(0,0,0,0.7));
top:0;
}
.one{
left:0;
}
.two{
left:25%;
}
.three{
left:50%;
}
.four{
left:75%;
}
/*文案描述*/
.desc{
width: 100%;
height: 80px;
position: absolute;
left:0;
bottom:20px;
text-align: center;
}
.desc h3{
height:50px;
line-height: 50px;
font-size:28px;
}
.desc p{
font-size:20px;
color:#62CDA4;
font-style: italic;
font-weight: bold;
}
/*icon*/
.icon{
width: 40px;
position: absolute;
top:10px;
right:10px;
}
.icon .iconfont{
display: block;
width: 40px;
height: 40px;
font-size: 22px;
background:#62CDA4;
text-align: center;
line-height: 40px;
margin-bottom: 10px;
font-weight: bold;
border-radius:50%;
cursor: pointer;
}
</style>
</head>
<body>
<div class="all">
<ul>
<!--专辑盒子-->
<li class="total">
<!--封面图-->
<img src="01.jpg" alt="" />
<!--矩形色块-->
<span class="gray one"></span>
<span class="gray two"></span>
<span class="gray three"></span>
<span class="gray four"></span>
<!--文案描述-->
<div class="desc">
<p>2017-06-22</p>
<h3>花约-Twins</h3>
</div>
<!--icon-->
<div class="icon">
<span class="iconfont icon-bofang"></span>
<span class="iconfont icon-fenxiang"></span>
</div>
</li>
</ul>
</div>
</body>
</html>
样式书写后，效果如下图所示：
静态效果
第三步：
使用css3实现动画效果，通过分析效果图得到，鼠标移上专辑盒子时，矩形色块依次从上到下位移进入，专辑封面图由彩色变色灰色，文字描述盒子从下往上移动，iconfont图标旋转放大，鼠标移上对应的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;
position: relative;
color:#fff;
/*隐藏超出盒子内容*/
overflow: hidden;
}
.total img{
width:100%;
/*过渡动画*/
transition:0.5s;
}
/*矩形色块*/
.gray{
width: 25%;
height: 100%;
position: absolute;
background: linear-gradient(180deg,rgba(0,0,0,0.2),rgba(0,0,0,0.7));
top:0;
/*先设置矩形色块向上位移出盒子外面*/
transform: translateY(-100%);
/*过渡动画时间*/
transition-duration: 0.3s;
}
.one{
left:0;
/*过渡动画延迟时间*/
transition-delay: 0.3s;
}
.two{
left:25%;
/*过渡动画延迟时间*/
transition-delay: 0.2s;
}
.three{
left:50%;
/*过渡动画延迟时间*/
transition-delay: 0.1s;
}
.four{
left:75%;
}
/*文案描述*/
.desc{
width: 100%;
height: 80px;
position: absolute;
left:0;
bottom:20px;
text-align: center;
/*先设置文字描述往下移动*/
transform: translateY(120%);
/*过渡动画*/
transition:0.5s;
}
.desc h3{
height:50px;
line-height: 50px;
font-size:28px;
}
.desc p{
font-size:20px;
color:#62CDA4;
font-style: italic;
font-weight: bold;
}
/*icon*/
.icon{
width: 40px;
position: absolute;
top:10px;
right:10px;
}
.icon .iconfont{
display: block;
width: 40px;
height: 40px;
font-size: 22px;
background:#62CDA4;
text-align: center;
line-height: 40px;
margin-bottom: 10px;
font-weight: bold;
border-radius:50%;
cursor: pointer;
/*先设置iconfont旋转并缩小*/
transform: rotate(360deg) scale(0);
/*过渡动画*/
transition:0.5s;
}
/*鼠标移上效果*/
/*矩形色块向下位移*/
.total:hover .gray{
transform: translateY(0);
}
/*图片变灰色*/
.total:hover img{
filter:grayscale(1);
}
/*文字描述向上位移*/
.total:hover .desc{
transform: translateY(0);
}
/*iconfont旋转放大*/
.total:hover .iconfont{
transform: rotate(0deg) scale(1);
}
/*移上iconfont,修改背景文字颜色和圆角弧度*/
.total .iconfont:hover{
background: #fff;
color: #62CDA4;
border-radius:0 50% 0 50%;
}
</style>
</head>
<body>
<div class="all">
<ul>
<!--专辑盒子-->
<li class="total">
<!--封面图-->
<img src="01.jpg" alt="" />
<!--矩形色块-->
<span class="gray one"></span>
<span class="gray two"></span>
<span class="gray three"></span>
<span class="gray four"></span>
<!--文案描述-->
<div class="desc">
<p>2017-06-22</p>
<h3>花约-Twins</h3>
</div>
<!--icon-->
<div class="icon">
<span class="iconfont icon-bofang"></span>
<span class="iconfont icon-fenxiang"></span>
</div>
</li>
</ul>
</div>
</body>
</html>
第四步：
复制专辑封面盒子，修改内容调整间距，最终效果如下图所示：
最终效果
网友评论