老师我设置了小icon的运动怎么没有显示

<!DOCTYPE html>

<head>

</head>

<body>

<ul>

<li class="left"><a href="#1">手机逛幕多多</a></li>

</ul>

</div>

<a href="">我的幕多多</a>

</div>

<li>

<a href="" class="dropdown-items">已买到的宝贝</a>

</li>

</ul>

</div>

<li><a href="###" target="_blank" class="dropdown-items">收藏的宝贝</a></li>

<li><a href="###" target="_blank" class="dropdown-items">收藏的店铺</a></li>

</ul>

</div>

</div>

<li><a href="###" target="_blank" class="dropdown-items">已卖出的宝贝</a></li>

<li><a href="###" target="_blank" class="dropdown-items">出售中的宝贝</a></li>

<li><a href="###" target="_blank" class="dropdown-items">卖家服务市场</a></li>

<li><a href="###" target="_blank" class="dropdown-items">卖家培训中心</a></li>

</ul>

</div>

<li><a href="###" target="_blank" class="dropdown-items">消费者客服</a></li>

</ul>

</div>

</div>

</form>

<!-- <li class="search-layer-item text-ellipsis">123</li>

</ul>

</div>

</div>

</div>

</div>

</div>

</div>

<a href="" class="services-item">[公告] 幕多多启用新客服电话</a>

<a href="" class="services-item">[公告] 中差评论功能升级</a>

<a href="" class="services-item">[公告] 陌生人拼团上线</a>

<a href="" class="services-item">[新闻] 售假获刑又起诉</a>

</div>

<a>

</a>

</div>

<a>

</a>

</div>

<a>

</a>

</div>

<a>

</a>

</div>

<a>

</a>

</div>

<a>

</a>

</div>

<a>

</a>

</div>

<a>

</a>

</div>

<a>

</a>

</div>

<a>

</a>

</div>

<a>

</a>

</div>

<a>

</a>

</div>

</div>

</body>

</html>

.clearfloat {

zoom: 1;

}

.clearfloat:after {

display: block;

clear: both;

content: "";

visibility: hidden;

height: 0;

}

* {

margin: 0;

padding: 0;

}

body {

overflow-y: scroll;

}

a {

text-decoration: none;

cursor: pointer;

}

a:hover {

text-decoration: none;

}

ul,

li {

list-style: none;

}

.right {

float: right;

}

.left {

float: left;

}

.center {

margin: 0 auto;

width: 1200px;

}

.text-ellipsis {

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

}

/*icon*/

@font-face {

font-family: "iconfont";

src: url('../font/iconfont.eot');

/* IE9*/

src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('../font/iconfont.woff2') format('woff2'), /* */

url('../font/iconfont.woff') format('woff'), /* */

url('../font/iconfont.ttf') format('truetype'), /* */

url('../font/iconfont.svg#iconfont') format('svg');

}

.iconfont {

font-family: "iconfont" !important;

font-size: 14px;

font-style: normal;

-webkit-font-smoothing: antialiased;

-webkit-text-stroke-width: 0.2px;

-moz-osx-font-smoothing: grayscale;

}

.top {

height: 44px;

background: #f3f5f7;

font-size: 10px;

}

.top .center {

border-bottom: 1px solid #cdd0d4;

height: 43px;

line-height: 43px;

}

.top .top-left li a {

display: inline-block;

padding-left: 25px;

color: #4d555d;

}

.top-dropdown .dropdown-item a:hover,

.top .top-left li a:hover {

color: #f01414;

text-decoration: none;

}

.top-dropdown {

height: 100%;

}

.dropdown-toggle {

position: relative;

z-index: 2;

display: block;

height: 100%;

padding: 0 16px 0 12px;

border-left: 1px solid #f3f5f7;

border-right: 1px solid #f3f5f7;

}

.top-dropdown .dropdown-item {

position: relative;

}

.dropdown-icon {

display: inline-block;

width: 8px;

height: 6px;

background: url(../作业素材/code/img/dropdown-arrow.png) no-repeat;

margin-left: 8px;

vertical-align: middle;

cursor: pointer;

}

.top-dropdown .dropdown-item a {

color: #4d555d;

}

.dropdown-left {

left: 0;

right: auto;

}

.dropdown-right {

right: 0;

left: auto;

}

