使用CSS3创建苹果灵动岛效果
苹果灵动岛效果是一种非常流行的网页设计元素，它可以通过CSS3实现。首先，我们需要创建一个容器，然后在容器中添加一个子元素。接下来，我们可以使用CSS3的伪元素和动画属性来实现灵动岛效果。例如，我们可以使用`::before`和`::after`伪元素来创建两个半圆形，然后使用`transform`属性将它们旋转并移动到合适的位置。最后，我们可以使用`animation`属性为这两个半圆形添加动画效果，使它们在页面上移动。这样，我们就可以通过CSS3实现苹果灵动岛效果了。
主要利用了CSS3-animation + JS实现效果，只是提供思路，具体细节可以参考
<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><title>灵动岛</title><style>*{margin:0;padding:0;}#iphone14pro{position:relative;margin:auto;width:974px;height:876px;overflow:hidden;background-image:url([img]/d/pic20240105/4lheqrrdwo4.png[/img]);}.demo{width:320px;margin-top:72px;margin:72pxauto0;background-color:red;height:80px;border-radius:40px;background-color:#272729;position:relative;}.demo::after{position:absolute;content:"";right:0;width:80px;height:100%;border-radius:80px;background-color:#272729;}/*变长*/.longer{animation:longer800msease-in-outforwards;}@keyframeslonger{0%{}60%{width:50vw;}80%{transform:scaleX(1.04);}100%{transform:scaleX(1);width:50vw;}}/*分离*/.divide{animation:divide-left800msease-in-outforwards;}@keyframesdivide-left{0%{}40%{transform:scaleX(1.1);}100%{transform:scaleX(1);}}.divide::after{animation:divide-right800msease-in-outforwards;}@keyframesdivide-right{0%{}40%{transform:scaleX(1.1);}100%{transform:scaleX(1);right:-100px;}}/*融合*/.fusion{animation:fusion-left800msease-in-outforwards;}@keyframesfusion-left{0%{}40%{transform:scaleX(1.1);}100%{transform:scaleX(1);}}.fusion::after{animation:fusion-right800msease-in-outforwards;}@keyframesfusion-right{0%{right:-100px;}40%{transform:scaleX(1.1);}100%{transform:scaleX(1);right:0;}}/*变大*/.bigger{animation:bigger800msease-in-outforwards;}@keyframesbigger{0%{}60%{width:81vw;height:400px;border-radius:100px;}80%{transform:scaleX(1.04);}100%{width:81vw;height:400px;border-radius:100px;transform:scaleX(1);}}.bigger::after{display:none;}</style></head><body><divid="iphone14pro"><div></div></div><script>//灵动岛对应domconstbox=document.querySelector(".demo");constanimationList=["longer","divide","fusion","bigger"];box.addEventListener("click",()=>{box.classList.add(animationList[index]);});letindex=0;//每一个动画结束都会触发此事件（包括子元素及不同种类属性动画）box.addEventListener("animationend",(e)=>{if(e.animationName==="divide-right"||e.animationName==="fusion-right"){return;}index++;setTimeout(()=>{if(index<=animationList.length-1){box.classList.add(animationList[index]);}else{index=0;}},800);});</script></body></html>
