Inspired by flash bubble screensaver (no images have been used to make the codepen).

index.slim

.cont
  .macdisplay
    .apple
    .container
      .bubble
  .camera
  .foot

script.js

/*
===============================================
Pure CSS - animated Bubble and Mac
===============================================
Inspired by flash bubble screensaver (no images have been used to make the codepen).
===============================================
Created by Azik Samarkandiy

07/08/2012
===============================================
*/

style.sass

@import "compass"
html, body
  background: #222222
  width: 600px
  height: 100%
  margin: 0 auto

.container
  background: linear-gradient(45deg, #1d0836, #cc50a3)
  width: 670px
  height: 390px
  margin: -60px 0 0 -100px
  box-shadow: 0 0 5px black
  transform: scale(0.7)
  z-index: 15

.bubble
  background: rgba(255, 255, 255, 0.1)
  width: 150px
  height: 150px
  border-radius: 50%
  position: absolute
  animation: play 7s infinite ease-in
  box-shadow: 0 0 25px purple inset
  &:before
    background: rgba(255, 255, 255, 0.2)
    content: ""
    width: 60px
    height: 28px
    position: absolute
    margin: 10px 0 0 25px
    border-radius: 50%
    transform: rotate(-20deg)

@keyframes play
  0%
    box-shadow: 0 0 25px purple inset
    transform: red translateX(0) translateY(0px)
  20%
    box-shadow: 0 0 25px red inset
    transform: translateX(300px) translateY(243px)
  30%
    box-shadow: 0 0 25px pink inset
    transform: translateX(524px) translateY(140px)
  40%
    box-shadow: 0 0 25px violet inset
    transform: translateX(300px) translateY(0)
  50%
    box-shadow: 0 0 25px purple inset
    transform: translateX(100px) translateY(243px)
  60%
    box-shadow: 0 0 25px red inset
    transform: translateX(0) translateY(180px)
  70%
    box-shadow: 0 0 25px pink inset
    transform: translateX(200px) translateY(0)
  80%
    box-shadow: 0 0 25px violet inset
    transform: translateX(524px) translateY(170px)
  90%
    box-shadow: 0 0 25px red inset
    transform: translateX(300px) translateY(243px)


.cont
  width: 600px
  margin: -120px 0 0 0
  -webkit-transform: scale(0.6)

.macdisplay
  background: #444444
  width: 470px
  height: 270px
  border: solid 20px black
  border-radius: 10px 10px 0 0
  margin: 94px 0 0 40px
  z-index: 1
  &:before
    background: -webkit-linear-gradient(top left, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.03) 60%, rgba(255, 255, 255, 0) 100%)
    content: ""
    width: 500px
    height: 310px
    border-radius: 10px 10px 0 0
    margin: -20px 0 0 -10px
    position: absolute
    z-index: 16
  &:after
    background: #dddddd
    background: linear-gradient(left, #dddddd 0%, #cccccc 24%, #eeeeee 46%, #dddddd 69%, #cccccc 100%)
    content: ""
    width: 510px
    height: 40px
    position: absolute
    margin: -41px 0 0 -20px
    border-radius: 0 0 10px 10px
    z-index: 3
    box-shadow: 0 1px 2px #444444

.camera
  background: #222222
  width: 2px
  height: 2px
  position: absolute
  margin: -300px 0 0 293px
  border-radius: 3px
  box-shadow: 0 0 1px white

.foot
  background: #bcbcbc
  background: linear-gradient(top, #bcbcbc 0%, #eaeaea 22%, #dddddd 40%, #959595 50%, #a0a0a0 62%, #cccccc 70%, #cccccc 100%)
  width: 170px
  height: 60px
  position: absolute
  margin: 40px 0 0 220px
  border-radius: 0 0 4px 4px
  &:before
    background: #222222
    content: ""
    width: 60px
    height: 62px
    position: absolute
    margin: 0 0 0 -35px
    border-radius: 0 0 50px 0
  &:after
    background: #222222
    content: ""
    width: 60px
    height: 62px
    position: absolute
    margin: 0 0 0 145px
    border-radius: 0 0 0 50px

.apple
  background: black
  width: 208px
  height: 198px
  position: absolute
  margin: 210px 0 0 145px
  border-radius: 36% 36% 41% 41% / 42% 42% 75% 75%
  transform: scale(0.1)
  z-index: 28
  &:before
    background: black
    content: ""
    width: 55px
    height: 55px
    position: absolute
    margin: -60px 0 0 90px
    border-radius: 100px 0
    z-index: 29
  &:after
    background: #eeeeee
    content: ""
    width: 90px
    height: 90px
    position: absolute
    margin: 28px 0 0 174px
    border-radius: 50%
    transform: rotate(-53deg)
    z-index: 4
    box-shadow: 12px -158px 0 #eeeeee, -198px 3px 0 #eeeeee