这篇文章上次修改于 1589 天前,可能其部分内容已经发生变化,如有疑问可询问作者。
PS:鼠标移上去会有动画效果,你可以试着玩玩哦~
本标志的版权归缤奇(Binkic)团队及其设计者保罗所有,请不要尝试侵权使用。
HTML:
<div class="out">
<div class="in">
<div class="round"></div>
</div>
</div>
CSS:
.out{
width: 200px;
height: 200px;
position: relative;
background: #3498db;
border-radius: 0 100px 100px 100px;
}
.out:hover{
animation: Animate 3s infinite;
}
.in{
width: 120px;
height: 120px;
background: #fff;
position: absolute;
top: calc(50% - 60px);
left: calc(50% - 60px);
border-radius: 100px 100px 0 100px;
}
.round{
width: 50px;
height: 50px;
position: absolute;
background: #3498db;
border-radius: 100%;
top: calc(50% - 25px);
left: calc(50% - 25px);
}
@keyframes Animate {
0% {
transform: translateX(0) scale(0.6) rotate(0);
}
50% {
transform: translateX(300px) scale(0.6) rotate(90deg);
}
100% {
transform: translateX(0) scale(0.6) rotate(0);
}
}
只有一条评论 (QwQ)
wow,让人眼前一亮的代码