CSS是一种用来描述网站布局和样式的语言,这种语言可以使用许多不同的属性和值来创造各种各样的效果。一个大家熟知的应用中,iOS系统使用了一种非常流行的加载动画来显示应用程序正在加载内容,而我们可以使用CSS来仿制这种效果。
.loader { width: 50px; height: 50px; margin: 0 auto; position: relative; animation: spinner 1s infinite linear; } .loader:before, .loader:after { content: ""; position: absolute; border-radius: 50%; } .loader:before { width: 20px; height: 20px; left: 5px; top: 5px; background-color: #007AFF; animation: bouncer 1s infinite ease-in-out; } .loader:after { width: 10px; height: 10px; right: 5px; top: 5px; background-color: #FFF; animation: bouncer 1s infinite ease-in-out 0.2s; } @keyframes spinner { 0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); } 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); } } @keyframes bouncer { 0%, 100% { transform: scale(0); -webkit-transform: scale(0); } 50% { transform: scale(1); -webkit-transform: scale(1); } }
上面的代码生成了一个div元素,宽高都为50px,其中包含两个动画元素。这些元素都在不断地运行两个CSS动画,其中一个元素在蓝色背景上弹跳,而另一个元素在白色背景上弹跳。
如果你想调整动画细节,可以根据需要调整这些元素的参数。例如,你可以调整元素大小、颜色、位置等。这个技术可以为你的应用程序增添一份专业感,并显示出你对用户体验的关注。