html Moncho Varela的钢笔。

Posted 2021-05-11

@import "compass";
//  =  colors
$bg: #000;
$redBlack:#e74c3c;
$red: #c0392b;
$borders:#222;
$paragraph: #fff;
$dark:#252525;
$spotlight:#1abc9c;
// body background
$body: 'http://upload.wikimedia.org/wikipedia/commons/0/0f/Meredith_Supernatural_Amphitheatre_(night).jpg';

$bg-list: #4BC2A5 #606F40 #6648CA #6B6022 #2F54E9;
$br-list: #ff9900 #77ff66 #73C227 #C23E50 #7BAFC2;
$col-list: #111 #222 #333 #444 #555;

//  = sizes
$none: 0%;
$full: 100%;
$medium: 50%;
$small: 25%;


//  = mixin
// @include transition($property,$duration:,$delay,$ease)
@mixin transition(
  $property:all,$duration:1s,$delay:0,$ease:ease){
    -webkit-transition: $property $duration $delay $ease;
    -moz-transition: $property $duration $delay $ease;
    transition: $property $duration $delay $ease;
  }
// @include font-family('arial')
@mixin font-family($font:'Diplomata'){
  font-family: $font, cursive;
}

// = text-shadow
// @include text-shadow($col1,$col2,$col3,,$col4,)
@mixin text-shadow($col1: #EEE,$col2:#D5D5D5,$col3:#C9C9C9,$col4:#363636){
  text-shadow: 
    0 1px 1px $col1,
    0 2px 2px $col2,
    0 3px 3px $col3,
    0 4px 4px $col4;
}
// @include curtain_color();
@mixin curtain_color(){
  background: $red; 
  background: linear-gradient(to right, 
    $red $none,
    $redBlack  ($small - 12),
    $red  $small,
    $redBlack  ($small + 11),
    $red  $medium,
    $redBlack  ($medium + 13),
    $red ($full - 27),
    $redBlack  ($full - 12),
    $red  $full);
}
// @include absolute($top,$left,$right,$bottom)
@mixin absolute($t: 0,$l: 0,$r: 0,$b: 0){
  position:absolute;
  top: $t;
  bottom: $b;
  left: $l;
  right:$r;
  margin: auto;
}
// @include border-radius(2em)
@mixin border-radius($round){
  -webkit-border-radius:$round;
  -moz-border-radius:$round;
  border-radius:$round;
}
// @include box-shadow($value1,$value2,$value3)
@mixin box-shadow($var1,$var2,$var3){
  -webkit-box-shadow:$var1 ,$var2 ,$var3;
  -moz-box-shadow:$var1 ,$var2 ,$var3;
  box-shadow:$var1 ,$var2 ,$var3;
}
// @include transform($value)
@mixin transform($deg: rotate(2deg)){
  -webkit-transform:$deg;
  -moz-transform:$deg;
  transform:$deg;
}
// @include transform($name,$seconds,$loop,$ease)
@mixin animation($name,$seconds,$loop,$ease){
  -webkit-animation: $name $seconds $loop $ease;
  -moz-animation: $name $seconds $loop $ease;
  animation: $name $seconds $loop $ease;
}
// keyframes mixin
@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content; 
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  } 
}


//  = PAGE STYLE
html,body{
  position:relative;
  height:100%;
  font-size:1em;
  overflow:hidden;
  background-color:$bg;
}
body{
  background: url($body) no-repeat center center  scroll $bg;
  background-position: $none ($full - 4);
}
.enter_box{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: inline-block;
  width: ($medium + 10);
  height: 10em;
  text-align: center;
  z-index: 1001;

  .enter_btn a{
    @include font-family();
    font-size: $full * 3;
    text-decoration: none;
    color: $paragraph;
    @include text-shadow($red);
    @include transition();
    &:hover{
      color:$spotlight;
      @include text-shadow($red,$red,$spotlight,$spotlight);
      @include transition();
    }
    @media (max-width: 480px){
      font-size: $full * 1;
    }
    @media (max-width: 768px){
      font-size: $full * 1.7;
    }
  }
}
.curtain{
  .curtain_left,
  .curtain_right{
    width: ($full / 2) + 2;
    height: $full + 10;
    @include curtain_color();
    @include absolute(-5%);
    z-index: 1000;
    @media (max-width: 768px){
      width:($full / 2) + 10 
    }
  }
  .curtain_left{
    @include transform(rotate(-2deg));
    left:($full / 2);
    border-left: 0.2em solid $borders;
    @include border-radius(0 0 0 5em);
  }
  .curtain_right{
    @include transform(rotate(2deg));
    left:-($full / 2);
    border-right: 0.2em solid $borders;
  }
}

