我这个为什么效果会不对

我这个为什么效果会不对

用transform就不行

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>2-9</title>
    <style type="text/css">
        div {
            font-family: Arial;
            font-size: 72px;
            font-weight: bold;
            position: fixed;
            right: 0;
            left: 0;
            width: 30px;
            height: 30px;
            margin: auto;
            transform: rotate(90deg);
            
            /*此处写代码*/
            bottom:72px;
            animation:test 2s infinite linear alternate;
            
        }
        @keyframes test{
            from{transform:translate(0,0px);
                transform: rotate(90deg);
            }
            to{transform:translate(0,-50px);
                transform: rotate(0deg);
            }
        }
    </style>
</head>
<body>
    <div>&gt;</div>
</body>
</html>


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好!

抱歉刚才老师没有看仔细后期细细查看了一下发现,

如果没加transform:rotate的话,箭头还是水平的原因是:

代码是从上到下执行的

http://img1.sycdn.imooc.com//climg/5cb076000001250307980519.jpg

解决方法是:

http://img1.sycdn.imooc.com//climg/5cb076170001cb7e05800161.jpg

如果解决了你的问题,欢迎采纳 祝学习愉快~

好帮手慕码 2019-04-12 17:45:48

同学你好!

按照效果图 动画应该是从底部开始,因此可以这样写:

ease    规定慢速开始,然后变快,然后慢速结束的过渡效果    

infinite  无限次数循环。

http://img1.sycdn.imooc.com//climg/5cb05dd80001ad2507470403.jpg

http://img1.sycdn.imooc.com//climg/5cb05e2d0001515f04100091.jpg

如果帮助到了你欢迎采纳,祝学习愉快哦~

  • 提问者 教练我想做游戏 #1
    我知道。我的意思是我这样实现为什么会不对,如果我没加transform:rotate的话,我的箭头是水平的。为什么会这样
    2019-04-12 18:17:24
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师