問(wèn)題描述

這個(gè)是我要的效果，箭頭代碼如下

.page4 .arrow-up{

position: absolute;width: 80/100rem;height: auto;margin-left: 50%;left:-40/100rem;bottom: 5%;animation: moveIconUp ease 2s both infinite;-webkit-animation: moveIconUp ease 2s both infinite;transform:rotate(180deg);-webkit-transform:rotate(180deg);

}

@-webkit-keyframes moveIconUp {

0% { -webkit-transform: translateY(120%); opacity: 0;}50% { -webkit-transform: translateY(0%); opacity: 1;}100% { -webkit-transform: translateY(-160%); opacity: 0;}

}

出來(lái)的效果是

箭頭ui切出來(lái)是向下的，我是想用transform:rotate(180deg)把他轉(zhuǎn)過(guò)來(lái)，不知道那里錯(cuò)了

問(wèn)題解答

你的動(dòng)畫moveIconUp 里面設(shè)置了transform把它覆蓋掉了。transform多個(gè)屬性用空格隔開(kāi)，不然后面寫的會(huì)把前面的覆蓋，這樣寫：transform:translateY(-160%) rotate(180deg)

transform里的各個(gè)屬性不能單獨(dú)設(shè)置

設(shè)置成塊狀元素