问题描述
您好，我想要这个令人发抖的动画或url上的悬停效果。 请指导我。任何参考将不胜感激。 演示 （在地图上将鼠标悬停在任何国家/地区上，并观察其他小圆圈的移动。
1楼
vanburen
1
2015-07-26 07:06:20
非常简单的示例：有许多处理动画的库> / /
body { background-color: #fff; text-align: center; margin: 50px } .wrapper { top: 100px; left: 50%; text-align: center; display: inline-block; } .shake { display: inline-block; position: relative; } .circle { border: 4px solid #f00; background: #f00; height: 150px; width: 150px; border-radius: 50%; margin: 0px -10px; } @-webkit-keyframes circled { 0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); } 20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); } 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); } 50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); } 60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); } 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); } 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); } 90% { -webkit-transform: translate(2px, 2px) rotate(0deg); } 100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); } } .shake:hover, .shake:focus { cursor: pointer; -webkit-animation-name: circled; -webkit-animation-duration: 0.9s; -webkit-transform-origin: 50% 50%; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; }
<div class="wrapper"> <div class="circle shake"></div> <div class="circle shake"></div> <div class="circle shake"></div> </div>
2楼
RamRaider
0
2015-07-26 06:56:22
这是使用Flash而不是CSS和jQuery完成的-因此，除非您了解Flash或可以找到fla文件，否则这将不是一件容易的事。