.room{
  .inside_room{
    ul{
      list-style: none;
      margin: 0;
      width: 100%;
      text-align: center;

      .ball{
        display:inline-block;
        width:3em;
        height:3em;
        @include border-radius($full);
        @include animation(light,0.3s,infinite,ease);
        border: 1em solid $dark;
        margin: 2em 5em 0 -2em;
      }
      // loop class with array colors
      @for $i from 1 through length($col-list) {
        .light-#{$i} {
          background: nth($bg-list,$i);
          border: random(4) + px solid nth($br-list, $i);
        }
      }
    }
    .baby{
      @include absolute(55%,0,0,0);
      width: 200px;
      height: 200px;
      text-align: center;
      @include transform(scale(2));
      @include border-radius($full);
      z-index: 0;
    }
    .spotlight_left,
    .spotlight_right{
      background:lighten($bg, $small);
      width: $full / 10;
      height: $full / 10;
      @include border-radius(2em 0 0 2em);
      @include box-shadow(10em 0em 8em 3em $paragraph,15em 0em 12em 3em $paragraph,18em 0em 15em 3em $paragraph);
      border-right: 1em solid $redBlack;
      @include animation(move,0.5s,infinite,ease);
    }
    .spotlight_left {
      @include absolute(0,0,100%,85%);
      @include transform(rotate(50deg));
    }
    .spotlight_right {
      @include absolute(0,85%,0%,85%);
      @include transform(rotate(130deg));
    }
  }
}


@include keyframes(move) {
  50%{box-shadow:
    10em 0em 8em 3em  $red,
    15em 0em 12em 3em $red,
    18em 0em 15em 3em $redBlack;}
}
@include keyframes(light) {
  50%{background:$paragraph;}
}

var Web = (function(){
  'use-strict';
  // Vars 
  var curtain_lt = $('.curtain_left'),
      curtain_rt = $('.curtain_right'),
      btn = $('.enter_btn a'),
      room = $('.inside_room'),
      letter =  $('.enter_box');


  return {
    run: function(){
      this.functions();
    },
    // append audio html
    sound: function(){
      letter.append('<audio id="sound" style="diplay:none;" src="http://46.165.204.135:8001/stream" autoplay></audio>');
    },
    // on click btn
    functions:function(){
      btn.on('click',function(){
        curtain_lt.delay(500).animate({right: '-94%'},800);
        curtain_rt.delay(800).animate({right: '100%'},800);
        letter.delay(2000).animate({top: '-200%'},800);
        Web.sound();
      });
    }

  };
})(jQuery);

Web.run();

sCss presents
-------------


A [Pen](http://codepen.io/nakome/pen/wIujy) by [Moncho Varela](http://codepen.io/nakome) on [CodePen](http://codepen.io/).

[License](http://codepen.io/nakome/pen/wIujy/license).

<!-- Google fonts -->
<link href='http://fonts.googleapis.com/css?family=Diplomata' rel='stylesheet' type='text/css'>

<!-- page -->
<div class="enter_box">
  <div class="enter_btn">
    <a href="javascript:void()">
      sCss <span>Pressents</span></a>
  </div>
</div>

<div class="curtain">
  <div class="curtain_left"></div>
  <div class="curtain_right"></div>
</div>

<div class="room">
  <div class="inside_room">
    <ul>
      <li class="ball light-1"></li>
      <li class="ball light-2"></li>
      <li class="ball light-3"></li>
      <li class="ball light-4"></li>
      <li class="ball light-5"></li>
    </ul>
    <img class="baby" src="http://24.media.tumblr.com/tumblr_mag8fhE96c1qj6dh1o1_400.gif" alt="" />
    <div class="spotlight_left"></div>
    <div class="spotlight_right"></div>
  </div>
</div>