代码之家 › 专栏 › 技术社区 › Jake

使用CSS使放大镜遵循椭圆形路径

css-transforms css

Jake · 技术社区 · 10 年前

在下面的提琴中,我想让放大镜顺时针方向沿着椭圆的路径(穿过黑色轮廓)。如何操纵属性以实现此目的?

.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/

1 回复 | 直到 10 年前

A.J. Uppal 10 年前

尝试以下操作:

.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>

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前