如何創建一個CSS3溢出隱藏揭露聚光燈效果與旋轉？

我想創建一個效果，我有一個靜態圖像，並且該圖像正在被旋轉蒙版遮罩。我知道沒有辦法在HTML5/CSS（可在所有瀏覽器中工作）執行本地遮罩，因此我使用mask：overflow方法。如何創建一個CSS3溢出隱藏揭露聚光燈效果與旋轉？

我遇到了這個鏈接張貼由谷歌： https://storage.googleapis.com/html5-demos/MaskRotateTranslate/index.html

我想達到什麼在第二個例子中合照。唯一的區別是我不需要內部圖像來設置動畫，只有它是「蒙版」。

這個例子似乎是通過Google Web Designer生成的，所以我不能真正使用它的代碼。

我試圖使用計數器動畫方法重新創建它（div中的div，外部div用作'mask'當外部div移動30px到右側時，另一個移動-30px，創建錯覺的靜態內容）。直到我開始旋轉div時，此方法才適用於我。旋轉似乎會影響內容的x值和y值，這種混亂會影響反擊效果。

長話短說..如何使用簡單的Javascript或CSS動畫實現類似的效果？有沒有人有過這種類型的動畫的成功？

來源

2016-10-12 Cmaxster

文本長，任務還不清楚（至少對我來說）。 – Christoph

這裏是我的嘗試：

.image { 
 
    width: 400px; 
 
    height: 300px; 
 
    background-image: url(http://placekitten.com/800/600); 
 
    background-size: contain; 
 
    position: absolute; 
 
    left: 0px; 
 
    right: 0px; 
 
    animation: inner 4s infinite; 
 
} 
 

 
.container { 
 
    width: 400px; 
 
    height: 300px; 
 
    left: 400px; 
 
    position: relative; 
 
    animation: outer 4s infinite; 
 
    border: solid red 1px; 
 
    overflow: hidden; 
 
} 
 

 
@keyframes inner { 
 
    from {transform: rotate(0deg) translate(500px);} 
 
    to {transform: rotate(360deg) translate(0px); } 
 
} 
 

 
@keyframes outer { 
 
    from {transform: translate(-500px) rotate(0deg);} 
 
    to {transform: translate(0px) rotate(-360deg);} 
 
}

<div class="container"> 
 
    <div class="image"></div> 
 
    </div>

來源

2016-10-12 21:29:45 vals

如何創建一個CSS3溢出隱藏揭露聚光燈效果與旋轉？

回答

相關問題