CSS3实现一个旋转的花朵

标签：nta   tps   https   oct   完整   contain   before   translate   运行    要效果图如下： 实现原理：其实很简单，就是中间的圆圈定位在中间，其他的6个圆圈，进行不同的绝对定位，然后进行旋转！代码： CSS实现的旋转的花朵 *{ margin: 0; padding: 0; } *,*:before,*:after{ box-sizing: border-box; } html body{ height: 100%; } .container { background: #f39c12; height: 300px; position: relative; } .loader{ position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .loader .spinnerBlock{ -webkit-animation: rotate 1000ms linear infinite; animation: rotate 1000ms linear infinite; -webkit-transform-origin: center; transform-origin: center; display: block; width: 50px; height: 50px; } .loader span{ display: block; border: 2px solid #fff; border-radius: 50%; height: 100%; width: 100%; position: absolute; top: 0; left: 0; } .loader soan:nth-child(1){ border-color: #eee; } .loader span:nth-child(2){ left: -18px; top: 10px; } .loader span:nth-child(3){ left: -18px; top: -10px; } .loader span:nth-child(4){ left: 0; top: -18px; } .loader span:nth-child(5){ left: 18px; top: -10px; } .loader span:nth-child(6){ left: 18px; top: 10px; } .loader span:nth-child(7){ left: 0; top: 18px; } @-webkit-keyframes rotate { from{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } to{ -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate { from{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } to{ -webkit-transform: rotate(360deg); transform: rotate(360deg); } } 运行代码便能看到完整的旋转效果！ CSS3实现一个旋转的花朵标签：nta   tps   https   oct   完整   contain   before   translate   运行   原文地址：https://www.cnblogs.com/baimeishaoxia/p/12036497.html