仅使用 CSS 创建动态旋转器 入门 动画分解 演示 使用此实现的项目 披萨人计划 感谢阅读 在这篇博客中，我们将创建 封面图片中描绘的 披萨旋转器。
入门 我们将使用下面的披萨片 图像 来生成整个披萨。
HTML 的外壳 将是
<div class= "spinner" >
<img src= "<link to image>" class= "pizza-part pizza-part-1" />
<img src= "<link to image>" class= "pizza-part pizza-part-2" />
<img src= "<link to image>" class= "pizza-part pizza-part-3" />
<img src= "<link to image>" class= "pizza-part pizza-part-4" />
</div>
Enter fullscreen mode
Exit fullscreen mode
动画分解 任何复杂的动画都可以分解成一系列简单的动画。让我们将动画分解成相应的组件：
每片披萨都用来 opacity营造淡入淡出的印象 每片披萨也用于 transform（ rotate移动到所需位置以生成完整披萨的外观）和 translate（生成从披萨上取下披萨片的动画） 主容器围绕其中心旋转，使其看起来更加动感
旋转器的 CSS 将 是
.spinner {
width : 160px ;
height : 160px ;
margin : 0 ;
display : flex ;
flex-wrap : wrap ;
animation : spin 4s linear infinite ;
} .pizza-part {
width : 80px ;
height : 80px ;
} .pizza-part-1 {
animation : pizza1 2s ease-in-out infinite ;
} .pizza-part-2 {
animation : pizza2 2s ease-in-out infinite ;
} .pizza-part-3 {
animation : pizza4 2s ease-in-out infinite ;
} .pizza-part-4 {
animation : pizza3 2s ease-in-out infinite ;
} /* animations */
@keyframes spin {
0 % {
transform : rotateZ ( 0deg );
}
100 % {
transform : rotateZ ( 360deg );
}
} @keyframes pizza1 {
0 % {
transform : translate ( -20% , -20% );
opacity : 0 ;
}
10 % {
transform : translate ( 0% , 0% );
opacity : 1 ;
}
50 % {
transform : translate ( 0% , 0% );
opacity : 1 ;
}
60 % {
transform : translate ( -20% , -20% );
opacity : 0 ;
}
100 % {
transform : translate ( -20% , -20% );
opacity : 0 ;
}
} @keyframes pizza2 {
0 % {
transform : translate ( 20% , -20% ) rotateZ ( 90deg );
opacity : 0 ;
}
10 % {
transform : translate ( 20% , -20% ) rotateZ ( 90deg );
opacity : 0 ;
}
20 % {
transform : translate ( 0% , 0% ) rotateZ ( 90deg );
opacity : 1 ;
}
60 % {
transform : translate ( 0% , 0% ) rotateZ ( 90deg );
opacity : 1 ;
}
70 % {
transform : translate ( 20% , -20% ) rotateZ ( 90deg );
opacity : 0 ;
}
100 % {
transform : translate ( 20% , -20% ) rotateZ ( 90deg );
opacity : 0 ;
}
} @keyframes pizza3 {
0 % {
transform : translate ( 20% , 20% ) rotateZ ( 180deg );
opacity : 0 ;
}
20 % {
transform : translate ( 20% , 20% ) rotateZ ( 180deg );
opacity : 0 ;
}
30 % {
transform : translate ( 0% , 0% ) rotateZ ( 180deg );
opacity : 1 ;
}
70 % {
transform : translate ( 0% , 0% ) rotateZ ( 180deg );
opacity : 1 ;
}
80 % {
transform : translate ( 20% , 20% ) rotateZ ( 180deg );
opacity : 0 ;
}
100 % {
transform : translate ( 20% , 20% ) rotateZ ( 180deg );
opacity : 0 ;
}
} @keyframes pizza4 {
0 % {
transform : translate ( -20% , 20% ) rotateZ ( -90deg );
opacity : 0 ;
}
30 % {
transform : translate ( -20% , 20% ) rotateZ ( -90deg );
opacity : 0 ;
}
40 % {
transform : translate ( 0% , 0% ) rotateZ ( -90deg );
opacity : 1 ;
}
80 % {
transform : translate ( 0% , 0% ) rotateZ ( -90deg );
opacity : 1 ;
}
90 % {
transform : translate ( -20% , 20% ) rotateZ ( -90deg );
opacity : 0 ;
}
100 % {
transform : translate ( -20% , 20% ) rotateZ ( -90deg );
opacity : 0 ;
}
}
Enter fullscreen mode
Exit fullscreen mode
演示
使用此实现的项目 披萨人
网络应用程序： http://pizza-man-61510.firebaseapp.com/
披萨人计划 一个在线订购披萨的电子商务网站
演示 注意： 演示中展示的功能并不详尽。演示中仅展示核心功能。
使用的工具
React：创建单页应用程序 React-Router：用于路由 Redux：用于状态管理 Firebase：作为数据库
Firebase 设置 您需要创建一个 Firebase 配置文件，将 Firebase 设置保存在 /src/firebase/config.js以下路径中：
const firebaseConfig = {
apiKey : "API-KEY" ,
authDomain : "AUTH-DOMAIN.firebaseapp.com" ,
databaseURL : "DATABASE-URL.firebaseio.com" ,
projectId : "PROJECT-ID" ,
storageBucket : "STORAGE-BUCKET.appspot.com" ,
messagingSenderId : "MESSAGING-SENDER-ID" ,
appId : "APP-ID" ,
measurementId : "MEASUREMENT-ID" ,
} ;
export default firebaseConfig ;
Enter fullscreen mode
Exit fullscreen mode
数据需要按照以下格式存储：
[
{
name : "CATEGORY NAME" ,
items : [
{
desc : "PIZZA DESCRIPTION" ,
id : "ID" ,
img : "IMAGE LINK" ,
name …
Enter fullscreen mode
Exit fullscreen mode
感谢阅读 需要一位 顶级软件开发自由职业者 来解决你的开发难题吗？在 Upwork上联系我
想看看我正在做什么吗？查看我的 个人网站 和 GitHub
想联系我吗？请在LinkedIn 上联系我
关注我的博客， 每两周 在 Medium上获取最新资讯
常问问题
这些是我经常收到的一些问题。希望这个 常见问题解答 部分能解决您的问题。
我是初学者，该如何学习前端 Web 开发？ 可以参考以下文章：
前端流行语 前端开发路线图 前端项目构想 从初学者过渡到中级前端开发人员
你能指导我吗？ 抱歉，我工作已经很忙了，没时间指导任何人。
文章来源：https://dev.to/ruppysuppy/create-dynamic-spinners-only-using-css-34dh 
