這個(gè)案例介紹如何使用css3實(shí)現(xiàn)音樂(lè)專輯展示動(dòng)效白群，效果如下：
效果圖
第一步：
分析布局搭建結(jié)構(gòu)，盒子內(nèi)部有一個(gè)專輯封面圖和漸變底色的彈出層，為了制作專輯列表效果薛闪，盒子使用ul>li布局迁霎，里面彈出層使用為元素:before吱抚，和偽元素同級(jí)的有專輯標(biāo)題文字h3和日期文字段落p，分享按鈕使用iconfont考廉，詳細(xì)結(jié)構(gòu)如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>音樂(lè)專輯展示動(dòng)效--css3旋轉(zhuǎn)</title>
<!--引入圖標(biāo)字體-->
<link rel="stylesheet" />
</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>
第二步：
先把靜態(tài)布局書(shū)寫(xiě)出來(lái)秘豹，遮罩層和內(nèi)容描述icon都使用定位，詳細(xì)css樣式如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>音樂(lè)專輯展示動(dòng)效--css3旋轉(zhuǎn)</title>
<!--引入圖標(biāo)字體-->
<link rel="stylesheet" />
<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;
}
/*內(nèi)容描述*/
.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圖標(biāo)*/
.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>
樣式書(shū)寫(xiě)后昌粤，效果如下圖：
靜態(tài)效果圖
第三步：
書(shū)寫(xiě)css3動(dòng)效既绕，通過(guò)觀察分析最終效果圖可知，當(dāng)鼠標(biāo)移上類(lèi)名為total盒子的時(shí)候婚苹，圖片進(jìn)行了逆時(shí)針旋轉(zhuǎn)放大岸更，遮罩層默認(rèn)不透明度為0，并進(jìn)行了順時(shí)針旋轉(zhuǎn)縮小膊升，文字縮小并伴隨著不透明度變化怎炊，icon放大出現(xiàn)，鼠標(biāo)移上對(duì)應(yīng)的iconfont，修改背景顏色和添加投影评肆。
添加css3動(dòng)效果后代碼如下债查，包含詳細(xì)注釋：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>音樂(lè)專輯展示動(dòng)效--css3旋轉(zhuǎn)</title>
<!--引入圖標(biāo)字體-->
<link rel="stylesheet" />
<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;
/*隱藏放大的內(nèi)容*/
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;
/*圖片旋轉(zhuǎn)放大會(huì)擋住遮罩層，設(shè)置層級(jí)*/
z-index: 1;
/*默認(rèn)逆時(shí)針旋轉(zhuǎn)瓜挽，并放大隱藏*/
transform: rotate(-45deg) scale(1.5);
opacity: 0;
/*添加過(guò)渡動(dòng)畫(huà)*/
transition:0.5s;
}
/*內(nèi)容描述*/
.total .desc{
width: 100%;
height:80px;
position: absolute;
left: 0;
top:0;
right: 0;
bottom: 0;
margin: auto;
left: 0;
z-index: 1;
/*默認(rèn)放大盹廷，不透明度為0*/
transform: scale(3);
opacity:0;
/*添加過(guò)渡動(dòng)畫(huà)*/
transition:0.5s;
}
.total h3{height:50px; line-height: 50px; font-size: 28px;}
.total p{height:30px; line-height: 30px; font-size: 22px;}
/*icon圖標(biāo)*/
.total .icon{
position: absolute;
right: 25px;
bottom:25px;
z-index: 1;
/*默認(rèn)縮小*/
transform: scale(0);
/*添加過(guò)渡動(dòng)畫(huà)*/
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;
/*添加過(guò)渡動(dòng)畫(huà)*/
transition:0.5s;
}
/*鼠標(biāo)移上盒子*/
/*圖片逆時(shí)針旋轉(zhuǎn)放大*/
.total:hover img{
transform: rotate(-45deg) scale(1.5);
}
/*遮罩層順時(shí)針旋轉(zhuǎn)縮小*/
.total:hover:before{
transform: rotate(0deg) scale(1);
opacity: 1;
}
/*文字縮小伴隨不透明度*/
.total:hover .desc{
transform: scale(1);
opacity: 1;
}
/*圖標(biāo)放大出現(xiàn)*/
.total:hover .icon{
transform: scale(1);
}
/*鼠標(biāo)移上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>
第四步：
復(fù)制結(jié)構(gòu)修改內(nèi)容，調(diào)整盒子間距久橙，得到最終效果如下圖：
最終效果