.dropdown-layer {

display: none;

position: absolute;

top: 43px;

background-color: #fff;

z-index: 1;

border: 1px solid #cdd0d4;

}

.dropdown-items {

display: block;

height: 30px;

line-height: 30px;

padding: 0 12px;

color: #4d555d;

white-space: nowrap;

}

.dropdown-items:hover {

background-color: #f3f5f7;

}

.dropdown-active .dropdown-toggle,

.dropdown:hover .dropdown-toggle {

background-color: #fff;

border-color: #cdd0d4;

}

.dropdown-active .dropdown-icon,

.dropdown:hover .dropdown-icon {

background-image: url(../作业素材/code/img/dropdown-arrow-active.png);

}

.dropdown-active .dropdown-layer,

.dropdown:hover .dropdown-layer {

display: block;

}

/* -----------------top部分------------------------ */

/* ------------------logo部分------------------- */

.logo {

background: #f3f5f7;

line-height: 126px;

height: 126px;

width: 100%;

}

.logo-logo a {

cursor: pointer;

display: block;

width: 212px;

height: 58px;

margin: 36px 0 0 15px;

text-indent: -9999px;

overflow: hidden;

background: url(../作业素材/code/img/header-logo.png) no-repeat;

}

.logo-search {

width: 680px;

height: 42px;

border: 1px solid #cfd2d5;

margin-top: 38px;

margin-left: 150px;

position: relative;

}

.search-input {

width: 586px;

height: 42px;

border: none;

background: #fff;

padding: 0 10px;

line-height: 42px;

}

.search-submit {

border: none;

outline: none;

background: #ca003f;

color: #fff;

height: 42px;

width: 74px;

cursor: pointer;

}

.search-layer {

display: none;

position: absolute;

top: 100%;

left: -1px;

width: 100%;

background-color: #fff;

border: 1px solid #cfd2d5;

z-index: 99;

}

.search-layer-item {

height: 24px;

line-height: 24px;

padding: 0 10px;

cursor: pointer;

}

.search-layer-item:hover {

background-color: #f3f5f7;

}

/* ------------------logo部分------------------- */

/* ------------------nav部分------------------- */

.nav {

background: #ca003f;

width: 100%;

height: 50px;

line-height: 50px;

margin-bottom: 8px;

}

.nav .nav-item {

position: relative;

margin-left: 300px;

}

.nav .nav-item a {

display: inline-block;

height: 50px;

line-height: 50px;

margin-right: 62px;

color: #fff;

padding: 0 10px;

}

.nav .nav-item a:hover {

color: red;

background: #000000;

}

/* ----------------------------nav部分--------------------------------------- */

/* -------------------------------------banner部分--------------------------- */

.banner {

height: 504px;

width: 100%;

background: #f3f5f7;

margin-bottom: 10px;

}

.commodity {

background: #c1043f;

position: relative;

width: 208px;

height: 566px;

margin-top: -62px;

margin-right: 8px;

}

/* ----------轮播图------------------ */

.slideshow {

position: relative;

height: 504px;

width: 730px;

overflow: hidden;

}

.slideshow-img {

height: 504px;

width: 5096px;

position: absolute;

}

.slideshow-img img {

float: left;

}

.slideshow .arrow {

position: absolute;

color: #fff;

background: #000000;

height: 90px;

width: 46px;

line-height: 90px;

font-size: 35px;

text-align: center;

display: none;

}

.slideshow #prev {

left: 0;

top: 50%;

margin-top: -45px;

}

.slideshow #next {

right: 0;

top: 50%;

margin-top: -45px;

}

.slideshow-button {

position: absolute;

bottom: 0;

left: 50%;

margin-bottom: 26px;

margin-left: -46px;

display: none;

}

.slideshow-button .slideshow-button-item {

float: left;

display: block;

height: 7px;

width: 7px;

background: grey;

margin-right: 12px;

border: 1px solid #fff;

border-radius: 50%;

cursor: pointer;

}

.slideshow .slideshow-button .slideshow-button-item-act {

background: #fff;

border: 1px solid grey;

}

/* ------------便民服务---------- */

.services {

height: 504px;

width: 248px;

}

.services .services-top {

height: 197px;

width: 247px;

border: 1px solid #d9dde1;

border-bottom: none;

}

