用CSS3实现镂空的简单动画效果
我只是想实现一个类似迪士尼早期动画那样，一张图片从一个逐渐扩大的圆中钻出来的效果，没想到实际做起来却很复杂。
自己研究半天，结果除了一个土办法之外，其他的统统不合适，我没有在原生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; }
