CSS3转圈动画可以让网页更加生动和有趣,引起用户的关注和兴趣。以下是一些CSS3转圈动画的代码示例:
/* CSS3旋转动画 */ .rotate { animation: rotate 2s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* CSS3圆点环绕动画 */ .circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .dot { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: #000; animation: orbit 2s linear infinite; } @keyframes orbit { from { transform: translate(-200px) rotate(0deg) translate(200px); } to { transform: translate(-200px) rotate(360deg) translate(200px); } } /* CSS3车轮动画 */ .wheel { position: relative; width: 200px; height: 200px; border-radius: 50%; background: #ccc; } .spoke { position: absolute; top: 50%; left: 50%; width: 4px; height: 90px; margin: -45px 0 0 -2px; border-radius: 50%; box-shadow: 0 0 10px 2px #000; transform-origin: bottom center; animation: rotate 2s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
以上是一些简单的CSS3转圈动画示例,通过在网页中应用这些动画,可以让你的网站更加动态和有趣,增强用户体验。