请问老师为什么箭头没有跳动？
来源：3-8 过渡和变形在实战中的应用（1）
慕仔3411021
2021-04-10 16:42:41
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>慕云游</title>
<!-- 关键词 -->
<meta name="Keywords" content="">
<!-- 描述 -->
<meta name="Description" content="">
<!-- css样式 -->
<style>
/* 机酒自由行 */
.common-style{
height: 698px;
min-width: 1152px;
padding-top: 40px;
}
.common-style .center-wrap .top h2{
float: left;
}
.content-part .center-wrap .top{
margin-bottom: 32px;
}
.content-part .center-wrap .top>ul{
float: right;
margin-top: 12px;
}
.content-part .center-wrap .top>ul>li{
float: left;
height: 22px;
line-height: 22px;
margin-right: 16px;
font-size: 14px;
}
.content-part .center-wrap .top>ul>li:last-child{
margin-right: 0;
}
content-part .center-wrap .top>ul>li a{
color: rgba(0,0,0,0.85);
}
.content-part .center-wrap .top>ul>li.current{
border-bottom: 4px solid #20BD9A;
}
.content-part .center-wrap .top>ul>li.current a{
color: #20BD9A;
}
.common-style .center-wrap>ul{
height: 612px;
}
.common-style .center-wrap>ul>li{
float: left;
margin-right: 32px;
margin-bottom: 32px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);
overflow: hidden;
}
.common-style .center-wrap>ul>li:hover{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20);
}
.common-style .center-wrap>ul>li:nth-child(3),
.common-style .center-wrap>ul>li:nth-child(7){
margin-right: 0;
}
.common-style .center-wrap>ul>li.big-grid{
width: 560px;
height: 270px;
position: relative;
}
.common-style .center-wrap>ul>li img{
transition: transform .4s ease 0s;
}
.common-style .center-wrap>ul>li img:hover{
transform: scale(1.1);
}
.common-style .center-wrap>ul>li.big-grid .js{
position: absolute;
bottom: 0;
left: 0;
width: 560px;
height: 103px;
background-color: rgba(0,0,0,0.50);
color: white;
font-size: 14px;
padding: 30px 26px;
box-sizing: border-box;
}
.common-style .center-wrap>ul>li.pro-grid{
width: 264px;
height: 270px;
}
.common-style .center-wrap>ul>li.pro-grid .pic{
width: 264px;
height: 184px;
overflow: hidden;
}
.content-part .center-wrap .more-grid{
width: 264px;
height: 270px;
padding-top: 46px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);
}
.common-style .center-wrap>ul>li .word{
padding: 20px 14px 22px;
font-size: 14px;
color: #1C1F21;
line-height: 22px;
}
.common-style .center-wrap>ul>li em{
position: absolute;
left: 0;
bottom: 103px;
width: 74px;
height: 40px;
line-height: 40px;
background-color: rgba(0,0,0,0.50);
color: white;
font-size: 14px;
text-align: center;
}
.common-style .center-wrap>ul>li.pro-grid .pic{
position: relative;
width: 264px;
height: 184px;
box-sizing: border-box;
}
.common-style .center-wrap>ul>li.pro-grid em{
bottom: 0;
}
.content-part .center-wrap .more-grid{
background-image: linear-gradient(180deg, #34E3BC 0%, #15AF7A 98%);
}
.content-part .center-wrap .more-grid .more-word{
width: 236px;
height: 44px;
margin: 0 auto;
margin-bottom: 28px;
text-align: center;
color: white;
font-size: 14px;
line-height: 22px;
}
.content-part .center-wrap .more-grid .iconfont{
font-size: 48px;
color: white;
position: relative;
left: 108px;
}
/* 鼠标移动到该盒子箭头跳动 */
.content-part .center-wrap .more-grid:hover .iconfont{
animation: td .4s ease 0s infinite alternate;
}
@keyframes td{
from{
transform: translateY(10px);
}
to{
transform: translateY(-10px);
}
}
.content-part .center-wrap .more-grid ul{
padding-left: 57px;
margin-top: 36px;
height: 16px;
}
.content-part .center-wrap .more-grid ul li{
float: left;
color: white;
font-size: 14px;
height: 16px;
line-height: 16px;
border-right: 1px solid #fff;
padding: 0 5px;
}
.content-part .center-wrap .more-grid ul li:last-child{
border-right: none;
}
</style>
</head>
<body>
<!-- 机酒自由行 -->
<section class="jjzyx content-part common-style">
<div class="center-wrap">
<div class="top clearfix">
<h2>机酒自由行</h2>
<span>挑选全球机票、酒店、邮轮等旅行产品</span>
<ul>
<li class="current"><a href="#">近期好货</a></li>
<li><a href="#">新品汇聚</a></li>
<li><a href="#">订制游</a></li>
<li><a href="#">近期好货</a></li>
<li><a href="#">近期好货</a></li>
<li><a href="#">近期好货</a></li>
<li><a href="#">近期好货</a></li>
</ul>
</div>
<ul>
<li class="big-grid">
<a href="#">
<img src="images/jjzyx1.png" alt="">
</a>
<div class="js">
<p>[樱花季]天津直飞东京/大阪/名古屋/冲绳/札幌2-30天往返</p>
<p>含税机票【甩尾/多团期】</p>
</div>
<em>机票</em>
</li>
<li class="pro-grid"><a href="#">
<div class="pic">
<img src="images/jjzyx2.png" alt="">
<em>跟团游</em>
</div>
<div class="word">
北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票（赠送旅游意外险…
</div>
</a></li>
<li class="pro-grid"><a href="#">
<div class="pic">
<img src="images/jjzyx3.png" alt="">
<em>机票</em>
</div>
<div class="word">
北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票（赠送旅游意外险…
</div>
</a></li>
<li class="pro-grid"><a href="#">
<div class="pic">
<img src="images/jjzyx4.png" alt="">
<em>机票</em>
</div>
<div class="word">
北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票（赠送旅游意外险…
</div>
</a></li>
<li class="pro-grid"><a href="#">
<div class="pic">
<img src="images/jjzyx5.png" alt="">
<em>机票</em>
</div>
<div class="word">
北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票（赠送旅游意外险…
</div>
</a></li>
<li class="pro-grid"><a href="#">
<div class="pic">
<img src="images/jjzyx6.png" alt="">
<em>机票</em>
</div>
<div class="word">
北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票（赠送旅游意外险…
</div>
</a></li>
<li class="more-grid"><a href="#">
<div class="more-word">
<p>查看更多</p>
<p>机酒自由行产品</p>
</div>
<i class="iconfont"></i>
<ul>
<li>机票</li>
<li>酒店</li>
<li>机+酒</li>
<li>游轮</li>
</ul>
</a></li>
</ul>
</div>
</section>
</body>
1回答
-
同学你好，解答如下：
transform这个属性比较特殊，它对具有display:inline;性质的元素无效。由于i标签是一个inline元素：
所以会没有动画效果。
可以通过将其转成块级元素来解决问题：
祝学习愉快！
1
相似问题
回答 1
回答 2