JQ的简单效果的小案例--用animate动画效果实现旋转

最新推荐文章于 2022-05-19 08:46:53 发布

浅浅一笑^*^

最新推荐文章于 2022-05-19 08:46:53 发布

阅读量4.2k

点赞数

分类专栏： animate transform transition 文章标签： css3 html javascript js

本文链接：https://blog.csdn.net/weixin_46409887/article/details/105697814

版权

transform 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

animate

2 篇文章 0 订阅

订阅专栏

transition

1 篇文章 0 订阅

订阅专栏

实现360°旋转后效果图
在这里插入图片描述
css

    <style>
        *{
            margin:0;
            padding:0;
        }
        button{
            width: 50px;
            height: 50px;
            line-height: 50px;
            background: lime;
            border-radius: 5px;
            margin: 0 200px;
        }
        div{
            width: 500px;
            height: 500px;
            background-image: linear-gradient(lime 9%,blue 30%,yellow 66%,#bd2130 89%);/*背景渐变颜色*/
            margin: 0 auto;
            position: relative;
            top:0;
            left:0;
            transition: all 4s;/*1.步骤先设置动画时间*/
            transform: rotate(0deg);/*3.步骤设置旋转初始值0deg*/
            color:red;
            font-size: 16px;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
<button>按钮</button>
<div>hello world</div>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    //在jq中animate动画不能直接1.设置背景颜色,只能通过插件控制（jquery color插件下载）
    //2.解决transform:rotate（90deg）旋转效果  （在animate动画中无法进行旋转）
  $(function() {
      $("button").click(function() {
          // $("div").animate({1.例子
          //     width:"200px",
          //     height:"200px",
          //     background:"blue",//例子一，背景颜色无法显示//必须用插件实现
          //     borderRadius:"50%"
          //},3000)
      },function() {//2.步骤 先设置空样式{} ，在设置回调函数
          $("div").css({//2.例子
              width:"200px",
              height:"200px",
              transform:"rotate(360deg)",
              backgroundImage:"linear-gradient(lime 9%,blue 30%,yellow 66%,#bd2130 89%)",
              borderRadius:"50%"
          })
         });

      });

</script>

浅浅一笑^*^

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JQ的简单效果的小案例--用animate动画效果实现旋转

实现360°旋转后效果图css <style> *{ margin:0; padding:0; } button{ width: 50px; height: 50px; line-height: 50px;...
复制链接

扫一扫

专栏目录