我想要动画几何效果,例如徽标(黄色)在我的徽标周围移动。
答案 0 :(得分:0)
我不认为Jquery会是你需要的,你的意思是实际构建那个形状,使其由浏览器呈现而不是通过图像呈现?您可以通过CSS获得类似的东西。它可能不会完全正确。
您可以在此处构建一些CSS形状示例:
https://css-tricks.com/examples/ShapesOfCSS/
但是,最好的选择是使用图像编辑器制作图像并将其作为图像在线。
答案 1 :(得分:0)
我想要像 this fiddle
这样的内容<div class="logo">
<div class="circle"></div>
<img src="http://cdns2.freepik.com/image/th/318-31882.png" />
</div>
*{
box-sizing:border-box;
}
.logo{
width:150px;
height:150px;
position:relative;
}
.circle{
position:absolute;
width:100%;
height:100%;
border:10px solid #000;
border-radius:100%;
}
.logo img{
width:70px;
display:inline-block;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
vertical-align:middle;
}
.circle {
-moz-animation: rotate 10s infinite 0s;
-webkit-animation: rotate 10s infinite 0s;
animation: rotate 10s infinite 0s;
}
@-webkit-keyframes rotate{
0% {
-moz-transform: rotate3d(50,50,0,50deg) rotate(90deg);
-webkit-transform: rotate3d(50,50,0,50deg) rotate(90deg);
transform: rotate3d(50,50,0,50deg) rotate(90deg);
}
50% {
-moz-transform: rotate3d(0,0,0,0deg) rotate(180deg);
-webkit-transform: rotate3d(0,0,0,0deg) rotate(180deg);
transform: rotate3d(0,0,0,0deg) rotate(180deg);
}
100% {
-moz-transform: rotate3d(-50,-50,0,-50deg) rotate(-90deg);
-webkit-transform: rotate3d(-50,-50,0,-50deg) rotate(-90deg);
transform: rotate3d(-50,-50,0,-50deg) rotate(-90deg);
}
}