div 主要是一个刷新的反转动画 文本和图片url没有写后台 自己就用几张图片达成演示前端效果的目的
这里写代码片
html 没什么太复杂的 文本信息和图片是并列级别的 只旋转img图片就好 一开始那个换一批 用js简单写了一下 但是我想用css写 用transform 鼠标移开又转去就很不舒服 然后用animation就没有这个坏处(此处记录一下animation 和hover等事件 的好处) 很开心 旋转主要就是一个不复杂的的js函数
js函数用一个延时器 因为过渡执行慢一些 让变更图片的效果 不再前90deg旋转中暴露出来
var count=1;
$('#refresh-li').click(function(){
$('.brandimg-div').css("transform","rotateY(-90deg)");
setTimeout(function(){
for(var i=0;i<16;i++)
{
var img=$('.brandimg-div img').eq(i);
img.attr("src","brand/brand"+count+".webp");
// img.attr("src","brand/brand1.webp");
}
$('.brandimg-div').css("transform","rotateY(-180deg)");
}
,300)
count++;
})
css
#brand-list
{ display: inline-block;
position: relative;
width:488px;
height: 436px;
background-color: #f5f5f5;
float:right;
}
#brand-list ul
{ list-style-type: none;
width:488px;
}
#brand-list li
{
position: relative;
display: list-item;
float: left;
width:120px;
height: 108px;
margin-right: 2px;
margin-bottom: 1px;
}
#brand-mask
{ position: absolute;
width:121px;
height: 108px;
}
.brandimg-div
{ line-height: 108px;
height: 108px;
display: table-cell;
margin:0 auto;
text-align: center;
vertical-align: middle;
background-color: #fff;
transition:all .5s;
}
.brandimg-div img
{ display: inline;
width:82%;
height: 50px;
transform:rotateY(180deg);
}
#brand-list li:hover .brand-mask
{
opacity:1;
}
.brand-mask
{
position: absolute;
width:100%;
height: 100%;
right:0;
top:0;
opacity: 1;
background-color: rgba(0,0,0,.8);
transition: all .3s ease-out;
opacity: 0;
}
.brand-mask span
{
display: block;
font-size: 12px;
text-align: center;
line-height: 80px;
color:#fff;
}
.brand-mask a
{ position: absolute;
text-align: center;
left:50%;
transform:translateX(-50%);
bottom:30px;
display: inline-block;
width:63px;
height: 18px;
border-radius: 10px;
background-color: red;
font-size: 12px;
color:#fff;
}
#brand-refresh
{ position: absolute;
transform-origin:50% 50%;
left:45px;
top:30px;
font-size: 30px;
color:#999;
transition:all .5s;
}
#refresh-li
{
background-color: #fff;
color:#999;
}
@keyframes refreshrotate
{
from { transform:rotateZ(0deg);}
to {transform:rotateZ(180deg);}
}
#refresh-li:hover #brand-refresh
{
animation:refreshrotate .5s 1;
/*-webkit-transform:rotateZ(180deg); */
/*用旋转的时候会偏移*/
/*transform:rotateZ(180deg); */
/*animation:rotate .5s ease 1;*/
}
#refresh-info
{ display: inline-block;
width: 100%;
position: absolute;
bottom:20px;
font-size: 14px;
text-align: center;
}
html
<div id="brand-list">
<ul>
<li>
<div class="brandimg-div">
<img src="brand/brand18.webp">
</div>
<div class="brand-mask">
<span> 关注人数2.7
</span>
<a href="">点击进入</a>
</div>
</li>
<li>
<div class="brandimg-div">
<img src="brand/brand18.webp">
</div>
<div class="brand-mask">
<span> 关注人数2.7
</span>
<a href="">点击进入</a>
</div>
</li>
<li>
<div class="brandimg-div">
<img src="brand/brand18.webp">
</div>
<div class="brand-mask">
<span> 关注人数2.7
</span>
<a href="">点击进入</a>
</div>
</li>
<li>
<div class="brandimg-div">
<img src="brand/brand18.webp">
</div>
<div class="brand-mask">
<span> 关注人数2.7
</span>
<a href="">点击进入</a>
</div>
</li>
<li>
<div class="brandimg-div">
<img src="brand/brand18.webp">
</div>
<div class="brand-mask">
<span> 关注人数2.7
</span>
<a href="">点击进入</a>
</div>
</li>
<li>
<div class="brandimg-div">
<img src="brand/brand18.webp">
</div>
<div class="brand-mask">
<span> 关注人数2.7
</span>
<a href="">点击进入</a>
</div>
</li>
<li>
<div class="brandimg-div">
<img src="brand/brand18.webp">
</div>
<div class="brand-mask">
<span> 关注人数2.7
</span>
<a href="">点击进入</a>
</div>
</li>
<li>
<div class="brandimg-div">
<img src="brand/brand18.webp">
</div>
<div class="brand-mask">
<span> 关注人数2.7
</span>
<a href="">点击进入</a>
</div>
</li>
<li>
<div class="brandimg-div">
<img src="brand/brand18.webp">
</div>
<div class="brand-mask">
<span> 关注人数2.7
</span>
<a href="">点击进入</a>
</div>
</li>
<li>
<div class="brandimg-div">
<img src="brand/brand18.webp">
</div>
<div class="brand-mask">
<span> 关注人数2.7
</span>
<a href="">点击进入</a>
</div>
</li>
<li>
<div class="brandimg-div">
<img src="brand/brand18.webp">
</div>
<div class="brand-mask">
<span> 关注人数2.7
</span>
<a href="">点击进入</a>
</div>
</li>
<li>
<div class="brandimg-div">
<img src="brand/brand18.webp">
</div>
<div class="brand-mask">
<span> 关注人数2.7
</span>
<a href="">点击进入</a>
</div>
</li>
<li>
<div class="brandimg-div">
<img src="brand/brand18.webp">
</div>
<div class="brand-mask">
<span> 关注人数2.7
</span>
<a href="">点击进入</a>
</div>
</li>
<li>
<div class="brandimg-div">
<img src="brand/brand18.webp">
</div>
<div class="brand-mask">
<span> 关注人数2.7
</span>
<a href="">点击进入</a>
</div>
</li>
<li>
<div class="brandimg-div">
<img src="brand/brand18.webp">
</div>
<div class="brand-mask">
<span> 关注人数2.7
</span>
<a href="">点击进入</a>
</div>
</li>
<li id="refresh-li">
<span id="brand-refresh" class="ui-icon ui-icon-refresh"></span>
<p id="refresh-info">换一批</p>
</li>
</ul>
</div>