展望實現矩形徑向擦拭動畫顯示

Question

我正在研究全寬英雄動畫，它將以徑向擦除方式顯示圖像/ HTML div。這是我到目前爲止：http://jsfiddle.net/andrewkerr/bjqSv/ - （代碼如下），這主要是基於這些部分：http://codepen.io/tmyg/pen/bwLom和http://css-tricks.com/css-pie-timer/ - 我遇到的問題是圖像瓷磚，因爲動畫分裂了「餡餅」的一半 - 我我希望在沒有圖像平鋪的情況下執行效果。我不反對Javascript解決方案。謝謝。

//html 
<div class="spinner-new"> 
    <span><em></em></span> 
    <span><em></em></span> 
</div> 

//css 
    .spinner-new { 
    width: 100%; 
    height: 400px; 
    margin: 0 auto; 
    position: relative; 
    background:#3f9e35; 
    overflow:hidden 
} 

.spinner-new span em { 
    background-image:url('http://cdn.acidcow.com/pics/20100707/funny_family_photos_04.jpg'); 
    -webkit-animation-delay:1s; 
    -webkit-animation-duration: 3s; 
} 

@-webkit-keyframes rotate-rt { 
    0% { -webkit-transform: rotate(0deg); } 
    25% { -webkit-transform: rotate(180deg); } 
    50% { -webkit-transform: rotate(180deg); } 
    75% { -webkit-transform: rotate(180deg); } 
    100% { -webkit-transform: rotate(180deg); } 
} 
@-webkit-keyframes rotate-lt { 
    0% { -webkit-transform: rotate(0deg); } 
    25% { -webkit-transform: rotate(0deg); } 
    50% { -webkit-transform: rotate(180deg); } 
    75% { -webkit-transform: rotate(180deg); } 
    100% { -webkit-transform: rotate(180deg); } 
} 

.spinner-new { 
    position: relative; 
} 

.spinner-new span { 
    width: 50%; 
    height: 400%; 
    overflow: hidden; 
    position: absolute; 
} 

.spinner-new span:first-child { 
    left: 0; 
} 

.spinner-new span:last-child { 
    left: 50%; 
} 

.spinner-new span em { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-timing-function: linear; 
    animation-fill-mode: forwards; 
    -webkit-animation-fill-mode: forwards; 
} 

.spinner-new span:first-child em { 
    left: 100%; 
    border-top-left-radius: 0; 
    border-bottom-left-radius: 0; 
    -webkit-animation-name: rotate-lt; 
    -webkit-transform-origin: 0 12.5%; 
} 

.spinner-new span:last-child em { 
    left: -100%; 
    border-top-right-radius: 0; 
    border-bottom-right-radius: 0; 
    -webkit-animation-name: rotate-rt; 
    -webkit-transform-origin: 100% 12.5%; 
} 

Answer 1

可能不是實現這一目標的最優雅的方式，但我結束了使用CSS動畫，逐漸顯露出餅片。下面是對工作示例的鏈接：http://jsfiddle.net/andrewkerr/dsTm6/ - 以下

