在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5/ css3動畫如何做到 自身不轉(zhuǎn) 而是 圍繞著一個圓轉(zhuǎn)圈

css3動畫如何做到 自身不轉(zhuǎn) 而是 圍繞著一個圓轉(zhuǎn)圈

clipboard.png

這個是兩張圖片疊加在一起的
人頭.png
放大鏡.png

放大鏡 div 在人頭 div 上轉(zhuǎn)動

=================

注意： 要讓那個放大鏡的 把手總是朝向左下角 ，然后圍繞這個人頭（藍(lán)色圓）的邊緣轉(zhuǎn)動

回答
編輯回答
陌璃

transform-origin了解下這個屬性

2017年12月16日 16:49
編輯回答
不二心

放大鏡外套一層dom,外層和放大鏡都做旋轉(zhuǎn)動畫，方向相反

.a{
    width:300px;
    height:300px;
    margin:100px;
    position:relative;
    background-color:#eee;
    animation:rond 2s linear infinite;
    border-radius:50%;
}
.b{
    width:100px;
    height:100px;
    position:absolute;
    left:0;
    top:0;
    background-color:#ccc;
    animation:rond2 2s linear infinite;
}
@keyframes rond {
  0% {transform : rotate(0deg);}
  100% {transform : rotate(360deg);}
}
@keyframes rond2 {
  0% {transform : rotate(360deg);}
  100% {transform : rotate(0deg);}
}
<div class="a">
    <div class="b"></div>
</div>
2017年6月5日 05:38