.services-top-title {

height: 52px;

width: 100%;

line-height: 52px;

}

.services-top-title a {

color: #4d555d;

font-size: 11px;

margin-right: 30px;

}

.services-top-title .title {

color: #f01414;

margin-left: 16px;

font-size: 18px;

}

.services-top-items {

width: 100%;

height: 162px;

margin-left: 16px;

}

.services-item {

display: block;

height: 14px;

margin-bottom: 15px;

color: #4d555d;

font-size: 13px;

}

.services-top-items a:hover {

color: #f01414;

}

.services .services-middle {

height: 216px;

width: 248px;

border-left: 1px solid #d9dde1;

}

.services-middle-item {

width: 61px;

height: 71px;

border-top: 1px solid #d9dde1;

border-right: 1px solid #d9dde1;

float: left;

}

.services-middle-item:hover {

box-shadow: 0 0 10px inset rgba(0, 0, 0, 0.6);

}

.services-middle-item .iconfont {

color: #f67272;

font-size: 23px;

}

/* 运动 */

.services-middle-item:hover .iconfont {

-webkit-transform: translateY(-20px) 0.6s ease-in-out;

-moz-transform: translateY(-20px) 0.6s ease-in-out;

-o-transform: translateY(-20px) 0.6s ease-in-out;

transform: translateY(-20px) 0.6s ease-in-out;

-webkit-transition: -webkit-transform .6s;

-moz-transition: -moz-transform .6s;

-ms-transition: -ms-transform .6s;

-o-transition: -o-transform .6s;

transition: transform .6s;

}

/* @keyframes move {

0% {

transform: translateY(-10px);

}

100% {

transform: translateY(0);

}

.services-middle-item p {

font-size: 2px;

}

.services-middle-item a {

margin-top: 18px;

display: block;

text-align: center;

}

.services .services-bottom {

height: 89px;

width: 248px;

background: url(../作业素材/code/img/focus-ad.png);

}

/* -----------------------------banner部分-------------------------------- */

繁湖 2019-12-18

源自：实战：中心focus区域组件化 2-2 便捷服务和广告

收起

3回答

好帮手慕言回答被采纳获得+3积分 2019-12-18 19:38:40

同学你好，transform的语法写错了。建议：在hover时，修改垂直方向上的位置就可以了，可以参考下方的代码

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

收起回答

提问者繁湖 2019-12-18 18:03:32

.services-middle-item:hover .iconfont {

-webkit-transform: translateY(-20px) 0.6s ease-in-out;

-moz-transform: translateY(-20px) 0.6s ease-in-out;

-o-transform: translateY(-20px) 0.6s ease-in-out;

transform: translateY(-20px) 0.6s ease-in-out;

-webkit-transition: -webkit-transform .6s;

-moz-transition: -moz-transform .6s;

-ms-transition: -ms-transform .6s;

-o-transition: -o-transform .6s;

transition: transform .6s;

}

收起回答

好帮手慕言 2019-12-18 16:36:46

同学你好，是小图标没有显示吗？如果是的话，可以排除一下路径的问题。

另外：为了准确的为同学解答，建议配合图文描述清楚问题。

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

收起回答

提问者繁湖 #1

不是没有显示是想做运动，比如是向上移动20px，我设置了transition， transform都没有用

2019-12-18 18:01:51

相似问题

为什么显示我设置的东西？

怎么没有ip地址

为什么我绑定了transition只是没有动画了但还是可以实现显示和隐藏？

背景图片的显示方式

3-3页尾怎么显示不出来，还有就是为什么图片和内容的居中显示怎么做

登录后可查看更多问答，登录/注册

2.组件化网页开发

参与学习人
提交作业 1121 份
解答问题 14456 个

本阶段在运用JS实现动态网页开发的基础上，带你深入理解企业开发核心思想，完成一个企业级网页的开发，体验前端工程师的成就感。

了解课程

本课精华内容

问答作业

老师！请教一段代码

37 3

prev+next选择器是否和父子选择器一样呢

22 4

2-11检查

78 1

老师，这样对吗

80 1

提问的同学看这里（慕课网出品）

56 1

查看更多本课问答

请稍等 ...

老师我设置了小icon的运动怎么没有显示

老师我设置了小icon的运动怎么没有显示

正在回答

请选择置顶位置