苹果的操作系统深受很多用户的喜爱,其中的安装动画更是经典之作。如果你想为自己的网站或应用添加一个类似的动画效果,不妨试试使用CSS来实现。
/* 创建初始样式 */ .install { width: 80px; height: 80px; border-radius: 50%; background: #999; position: relative; overflow: hidden; } .install:before { content: ''; display: block; width: 100%; height: 100%; border-radius: 50%; border: 5px solid #fff; position: absolute; top: 0; left: 0; animation: rotate 2s linear infinite; } /* 创建旋转动画 */ @keyframes rotate { from { transform: rotateZ(0); } to { transform: rotateZ(360deg); } } /* 创建进度条 */ .install:after { content: ''; display: block; width: 100%; height: 100%; border-radius: 50%; border: 5px solid transparent; border-top-color: #0a84ff; position: absolute; top: 0; left: 0; animation: progress 5s linear; } /* 创建进度动画 */ @keyframes progress { 0% { transform: rotateZ(0); } 25% { transform: rotateZ(90deg); } 50% { transform: rotateZ(180deg); } 75% { transform: rotateZ(270deg); } 100% { transform: rotateZ(360deg); } }
以上代码将一个安装动画分别分成了三个部分:初始样式、旋转动画、进度条和进度动画。通过创建CSS动画,我们可以将三个部分合并在一起,让动画更加连续和流畅。
你可以根据自己的需要来调整动画的时长、颜色等属性,使它更符合你的设计需求。由于这个动画效果比较简单,所以非常适合初学者练手。