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

Camera Lens SVG / CSS Animation

svg，scss，camera

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

第三方库
作品简介 2129
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

$color-primary: #6b6bc1;

* {
  box-sizing: border-box;
}

a.container {
  display: block;
  padding: 100px;
  max-width: 500px;
  height: 500px;
  margin: 0 auto;
  background-color: $color-primary;
}

svg {
  width: auto;
  overflow: visible;
  transition: all .3s ease-in-out;
  g.outer {
    fill: $color-primary;
    transition: fill .5s ease-in;
  }
  g.outer, g.mid, g.inner, g.lens-flare {
    transform-origin: 50% 50%;
  }
  g.mid {
    fill: darken($color-primary, 25%);
    transition: fill .5s ease-in;
    path {
      stroke: darken($color-primary, 25%);
    }
  }
  g.inner {
    stroke-width: 20;
    fill: darken($color-primary, 25%);
    transition: stroke-width .5s ease-in, fill .5s ease-in;
  }
  g.lens-flare {
    opacity: .6;
    transition: opacity 1s ease-in;
  }
}

a:hover {
    g.outer {
      fill: darken($color-primary, 10%);
      animation: rotate .5s ease-in-out .3s,
        scale .3s ease-in-out;
    }
    g.mid {
      animation: scale .4s ease-in-out .2s;
      fill: lighten($color-primary, 20%);
    }
    g.inner {
      animation: scale-inner .8s ease-in-out .3s;
      fill: lighten($color-primary, 30%);
      stroke-width: 25;
    }
    g.lens-flare {
      animation: scale-flare 1s ease-in-out .3s;
      opacity: .8;
    }
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  70% { transform: rotate(45deg); }
  90% { transform: rotate(20deg); }
  100% { transform: rotate(0deg); }
}

@keyframes scale {
  0% { transform: scale(1); }
  30% { transform: scale(.95); }
  70% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes scale-inner {
  0% { transform: scale(1); }
  30% { transform: scale(.95); }
  70% { transform: scale(1.25); }
  100% { transform: scale(1.2); }
}

@keyframes scale-flare {
  0% { transform: scale(1); }
  30% { transform: scale(.95); }
  70% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

HTML

Camera Lens SVG / CSS Animation

svg，scss，camera

编辑器支持Emmet

快捷键

Camera Lens SVG / CSS Animation

svg，scss，camera

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：