动态的时候,不旋转90度

动态的时候,不旋转90度

<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);

           

            /*此处写代码*/

            transform:scale(1.5);

            animation: abc 1s linear .5s infinite alternate;

        }

        @keyframes abc{

            from { 

                transform: translate(0px,0px) ;}

            to{

                transform: translate(0px,15px);}

            

        }

    </style>

</head>

<body>

    <div>></div>

</body>

</html>


正在回答 回答被采纳积分+1

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

3回答
怎么都被占用了呢 2017-09-01 13:39:47

元素设置固定定位后,想让它居于网页底部,定义bottom:0;呀。

幻之挽歌 2017-09-01 09:48:20

<!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);

            /*此处写代码*/

            animation:Jiantou .5s ease-in-out .5s infinite alternate; 

        }

        @keyframes Jiantou{

            from{

                transform: translateY(500px) rotate(90deg);

            }

            to{

                transform: translateY(520px) rotate(90deg);

            }

        }

    </style>

</head>

<body>

    <div>></div>

</body>

</html>


怎么都被占用了呢 2017-08-30 10:48:47

因为后面设置的transform会覆盖前面的,所以建议使用组合的方式http://img1.sycdn.imooc.com/climg//59a6278c0001e19010120400.jpg

  • 老师 固定定位 顶住位置了 怎么让他居于网页底部 是position:bottom;么? 设置完 position:fixed;还能设置绝对定位么? 代码如下 如何让他居于 网页底部呢? <!DOCTYPE html> <html lang="en"> <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); /*此处写代码*/ animation:Jiantou .5s ease-in-out .5s infinite alternate; } @keyframes Jiantou{ from{ transform: translateY(500px) rotate(90deg); } to{ transform: translateY(520px) rotate(90deg); } } </style> </head> <body> <div>></div> </body> </html>
    2017-09-01 09:47:58
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础,却不知道如何进阶?本路径带你通过系统学习,完成从“会做网页”到“做出好的动态网页”的蜕变,迈出成为前端工程师的第一步。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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