小编mas*_*ixe的帖子

SVG线全屏尺寸

我正在尝试实现以下图像：

从每个圆圈出来的线可以无限旋转（通过css关键帧不难实现），我尝试使用100s的div进行此操作，并分别旋转10度，但未能满足我的需求。所以我想到了svg，但我做了一些事情，但是并没有按要求工作，线路没有全屏显示。摆弄上面。

html,
body {
  overflow: hidden;
}

.fw {
  border-top: 1px red solid;
  width: 2000px;
}

.wrapper {
  overflow: hidden;
}

@-webkit-keyframes rotating
/* Safari and Chrome */

{
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.wrapper1 …

Run Code Online (Sandbox Code Playgroud)

javascript css svg css3 css-animations

mas*_*ixe

2018 05-11

3
推荐指数

1
解决办法

140
查看次数