3.花瓣特效----js+旋转+位移

最新推荐文章于 2022-07-27 14:37:49 发布

Summer丶羽

最新推荐文章于 2022-07-27 14:37:49 发布

阅读量692

点赞数

分类专栏： DIV特效文章标签： js特效 div特效前端 css特效 animation

本文链接：https://blog.csdn.net/qq_42779222/article/details/99407857

版权

1.用CSS写花瓣特效感觉写得不够灵活，很多地方都要自己计算位置，所以想用js来动态计算，我们只需要提供半径、花瓣的宽度、高度等，就可以来修改动画。

2.思路：

1.需要先知道外部容器的宽度wrapper_w和高度wrapper_h，接着获取花瓣的宽度petal_w和高度petal_h，然后将8个花瓣的div定位到外部容器的中心（为了之后的方便旋转），中心的left为（wrapper_w-petal_w）/2,top为(wrapper_h-petal_h)/2;
2.接着利用设置的花瓣半径，来计算每个div距离中心的位置，因为有8个div，所以每45度的边上就有一个div，如下图所示：
在这里插入图片描述

在这里插入图片描述
3.然后获得8个div的动画，为其动态的添加@keyframes动画帧，之后就可以随意修改动画的参数了。

3.具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="css/animate.css">
  <style>
    .raote-an{
      width: 100%;
      height: 500px;
      background: #424242 ;
    }
    .raote-an .container{
      position: relative;
      width: 480px;
      height: 480px;
      animation: mine3 5s linear infinite ;
      transition: all 5s;
    }
    @keyframes mine3 {
      0%{
        transform: rotate(0deg);
      }
      100%{
        transform: rotate(360deg);
      }
    }
    .raote-an .container div{
      position: absolute;

最低0.47元/天解锁文章

Summer丶羽

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
3.花瓣特效----js+旋转+位移

1.用CSS写花瓣特效感觉写得不够灵活，很多地方都要自己计算位置，所以想用js来动态计算，我们只需要提供半径、花瓣的宽度、高度等，就可以来修改动画。2.思路：1.需要先知道外部容器的宽度wrapper_w和高度wrapper_h，接着获取花瓣的宽度petal_w和高度petal_h，然后将8个花瓣的div定位到外部容器的中心（为了之后的方便旋转），中心的left为（wrapper_w-peta...
复制链接

扫一扫

专栏目录