Как увеличить размер объекта вверх и сохранить его форму?

ProgramBox

Как увеличить размер объекта вверх и сохранить его форму?

Post author:admin
Запись опубликована:22 марта, 2023
Post category:Вопросы по программированию

#html #css #css-position

#HTML #css #css-позиция

Вопрос:

 .tank {
    position:relative;
    width:12px;
    height:18px;
    background-color:#444;
}
.tank:before {
    width: 12px;
    height: 5px;
    background-color:#666;
    -moz-border-radius: 6px / 2.5px;
    -webkit-border-radius: 6px / 2.5px;
    border-radius: 6px / 2.5px;
    position:absolute;
    content:'';
    top:-2.5px;
}
.tank:after {
    width: 12px;
    height: 5px;
    background-color:#444;
    -moz-border-radius: 6px / 2.5px;
    -webkit-border-radius: 6px / 2.5px;
    border-radius: 6px / 2.5px;
    position:absolute;
    content:'';
    top:15.5px;
    box-shadow:0px 0px 10px rgba(0, 0, 0, 0.75);
    z-index: -1;
}

 
 </style>

когда я добавляю его на свою карту, он выдает следующее:

когда я пытаюсь увеличить размер с помощью CSS, размер корректируется в обратном направлении (он идет вниз, а не вверх).

Я попытался исправить это с помощью position и the height , но все равно получил тот же результат.

Вопросы:

Как я могу настроить его вверх
Поддерживайте цилиндр в той же форме (основание и основание top должны быть закруглены).
Возможно ли иметь «динамическую настройку», скажем <div class="tank-20"></div> (означает 20 height ) и <div class="tank-80"></div> (= 80 дюймов height ).

jsfiddle

1. 1) Что касается использования CSS для настройки размера «вверх»: если вы намерены увеличить числовое значение и ожидаете, что оно поднимется до вершины, вам, вероятно, придется преобразовать резервуар на 180 градусов. 2) Чтобы сохранить форму и соотношение кривых и линий без изменений, вы также можете попробовать реализовать это с помощью SVG 3) У вас может быть динамическая настройка, что означало бы необходимость использования Javascript

2. @viditkothari используй мой jsfiddle — посмотри, работает ли он. (это не так)

3. правда, это не

4. Он увеличивается вниз, потому что ваше позиционирование указывает явное top значение. Если вы разместите его, используя bottom вместо этого, увеличение высоты будет расти вверх. Другим вариантом было бы использовать transform: scaleY для увеличения его масштаба с помощью источника преобразования внизу.

Ответ №1:

Вы можете обновить свой код, как показано ниже:

Показать фрагмент кода

 .tank {
  position: relative;
  display:inline-block; /* this will make them stay at the bottom */
  margin: 40px 10px;
  width: 120px;
  height: var(--w,180px);
  background-color: #444;
  border-radius: 60px / 25px;
}

.tank:before,
.tank:after{ 
  border-radius: inherit;
  position: absolute;
  content: '';
  width:100%;
  height: 50px;
}
.tank:before {
  background-color: #666;
  top: 0;
}

.tank:after {
  background-color: #444;
  bottom:0;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
  z-index: -1;
}

 <div class="tank"></div>
<div class="tank" style="--w:100px"></div>
<div class="tank" style="--w:200px"></div>
<div class="tank" style="--w:80px"></div>

Еще одна идея. Наведите курсор, чтобы увидеть эффект увеличения:

 .tank {
  position: relative;
  display:inline-block;
  margin: 40px 10px;
  width: 120px;
  /* big height here to illustarte, 
    you don't need it if you will place your element using position:absolute */
  height: 300px; 
}

.tank:before,
.tank:after{ 
  position: absolute;
  content: '';
  width:100%;
  height: 50px;
  bottom: 0;
  border-radius: 60px / 25px;
}
.tank:after {
  background: 
    radial-gradient(50% 50%,#666 98%,transparent 100%) top/100% 50px no-repeat, 
    #444;
  bottom:25px;
  height:var(--w,180px);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  transition:0.5s;
}

.tank:before {
  background-color: #444;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
}

.tank:hover::after {
  height:calc(1.5*var(--w,180px));
}

 <div class="tank"></div>
<div class="tank" style="--w:100px"></div>
<div class="tank" style="--w:200px"></div>
<div class="tank" style="--w:80px"></div>

1. A спасибо. Понял. Что касается вопроса, что, если бы я хотел также изменить цвет фона с помощью стиля. Как бы вы отправили другой параметр? например, style=»—w: 100px amp; background-color = #444″ ? Еще раз спасибо!

2. @ProcolHarum style="--w:100px;--c:red"

3. и фактическим css будет: background-color: * var (—c) ?

Ответ №2:

Когда вы увеличиваете значение, height .tank вы top .tank:after также должны увеличить свойство at из-за того, что вы не можете увеличить высоту .tank и размер, добавленный вверх, .tank единственным решением для этого является использование right , left , top и bottom для настройки того, где вы .tank должны быть, просто посмотрите пример того, как я увеличил height .tank значение, которое все еще естьформа цилиндра

Я увеличиваю height .tank от 180px до 225px

и сверху .tank:after от 155px до 200px

Пример

 .tank {
  position: relative;
  margin: 50px;
  width: 120px;
  height: 225px;
  background-color: #444;
}

.tank:before {
  width: 120px;
  height: 50px;
  background-color: #666;
  -moz-border-radius: 60px / 25px;
  -webkit-border-radius: 60px / 25px;
  border-radius: 60px / 25px;
  position: absolute;
  content: '';
  top: -25px;
}

.tank:after {
  width: 120px;
  height: 50px;
  background-color: #444;
  -moz-border-radius: 60px / 25px;
  -webkit-border-radius: 60px / 25px;
  border-radius: 60px / 25px;
  position: absolute;
  content: '';
  top: 200px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
  z-index: -1;
}

 <div class="tank"></div>