css3でmacのスクリーンセーバー風なものを作ってみた。

SAMPLEはこちら

制作のポイント

  1. htmlとbodyにheight:100%;を指定する。
  2. dot.pngで画像の荒れをごまかす。
  3. background-size:coverは、縦横比はキープして、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
  4. @keyframe、nth-child
  5. tranceform-origin: 変形の基点
  6. transform:scale() …… 要素を拡大・縮小表示する
  7. linearは一定 ・infinite は無限
  8. transform: scale(1.4)は、少し大きくなる

どのくらい実用的かはhttp://caniuse.com/で確認ください。

html

<body>
<div class="bg">
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
</div>
</body>

css

html,body {
    margin:0;
    padding:0;
    height:100%;
    background: #000;
}
.bg {
    height:100%;
    width: 100%;
    position: relative;
    overflow:hidden;
}
.bg:after {
    content:"";
    display:block;
    position: absolute;
    top:0;
    left:0;
    height:100%;
    width: 100%;
    background:url(dot.png) 0 0 repeat;
}
.bg .photo {
	font-size:10em;
	color:#fff;
    position: absolute;
    top:0;
    left:0;
    height:100%;
    width: 100%;
    background:0 0 no-repeat;
    background-size:cover;
    -webkit-animation: bg infinite linear 24s;
            animation: bg infinite linear 24s;
}
.bg .photo:nth-child(1) {
    background-image:url(sofa.jpg);
    -webkit-transform-origin:bottom top 0;
    transform-origin:bottom top 0;
    -webkit-animation-delay:0s;
    animation-delay:0s;
}
.bg .photo:nth-child(2) {
    background-image:url(nala.jpg);
    -webkit-transform-origin:bottom left 0;
    transform-origin:bottom left 0;
    -webkit-animation-delay:-16s;
    animation-delay:-16s;
}
.bg .photo:nth-child(3) {
    background-image:url(timon.jpg);
    -webkit-transform-origin:right bottom 0;
    transform-origin:right bottom 0;
    -webkit-animation-delay:-8s;
    animation-delay:-8s;
}

 
 
@-webkit-keyframes bg {
    0% {
        opacity: 0;
        -webkit-transform: scale(1) ;
    }
    10%,30% {
        opacity: 1;
    }
    40% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.4) ;
    }
}
@keyframes bg {
    0% {
        opacity: 0;
        transform: scale(1) ;
    }
    10%,30% {
        opacity: 1;
    }
    40% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        transform: scale(1.4) ;
    }
}

http://nobu-69.com/