A CodePen by malei0311. pure-css-camera

index.html

<div class="camera-demo">
  <div class="shot">
    <!-- i.lens-$*9 -->
    <i class="lens-1"></i>
    <i class="lens-2"></i>
    <i class="lens-3"></i>
    <i class="lens-4"></i>
    <i class="lens-5"></i>
    <i class="lens-6"></i>
    <i class="lens-7"></i>
    <i class="lens-8"></i>
    <i class="lens-9"></i>
  </div>
  <div class="light"></div>
</div>
<div class="flash"></div>

style.scss

@import "compass";
$cameraHeight: 60px;
$cameraWidth: 70px;
$base: #00fffc;

$cameraInner: 50px;
$cameraShot: $cameraInner - 14px;
$cameraEye: 20px;
$cameraEyeClone: 20px;
$light: 8px;

body {
  margin: 0;
  height: 100%;
  width: 100%;
  background: #383540;
  overFlow: hidden;
}

%pseudo {
  content: ' ';
  position: absolute;
  display: block;
}

@mixin circle($c) {
  height: $c;
  width: $c;
  border-radius: 50%;
  left: calc(50% - #{$c} / 2);
  top: calc(50% - #{$c} / 2);
}

@mixin animation($type,$duration:1s,$delay:0s,$direction: alternate) {
  animation-name: $type;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: $duration;
  animation-delay: $delay;
  animation-direction: $direction;
}

.flash {
   position: absolute;
   height: 100%;
   width: 100%;
   z-index: 20;
   @include animation(flash,2s,1s,normal);   
}
    
.camera-demo {
  position: absolute;
  height: $cameraHeight;
  width: $cameraWidth;
  left: calc(50% - #{$cameraWidth} / 2);
  top: calc(50% - #{$cameraHeight} /2);
  background: #706061;
  border-radius: 6px;
  box-shadow: 1px 2px 10px 1px #211a22;
  
  &:after{
    @extend %pseudo;
    background: #f6e1ce;
    right: 5px;
    top: 5px;
    height: 3px;
    width: 8px;
    border-radius: 1px;
    z-index: 1;
  }
  
  &:before{
    @extend %pseudo;
    @include circle($cameraInner);
    background: #f6e1ce;
    z-index: 1;
  }
}

.shot {
  position: absolute;
  @include circle($cameraInner - 6px);
  @include animation(rotate);
  background: #282739;
  z-index: 3;
  overflow: hidden;
  
  &:before{
    @extend %pseudo;
    @include circle($cameraShot);
    background: #5b4842;
  }
  
  &:after{
    @extend %pseudo;
    @include circle($cameraEye);
    @include animation(eye);
    background: #282633;
  }
}

[class^=lens] {
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  height:1px;
  width: $cameraEye / 2;
  @include animation(blinkZ);
  transform-origin: 0% 50%;
  
  &:after {
    @extend %pseudo;
    width: ($cameraShot - $cameraEye) / 2;
    @include animation(blink);
    height: 1px;
    left: 100%;
    top: 0;
    background: #715957;
    background: linear-gradient(to right,rgba(255,255,255,.1) 0%,#715957 50%,#5b4842 100%);
    box-shadow: 3px -1px 4px 0px rgba(0,0,0,.8);
    transform-origin: 0% 50%;
    transform: rotate(45deg);
  }
}

@for $i from 1 through 9 {
  .lens-#{$i} {
    transform: rotate(40 * $i + deg);
  }
}

.light {
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  height:1px;
  width: $cameraEye / 2;
  z-index: 10;
  //background: red;
  @include animation(blinkZ);
  transform-origin: 0% 50%;
  transform: rotate(-45deg);
      
  &:after {
    @extend %pseudo;
    width: $light;
    height: $light;
    @include animation(light);
    background: #d1ccc9;
    left: calc(100% - #{$light} / 2);
    border-radius: 50%;
    top: - ($light / 2);
  }
}

@keyframes blink {
  
  100% {
    width: ($cameraShot - $cameraEye + 10px) / 2;
  }
}

@keyframes eye {
  
  100% {
    @include circle($cameraEye - 10px);
  }
}

@keyframes blinkZ {
  
  100% {
    width: ($cameraEye - 10px) / 2;
  }
}
    
@keyframes rotate {
  100% {
    transform: rotate( 137.5deg );
  }
}
    
@keyframes light {
  100% {
    width: 3px;
    height: 3px;
    left: 100%;
    top: - (3px / 2);
  }
}

@keyframes flash {
  97% {
    background: none;
  }
  98% {
    background: rgba(255,255,255,.8);
  }
  99% {
    background: none;
  }
  100% {
    background: rgba(255,255,255,.8);
  }
}