我只是想實現一個類似迪士尼早期動畫那樣，一張圖片從一個逐漸擴大的圓中鑽出來的效果，沒想到實際做起來卻很復雜。
自己研究半天，結果除了一個土辦法之外，其他的統統不合適，我沒有在原生css中找到一個可以“擊穿”其他元素的方式。后來網上看到一個辦法，他投機取巧地把border改得很大，起到一個遮罩層的效果。但這樣的話會影響其他元素的表現，哪怕放到最底層，也不能做到同時有兩個同樣的鏤空效果存在。
最后我還是回歸了我的“土辦法”。先弄個div作為遮罩層，用overflow:hidden的方式，把border-radius改為50%，這就有了個能蓋住多余部分的圓。里面塞張圖片，然后用transition把遮罩層的width和height從1變到圖像的尺寸。 然而這個土辦法最蠢的部分在於，你需要同時“拉動”遮罩層和圖片的位置，不然由小放大是從左上角而不是中間開始的。我嚴重懷疑這種同時進行的變化效果特別消耗資源，不過實際做出來以后我的感觸是----我至少做出來了-----而且它看起來還湊合：）。
開始我還擔心這會犧牲居中自適應效果，后來這也被簡單地避免了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="src/js/jquery-3.1.1.min.js"></script> <link rel="stylesheet" href="src/css/test.css"> </head> <body style="background-color: #4cae4c"> <div id="container"> <div id="layer"> <img src="src/img/11.png" id="photo"> </div> </div> <script>$(function(){ var $layer=$("#layer"),$photo=$("#photo"); $layer.css({"width":"300px","height":"300px","margin-left":"-150px","margin-top":"-150px"}); $photo.css({"margin-left":"150px","margin-top":"150px"}); }); </script> </body> </html>
#layer{ position:absolute; border-radius: 50%; overflow: hidden; width:1px; height:1px; transition:all 1s ease-out; } #container{ top:200px; left:50%; position:relative; } #photo{ position:absolute; transition:all 1s ease-out; left:-150px; top:-150px; }