3.CSS几何旋转----正边形+js

最新推荐文章于 2019-09-18 16:32:19 发布

Summer丶羽

最新推荐文章于 2019-09-18 16:32:19 发布

阅读量128

点赞数

分类专栏： DIV特效文章标签： CSS特效 JS DIV特效前端特效 animation

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

版权

DIV特效专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.效果图：

在这里插入图片描述

2.HTML结构：

<div class="loading">
  <div class="div1">
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
  </div>
</div>

3.思路：

利用js来动态计算每旋转5度时，内部的正边形的边长，从而达到动画进入时，边旋转边缩小的效果。设旋转的5度时，所形成的三角形的对角边为x，则计算公式如下：
每个内部的div的缩小比例都是一样的，比如第二层旋转5度时，要达到刚好接触第一层div的边框，需要将其缩小0.91,；而第三层相对于第二层旋转5度时，要刚好接触第二层div的边框，也需要缩小0.91，则相对于第一层的div缩小了（0.91*0.91），以此类推。

4.具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    html,body{
      height: 100%;
      width: 100%;
      font-family: 'Open Sans';
      background: rgb(236,65,65);
      font-weight: 100;
      color: #181818;
      font-size: 100%;
    }
    *{
      margin: 0;
      padding: 0;
    }
    .loading{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%) rotate(45deg);
      width: 200px;
      height: 200px;
      overflow: hidden;
    }
    .div{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%) rotate(0deg);
      width: 200px;
      height: 200px;
      background: rgb(22,22,22);
      border: 1px solid #000;
      box-shadow: 0px -5px 10px -7px rgba(0,0,0,0.5), 0px 5px 10px -7px rgba(0,0,0,0.5);
    }
    .div:nth-child(1){
    }
    .div:nth-child(2){
      transform: translate(-50%,-50%);
      background: rgb(60,38,38);
      animation: rotate2 2.5s infinite linear;
      z-index: 111;
    }
    .div:nth-child(3){
      transform: translate(-50%,-50%);
      background: rgb(100,44,44);
      animation: rotate3 2.5s infinite linear;
      z-index: 111;
    }
    .div:nth-child(4){
      transform: translate(-50%,-50%);
      background: rgb(149,50,50);
      animation: rotate4 2.5s infinite linear;
      z-index: 111;
    }
    .div:nth-child(5){
      transform: translate(-50%,-50%);
      background: rgb(180,55,55);
      animation: rotate5 2.5s infinite linear;
      z-index: 111;
    }
    .div:nth-child(6){
      transform: translate(-50%,-50%);
      background: rgb(206,59,59);
      animation: rotate6 2.5s infinite linear;
      z-index: 111;
    }
    .div:nth-child(7){
      transform: translate(-50%,-50%);
      background: rgb(216,60,60);
      animation: rotate7 2.5s infinite linear;
      z-index: 111;
    }
  </style>
</head>
<body>
<div class="loading">
  <div class="div1">
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
  </div>
</div>
</body>
<script>
  function compute_scale(rotate,SideLength) {
    let sin_rotate = rotate;
    let x = (SideLength * Math.sin(sin_rotate*Math.PI/180)) / (1 + Math.sin(sin_rotate*Math.PI/180));
    let y = Math.sqrt(((SideLength-x)*(SideLength-x) - x*x));
    let y_scale = y / SideLength;
    return y_scale
  }
  let circleList = document.getElementsByClassName('div')
  let keyframeList = document.styleSheets[0]
  for (let i = -1; i <= 5;i++){
    let str  = "@keyframes rotate" + (i+3) +"{"+
      "      0%{" +
      "        transform: translate(-50%,-50%) rotate(0deg) scale(1);" +
      "      }" +
      "      10%{" +
      "        transform: translate(-50%,-50%) rotate(" +((i+2)*5)+"deg) scale("+(Math.pow(0.916331174017423,(i+2)))+");" +
      "      }" +
      "      20%{" +
      "        transform: translate(-50%,-50%) rotate(" +((i+2)*10)+"deg) scale("+(Math.pow(0.8390996311772801,(i+2)))+");" +
      "      }" +
      "      30%{" +
      "        transform: translate(-50%,-50%) rotate(" +((i+2)*15)+"deg) scale("+(Math.pow(0.7673269879789604,(i+2)))+");" +
      "      }" +
      "      50%{" +
      "        transform: translate(-50%,-50%) rotate(" +((i+2)*45)+"deg) scale("+(Math.pow(0.71,(i+2)))+");" +
      "      }" +
      "      70%{" +
      "        transform: translate(-50%,-50%) rotate(" +((i+2)*75)+"deg) scale("+(Math.pow(0.7673269879789604,(i+2)))+");" +
      "      }" +
      "      80%{" +
      "        transform: translate(-50%,-50%) rotate(" +((i+2)*80)+"deg) scale("+(Math.pow(0.83,(i+2)))+");" +
      "      }" +
      "      90%{" +
      "        transform: translate(-50%,-50%) rotate(" +((i+2)*85)+"deg) scale("+(Math.pow(0.91,(i+2)))+");" +
      "      }" +
      "      100%{" +
      "        transform: translate(-50%,-50%) rotate(" +((i+2)*90)+"deg) scale(1);" +
      "      }" +
      "      100%{" +
      "        transform: translate(-50%,-50%) rotate(" +((i+2)*90)+"deg) scale(1);" +
      "      }" +
      "    }"
    keyframeList.insertRule(str)
  }
</script>
</html>

Summer丶羽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3.CSS几何旋转----正边形+js

1.效果图：2.HTML结构：<div class="loading"> <div class="div1"> <div class="div"></div> <div class="div"></div> <div class="div"></div> &lt...
复制链接

扫一扫