使用SCSS的循环语法实现多个圆形和方形旋转

本例用来学习SCSS循环@for语句。

SCSS

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2976
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
  background: #000;
}

.container {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
  height: 250px;
}

.circle {
  position: absolute;
  top: 8%;
  left: 10%;
  width: 200px;
  height: 200px;
  border-radius: 50%; 
}

.square {
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 250px;
}

.circle, .square {
  animation: unfold 20s linear infinite;
  -webkit-animation: unfold 20s linear infinite;
}

$circles: 25;
$squares: 50;

@for $i from 1 through $circles {
  
  .circle:nth-child(#{$i}) {
    animation-delay: $i * 0.75s;
    -webkit-animation-delay: $i * 0.75s;
    border: 1px solid hsla($i*50, 90, 50, 0.25);
  }
}

@for $i from 1 through $squares {
  
  .square:nth-child(#{$i}) {
    animation-delay: $i * 0.1s;
    -webkit-animation-delay: $i * 0.1s;
    border: 1px solid hsla($i*10, 60, 60, 0.5);
  }
}

@-webkit-keyframes unfold {   
    0% { transform: rotateY(0) rotateX(0) rotateZ(0); }
    50% { transform: rotateY(360deg) rotateX(180deg) rotateZ(180deg); }
    100% { transform: rotateY(0deg) rotateX(360deg) rotateZ(360deg); }
}

@keyframes unfold {   
    0% { transform: rotateY(0) rotateX(0) rotateZ(0); }
    50% { transform: rotateY(360deg) rotateX(180deg) rotateZ(180deg); }
    100% { transform: rotateY(0deg) rotateX(360deg) rotateZ(360deg); }
}

/* NO-BEAUTIFY */

HTML

本例用来学习SCSS循环@for语句。

SCSS

编辑器支持Emmet

快捷键

本例用来学习SCSS循环@for语句。

SCSS

使用SCSS random方法实现的随机形状和色彩的窗口

使用SVG和SCSS实现的相机镜头调焦动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：