使放大镜使用CSS跟随椭圆形路径

2023年3月12日 200次阅读

在下面的小提琴中,我想让放大镜沿顺时针方向跟随椭圆形的路径(穿过黑色轮廓).我如何操纵属性来实现这一目标？

.oval{
  background:url(http://s8.postimg.org/wozw0oq9x/oval.png);
  width:743px;
  height:305px;
  margin-top:20px;
  margin-left:20px;
}

.glass {
	display:block;
    background: url(http://s29.postimg.org/5i2f94m83/magnifying_glass.png);
	width:100px;
	height:83px;
  left: 487px;
    top: -198px;
  
    position: relative;

    -webkit-animation: myOrbit 4s linear infinite; /* Chrome, Safari 5 */
       -moz-animation: myOrbit 4s linear infinite; /* Firefox 5-15 */
         -o-animation: myOrbit 4s linear infinite; /* Opera 12+ */
            animation: myOrbit 4s linear infinite; /* Chrome, Firefox 16+, 
                                                      IE 10+, Safari 5 */   
}

@keyframes myOrbit {
    0%  { transform: rotate(0deg) translateX(5px) translateY(120px) rotate(0deg) scale(1); }
    25%  { transform: rotate(90deg) translateX(5px) translateY(120px) rotate(-90deg) scale(.75); }
    50%  { transform: rotate(180deg) translateX(5px) translateY(120px) rotate(-180deg) scale(.60); }
    75%  { transform: rotate(270deg) translateX(5px) translateY(120px) rotate(-270deg) scale(.75); }
    100%  { transform: rotate(360deg) translateX(5px) translateY(120px) rotate(-360deg) scale(1); }
}
<div class="oval">
</div>

<div class="glass">
</div>

https://jsfiddle.net/szq4336q/2/

最佳答案 尝试以下内容：

.deform  {
    width: 200px;
    height: 200px;
    -webkit-transform: scaleX(3);
    background-color: lightblue;
    left: 270px;
    position: absolute;
    top: 50px;
    border-radius: 50%;
}

.rotate {
    width: 100%;
    height: 100%;
    -webkit-animation: circle 10s infinite linear;    
    -webkit-transform-origin: 50% 50%;
}

.counterrotate {
    width: 50px;
    height: 50px;
    -webkit-animation: ccircle 10s infinite linear;    
}
    
.inner {
    width:100px;
	height:83px;
    position: absolute;
    left: -20px;
    top: 0px;
    background: url(http://s29.postimg.org/5i2f94m83/magnifying_glass.png);
    display: block;
    -webkit-transform: scaleX(0.33);
}

@-webkit-keyframes circle {
    from {-webkit-transform: rotateZ(0deg)}
    to {-webkit-transform: rotateZ(360deg)}
}

@-webkit-keyframes ccircle {
    from {-webkit-transform: rotateZ(360deg)}
    to {-webkit-transform: rotateZ(0deg)}
}
<div class="deform">
<div class="rotate">
<div class="counterrotate">
<div class="inner">
</div>
</div>
</div>
</div>
点赞