//html 
    <div class="wrapper"> 
     <div class="headline">Some really cool supporting text</div> 
     <div class='shutter-1 first' style="left:400px;top:0px;"></div> 
     <div class='shutter-2 fourth' style="left:400px;top:400px;"></div> 
     <div class='shutter-1a third' style="left:400px;top:400px;"></div> 
     <div class='shutter-3 seventh' style="left:0px;top:0px"></div> 
     <div class='shutter second' style="left:400px;top:0px;"></div> 
     <div class='shutter-2a sixth' style="left:0px;top:400px;"></div> 
     <div class='shutter fifth' style="left:0px;top:400px;"></div> 
     <div class='shutter-3a eighth' style="left:0px;top:0px"></div> 
    </div> 

    //css 
     .wrapper { 
     position:relative; 
      background-image:url('main.jpg'); 

     width:800px; 
     height:800px; 
     margin:0px auto; 
    } 

    .shutter 
    { 
     position: absolute; 
     width: 0; 
     height: 0; 
     width: 0px; 
     height: 0px; 
     border-left;150px solid transparent; 
     border-bottom: 400px solid #e7e7e7; 
     text-indent: -9999px; 
     border-left-width: 400px; 
     border-left-style: solid; 
     border-left-color: transparent; 
     -webkit-transform:rotate(360deg); 
    } 

    .shutter-1 
    { 
     position: absolute; 
     width: 0; 
     height: 0; 
     width: 0px; 
     height: 0px; 
     border-right;150px solid transparent; 
     border-top: 400px solid #e7e7e7; 
     text-indent: -9999px; 
     border-right-width: 400px; 
     border-right-style: solid; 
     border-right-color: transparent; 
     -webkit-transform:rotate(360deg); 
    } 
    .shutter-1a 
    { 
     position: absolute; 
     width: 0; 
     height: 0; 
     width: 0px; 
     height: 0px; 
     border-left;150px solid transparent; 
     border-top: 400px solid #e7e7e7; 
     text-indent: -9999px; 
     border-left-width: 400px; 
     border-left-style: solid; 
     border-left-color: transparent; 
     -webkit-transform:rotate(360deg); 
    } 
    .shutter-2 
    { 
     position: absolute; 
     width: 0; 
     height: 0; 
     width: 0px; 
     height: 0px; 
     border-right;150px solid transparent; 
     border-bottom: 400px solid #e7e7e7; 
     text-indent: -9999px; 
     border-right-width: 400px; 
     border-right-style: solid; 
     border-right-color: transparent; 
     -webkit-transform:rotate(360deg); 
    } 
    .shutter-2a 
    { 
     position: absolute; 
     width: 0; 
     height: 0; 
     width: 0px; 
     height: 0px; 
     border-right;150px solid transparent; 
     border-top: 400px solid #e7e7e7; 
     text-indent: -9999px; 
     border-right-width: 400px; 
     border-right-style: solid; 
     border-right-color: transparent; 
     -webkit-transform:rotate(360deg); 
    } 
    .shutter-3 
    { 
     position: absolute; 
     width: 0; 
     height: 0; 
     width: 0px; 
     height: 0px; 
     border-top;150px solid transparent; 
     border-left: 400px solid #e7e7e7; 
     text-indent: -9999px; 
     border-top-width: 400px; 
     border-top-style: solid; 
     border-top-color: transparent; 
     -webkit-transform:rotate(360deg); 
    } 
    .shutter-3a 
    { 
     position: absolute; 
     width: 0; 
     height: 0; 
     width: 0px; 
     height: 0px; 
     border-left;150px solid transparent; 
     border-top: 400px solid #e7e7e7; 
     text-indent: -9999px; 
     border-left-width: 400px; 
     border-left-style: solid; 
     border-left-color: transparent; 
     -webkit-transform:rotate(360deg); 
    } 


    @keyframes first 
    { 
     from {opacity: 1.0;} 
     to {opacity: 0.0;} 
    } 

    @-moz-keyframes first /* Firefox */ 
    { 
     from {opacity: 1.0;} 
     to {opacity: 0.0;} 
    } 

    @-webkit-keyframes first /* Safari and Chrome */ 
    { 
     from {opacity: 1.0 ;} 
     to {opacity: 0.0;} 
    } 

    @-o-keyframes first /* Opera */ 
    { 
     from {opacity: 1.0;} 
     to {opacity: 0.0;} 
    } 
    .first 
    { 
     animation: first 1s; 
     animation-delay: .08s; 
     animation-fill-mode: forwards; 
     -moz-animation: first 1s; /* Firefox */ 
     -moz-animation-delay: .08s; 
     -moz-animation-fill-mode: forwards; 
     -webkit-animation: first 1s ease-in-out; /* Safari and Chrome */ 
     -webkit-animation-fill-mode: forwards; 
     -webkit-animation-delay: .08s; 
     -o-animation: first 1s; /* Opera */ 
     -o-animation-delay: .08s; 
     -o-animation-fill-mode: forwards; 
    } 
    .second 
    { 
     animation: first 1s; 
     animation-delay: 1.0s; 
     animation-fill-mode: forwards; 
     -moz-animation: first 1s; /* Firefox */ 
     -moz-animation-delay: 1s; 
     -moz-animation-fill-mode: forwards; 
     -webkit-animation: first 1s ease-in-out; /* Safari and Chrome */ 
     -webkit-animation-fill-mode: forwards; 
     -webkit-animation-delay: 1s; 
     -o-animation: first 1s; /* Opera */ 
     -o-animation-delay: 1s; 
     -o-animation-fill-mode: forwards; 
    } 
    .third 
    { 
     animation: first 1s; 
     animation-delay: 1.05s; 
     animation-fill-mode: forwards; 
     -moz-animation: first 1s; /* Firefox */ 
     -moz-animation-delay: 1.05s; 
     -moz-animation-fill-mode: forwards; 
     -webkit-animation: first 1s ease-in-out; /* Safari and Chrome */ 
     -webkit-animation-delay: 1.05s; 
     -webkit-animation-fill-mode: forwards; 
     -o-animation: first 1s; /* Opera */ 
     -o-animation-delay: 1.05s; 
     -o-animation-fill-mode: forwards; 
    } 
    .fourth 
    { 
     animation: first 1s; 
     animation-delay: 1.2s; 
     animation-fill-mode: forwards; 
     -moz-animation: first 1s; /* Firefox */ 
     -moz-animation-delay: 1.2s; 
     -moz-animation-fill-mode: forwards; 
     -webkit-animation: first 1s ease-in-out; /* Safari and Chrome */ 
     -webkit-animation-delay:1.2s; 
     -webkit-animation-fill-mode: forwards; 
     -o-animation: first 1s; /* Opera */ 
     -o-animation-delay: 1.2s; 
     -o-animation-fill-mode: forwards; 
    } 
    .fifth 
    { 
     animation: first 1s; 
     animation-delay: 1.4s; 
     animation-fill-mode: forwards; 
     -moz-animation: first 1s; /* Firefox */ 
     -moz-animation-delay: 1.4s; 
     -moz-animation-fill-mode: forwards; 
     -webkit-animation: first 1s ease-in-out; /* Safari and Chrome */ 
     -webkit-animation-fill-mode: forwards; 
     -webkit-animation-delay: 1.4s; 
     -o-animation: first 1s; /* Opera */ 
     -o-animation-delay: 1.4s; 
     -o-animation-fill-mode: forwards; 
    } 
    .sixth 
    { 
     animation: first 1s; 
     animation-delay: 1.5s; 
     animation-fill-mode: forwards; 
     -moz-animation: first 1s; /* Firefox */ 
     -moz-animation-delay: 1.5s; 
     -moz-animation-fill-mode: forwards; 
     -webkit-animation: first 1s ease-in-out; /* Safari and Chrome */ 
     -webkit-animation-fill-mode: forwards; 
     -webkit-animation-delay: 1.5s; 
     -o-animation: first 1s; /* Opera */ 
     -o-animation-delay: 1.5s; 
     -o-animation-fill-mode: forwards; 
    } 
    .seventh 
    { 
     animation: first 1s; 
     animation-delay: 1.6s; 
     animation-fill-mode: forwards; 
     -moz-animation: first 1s; /* Firefox */ 
     -moz-animation-delay: 1.6s; 
     -moz-animation-fill-mode: forwards; 
     -webkit-animation: first 1s ease-in-out; /* Safari and Chrome */ 
     -webkit-animation-delay: 1.6s; 
     -webkit-animation-fill-mode: forwards; 
     -o-animation: first 1s; /* Opera */ 
     -o-animation-delay: 1.6s; 
     -o-animation-fill-mode: forwards; 
    } 
    .eighth 
    { 
     animation: first 2s; 
     animation-delay: 1.7s; 
     animation-fill-mode: forwards; 
     -moz-animation: first 2s; /* Firefox */ 
     -moz-animation-delay: 1.7s; 
     -moz-animation-fill-mode: forwards; 
     -webkit-animation: first 1s ease-in-out; /* Safari and Chrome */ 
     -webkit-animation-delay: 1.7s; 
     -webkit-animation-fill-mode: forwards; 
     -o-animation: first 2s; /* Opera */ 
     -o-animation-delay: 1.7s; 
     -o-animation-fill-mode: forwards; 
    } 
    .headline { 
     font-family: Arial, Helvetica, sans-serif; 
     font-weight: 700; 
     text-transform: uppercase; 
     font-size:36px; 
     text-align: center; 
     color:#fff; 
     padding-top:300px; 
     width:300px; 
     margin: 0 auto; 
    } 

