Прожектор с CSS - PullRequest
Новая
       28

Прожектор с CSS

0 голосов
/ 27 ноября 2018

У меня есть круг прожектора, я пытаюсь разместить его в левом нижнем углу экрана и заставить оверлей на всю высоту и ширину, но он не работает идеально, вот код: 

.spotlight{
display: block;
  float: left;
  background: radial-gradient(10px 10px at 110px 30px, transparent 0, transparent 60px, rgba(0, 0, 0, 0.5) 65px);
  background: -moz-radial-gradient(10px 10px at 400px 30px, transparent 0, transparent 95px, rgba(0, 0, 0, 0.5) 100px);
  background: -webkit-radial-gradient(10px 10px at 400px 30px, transparent 0, transparent 95px, rgba(0, 0, 0, 0.5) 100px);
  background: -o-radial-gradient(10px 10px at 400px 30px, transparent 0, transparent 95px, rgba(0, 0, 0, 0.5) 100px);
  height: 100%;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 100000000;
  bottom: 0px;
  }
<div class="spotlight"></div>

Ответы [ 3 ]

0 голосов
/ 27 ноября 2018

Вы можете получить его в левом нижнем углу, изменив радиальный градиент сразу после того, как там написано at.Первое измерение показывает, как далеко вы хотите слева, а второе контролирует, как далеко от вершины вы хотите его.Вы можете заменить измерения пикселей на left или bottom, чтобы получить прожектор в нижнем левом углу.

Вот рабочий пример: https://jsfiddle.net/71w4jy9c/

Если вы хотите получить егочтобы отобразить снизу вверх, вы можете использовать calc(100% - PIXELS_FROM_THE_BOTTOM) вместо bottom.

Это CSS, который я использовал, чтобы заставить его работать: 

.spotlight {
  display: block;
  background: radial-gradient(10px 10px at 30px bottom, transparent 0, transparent 60px, rgba(0, 0, 0, 0.5) 65px);
  height: 100%;
  position: absolute;
  width: 100%;
  bottom: 0;
}
0 голосов
/ 27 ноября 2018

Вместо использования "при 110px 30px" попробуйте использовать "при 110px calc (100% - 110px)" .Это должно поместить ваш градиентный прожектор в 110 пикселей слева и 110 пикселей снизу независимо от размера экрана.

0 голосов
/ 27 ноября 2018

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

слева должно быть 65px, а сверху 100% - 65px. (вы можете заменить 65px на любое значение) 

.spotlight{
  background: radial-gradient(10px 10px at 65px calc(100% - 65px), transparent 0, transparent 60px, rgba(0, 0, 0, 0.5) 65px);
  height: 100%;
  pointer-events: none;
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  z-index: 100000000;
  bottom: 0px;
  }
<div class="spotlight"></div>

Вы также можете упростить это так: 

.spotlight{
  background: radial-gradient(circle at 65px calc(100% - 65px), transparent 60px, rgba(0, 0, 0, 0.5) 65px);
  height: 100%;
  pointer-events: none;
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  z-index: 100000000;
  bottom: 0px;
  }
<div class="spotlight"></div>
...