Question

我有一个蛋形的div元素，旋转了140度。

HTML：

<div id="egg-container">
    <div id="egg-blue" class="egg egg-large"></div>
</div>

CSS：

#egg-container {
    width: 150px;
    height: 150px;
    position: relative;
    border-radius: 50%;
    border: 1px solid red;
    margin: 0 auto;
}

.egg {
    position: absolute;
    background-image: radial-gradient(#00F9AF, #0054FD 70%);
    box-shadow: -2px -2px 20px rgba(255, 255, 255, 0.5) inset, 0px 0px 2px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    overflow: hidden;
    -webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease;
    -o-transition: all 1.0s ease;
    transition: all 1.0s ease;
    height: 10px;
    width: 10px;
    top: 75px;
}

#egg-blue {
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    transform: rotate(140deg);
    opacity: 0.8;
}

.egg-lg {
    top: 25px;
    right: -25px;
    height: 160px;
    width: 140px;
}

.egg-md {
    /* How to scale down correctly? */
}

.egg-sm {
    /* How to scale down correctly? */
}

.egg-xs {
    /* How to scale down correctly? */
}

我的目标是利用JavaScript简单地在大，中，小和超小型之间切换类。我知道如何使用切换课程。

但是当类在-lg，-md，-sm，-xs之间发生变化时，我无法正确设置样式。它看起来太活泼，波涛汹涌等等。

另一种想象代码之外的方法是花开。当我用JavaScript切换类时，这基本上就是我想要完成的。请注意，红色圆圈样式可用作视觉中心。

我希望你看到的那个鸡蛋保持其纵横比及其轮换。根据应用的类选择器，简单地将元素缩放或缩小。

我认为目前问题的根源在于我对像素宽度和高度进行了硬编码。

如果您有任何想法，请加入。

这是小提琴：https://jsfiddle.net/excqrun0/12/

谢谢。

Answer 1

您可以使用transform : scale(0.5);缩小元素：https://www.w3schools.com/css/css3_2dtransforms.asp

并且您可以将其添加到之前的transform transform: rotate(140deg) scale(1);，将宽度和高度以及其他内容移至id egg-blue并使用新内容填充类transform，并使用javascript在类之间切换：

＆＃13;

var egg = document.getElementById('egg-blue'); 	
    
document.getElementById('big').addEventListener('click', function(){	
    egg.classList.add("egg-large");
    egg.classList.remove("egg-medium");
    egg.classList.remove("egg-small");
});

document.getElementById('medium').addEventListener('click', function(){	
    egg.classList.add("egg-medium");
    egg.classList.remove("egg-large");
    egg.classList.remove("egg-small");
});

document.getElementById('small').addEventListener('click', function(){	
    egg.classList.add("egg-small");
    egg.classList.remove("egg-large");
    egg.classList.remove("egg-medium");
});

＆＃13;

#egg-container {
    width: 150px;
    height: 150px;
    position: relative;
    border-radius: 50%;
    border: 1px solid red;
    margin: 0 auto;
}

.egg {
    position: absolute;
    background-image: radial-gradient(#00F9AF, #0054FD 70%);
    box-shadow: -2px -2px 20px rgba(255, 255, 255, 0.5) inset, 0px 0px 2px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    overflow: hidden;
    -webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease;
    -o-transition: all 1.0s ease;
    transition: all 1.0s ease;
    height: 10px;
    width: 10px;
    top: 75px;
}
                
#egg-blue {
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  opacity: 0.8;
  top: 25px;
  right: -25px;
  height: 160px;
  width: 140px;
}

.egg-large {
  transform: rotate(140deg) scale(1);
}

.egg-medium {
  transform: rotate(140deg) scale(0.7);
}

.egg-small {
  transform: rotate(140deg) scale(0.4);
}

#buttons{
    position: absolute;
    bottom: 0;
}

＆＃13;

<div id="egg-container">
    <div id="egg-blue" class="egg egg-large"></div>
</div>

<div id="buttons">
    <button id="big"> BIG </button>
    <button id="medium"> MEDium </button>
    <button id="small"> small </button>    
 </div>

＆＃13;

缩小border-radius div元素并保持相同的位置，蛋形

1 个答案: