代码拉取完成,页面将自动刷新
?> 背景知识: animation, transition, transform, animation-delay
<script v-pre type="text/x-template" id="circular-smooth"> <style> main { width: 100%; height: 529px; display: flex; flex-direction: column; align-items: center; } .path { width: 300px; height: 300px; border-radius: 50%; margin: 100px auto; position: relative; display: flex; border: 1px solid #b4a078; } .logo { width: 52px; margin: auto; background: #FFF; } .avatar { width: 50px; position: absolute; top: 124px; left: 124px; animation: circular-smooth-spin 7.5s infinite linear; animation-play-state: running; } .avatar > span { font-weight: 500; position: absolute; white-space: nowrap; top: -50%; left: 50%; padding: 3px 12px; opacity: 0; transform: scale(0); transition: opacity, transform .8s; transform-origin: 0 bottom; } .avatar > img { width: inherit; border-radius: 50%; overflow: hidden; } .path:hover .avatar { animation-play-state: paused; } .path:hover .avatar > span { opacity: 1; transform: scale(1); transition: opacity, transform .8s; } .avatar:nth-of-type(2){ animation-delay: -1.5s; } .avatar:nth-of-type(3){ animation-delay: -3s; } .avatar:nth-of-type(4){ animation-delay: -4.5s; } .avatar:nth-of-type(5){ animation-delay: -6s; } @keyframes circular-smooth-spin { from { transform: rotate(0turn) translateY(-124px) rotate(1turn) } to { opacity: 1; transform: rotate(1turn) translateY(-124px) rotate(0turn) } } </style>“transform-origin 只是一个语法糖而已。实际上你总是可以用 translate() 来代替它。” [——James Anderson](/Aryeh Gregor)
!> 如有疑问,后续会添加细节的讲解~
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。