Answer 2

代碼這是我的解決方案。

CSS

@-webkit-keyframes span-left { 
    0%  { right: 0%; } 
    24.999% { right: 0%;} 
    25% { right: 50%;} 
    100% { right: 50%;} 
} 

@-webkit-keyframes rotate-first { 
    0%  { right: 100%; 
       -webkit-transform: rotate(0deg); 
       -webkit-transform-origin: right center; } 
    24.999% { right: 100%; 
       -webkit-transform: rotate(180deg); 
       -webkit-transform-origin: right center; } 
    25% { right: 0%; 
       -webkit-transform: rotate(180deg); 
       -webkit-transform-origin: right center; } 
    50% { right: 0%; 
       -webkit-transform: rotate(360deg); 
       -webkit-transform-origin: right center; } 
    100% { right: 0%; 
       -webkit-transform: rotate(360deg); 
       -webkit-transform-origin: right center; } 
} 

@-webkit-keyframes rotate-last { 
    0%  { -webkit-transform: rotate(0deg); opacity: 0; } 
    24.999% { -webkit-transform: rotate(180deg); opacity: 0;} 
    25% { -webkit-transform: rotate(180deg); opacity: 1;} 
    50% { -webkit-transform: rotate(360deg); opacity: 1; } 
    100% { -webkit-transform: rotate(360deg); opacity: 1;} 
} 

.spinner-new { 
    width: 400px; 
    height: 300px; 
    position: relative; 
    overflow:hidden; 
    position: relative; 
    left: 50px; 
    top: 20px; 
} 


.spinner-new span { 
    width: 50%; 
    height: 100%; 
    overflow: hidden; 
    position: absolute; 
} 

.spinner-new span:first-child { 
    right: 50%; 
} 

.spinner-new span:last-child { 
    left: 50%; 
} 

.spinner-new span em { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
} 

.spinner-new span em, 
.spinner-new span:first-child { 
    -webkit-animation-duration: 30s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
} 
.spinner-new span:first-child { 
    -webkit-animation-name: span-left; 
} 
.spinner-new span:first-child em { 
    -webkit-animation-name: rotate-first; 
    overflow: hidden; 
} 

.spinner-new span:last-child em { 
    left: 0; 
    -webkit-animation-name: rotate-last; 
    -webkit-transform-origin: left center; 
    -webkit-transform: rotate(204deg); 
} 
.spinner-new span em:after { 
    content: ""; 
    position: absolute; 
    width: 200%; 
    height: 100%; 
    top: 0px; 
    background-image:url('image.jpg'); 
    background-size: cover; 
} 

.spinner-new span:first-child em:after { 
    left: 0px; 
} 

.spinner-new span:last-child em:after { 
    right: 0px; 
} 

最複雜的問題被重用分裂離開元素右手開始。 我必須將容器移動到動畫中間的左側。 背景圖像設置有蓋，和所有的大小其實是百分比，因此這個解決方案應該是充分響應

fiddle

演示具有迭代次數無限，所以很容易看到它上。