第一类滚轮.box{position:relative;显示：-webkit-box；显示：-ms-flexbox；显示：弹性；-webkit-box-pack：中心；-ms-flex-pack：中心；证明内容：居中；-webkit-box-align：居中；-ms-flex-align:居中；对齐项目：居中；边框：4px实心#ccc；边界半径：100%；高度：40px；宽度：40px；字体大小：14px；字体粗细：粗体；颜色：#EA4C89；顶部：12px；保证金：0；-webkit-box-sizing：初始；box-sizing:initial;}.box::before{content:"";位置：绝对；左：50%；顶部：50%；左边距：-24px；边距顶部：-24px；显示：块；border:4pxsolidrgba(0,0,0,0);边框顶部颜色：#000；边界半径：100%；宽度：47px；高度：48px；-webkit-动画：mx1无限2s轻松；动画：mx1无限2s轻松；}@-webkit-keyframesmx1{0%{-webkit-transform:rotate(0deg);变换：旋转（0度）；}100%{-webkit-transform:rotate(deg);变换：旋转（360度）；}}@keyframesmx1{0%{-webkit-transform:rotate(0deg);变换：旋转（0度）；}100%{-webkit-transform:旋转(360deg);变换：旋转（360度）；}}第二种环境.box{position:relative;显示：-webkit-box；显示：-ms-flexbox；显示：弹性；-webkit-box-pack：中心；-ms-flex-pack：中心；证明内容：居中；-webkit-box-align：居中；-ms-flex-align:居中；对齐项目：居中；边界半径：46px；高度：49px；宽度：49px；背景：rgb（27、27、60）；字体大小：14px；字体粗细：粗体；顶部：9px；保证金：0；-webkit-box-sizing：初始；box-sizing:initial;}.box::before,.box::after{content:"";位置：绝对；左：52%；顶部：49%；左边距：-24px；边距顶部：-24px；宽度：47px；高度：48px；背景：RGB（51、149、230）；边界半径：100%；z-指数：-1；-webkit-transform:translateY(-2px);-ms-transform:translateY(-2px);transform:translateY(-2px);}.box::before{-webkit-animation:mx1infinite3slinear;动画：mx1无限3s线性；}.box::after{-webkit-动画：mx1无限2s线性；动画：mx1无限2s线性；}@-webkit-keyframesmx1{0%{-webkit-transform:rotate(0deg)translate(-2px);变换：旋转（0deg）平移（-2px）；}100%{-webkit-transform:rotate(deg)translate(-2px);变换：旋转（360度）平移（-2px）；}}@keyframesmx1{0%{-webkit-transform:rotate(0deg)translate(-2px);变换：旋转（0deg）平移（-2px）；}100%{-webkit-transform:rotate(360deg)translate(-2px);变换：旋转（360度）平移（-2px）；}}
