Как добавить круглую тень под прозрачный GIF-файл? - PullRequest
Новая
       26

Как добавить круглую тень под прозрачный GIF-файл?

0 голосов
/ 01 января 2019

Я построил GIF для своего сайта, я добавил немного тени, но это не имеет никакого эффекта.Как я могу добавить тень моего прозрачного файла GIF на мой сайт?

Вот пример;Я хочу подать заявку в моем файле GIF.Этот файл GIF является демо. 

.drop:before {
  left: -5px;
  	top: 167px;
  	width: 280px;
  	height: 4px;
  	background: #aaa;

  	border-radius: 140px / 2px;
  	box-shadow: 0 0 5px #aaa, 0 0 10px #888, 0 0 15px #666;
}

.drop:after {
  left: 8px;
  	top: 168px;
  	width: 255px;
  	height: 2px;
  	background: #666;

  	border-radius: 125px / 1px;
  	box-shadow: 0 0 5px #444, 0 0 8px #333, 0 0 10px #666;
}

.animated {
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-duration: 1s;
    animation-fill-mode: both;
}
    <div class=" col-md-6 " id="first">
             <div class="drop animated  text-center d-none d-md-block images" >
                  <img src="https://i5.walmartimages.com/asr/81434355-3e69-4cea-860f-db92df6562be_1.6f35432cf22ea0c0cefd77ad80a7007f.gif?odnHeight=72&odnWidth=72&odnBg=FFFFFF" class=" responsive peepphone" />
                  

             </div>


          </div>

Ответы [ 2 ]

0 голосов
/ 01 января 2019

Ваши псевдоселекторы не отображаются, потому что вам нужно было добавить content: ''; к вашим классам и расположить их, вам нужно position: absolute

Теперь, когда они отображаются, вам нужно поиграть с позиционированием еще немного

.drop:before {
  content: '';
  position: absolute;

  left: 40%;
  top: 949px;
  width: 380px;
  height: 4px;
  background: #aaa;

  border-radius: 140px / 2px;
  box-shadow: 0 0 5px #aaa, 0 0 10px #888, 0 0 15px #666;
    
    
}

.drop:after {
  content: '';
  position: absolute;
  
  left: 43%;
  top: 950px;
  width: 355px;
  height: 2px;
  background: #666;

  border-radius: 125px / 1px;
  box-shadow: 0 0 5px #444, 0 0 8px #333, 0 0 10px #666;
}
<div class=" col-md-6 " id="first">
  <div class="drop animated text-center d-none d-md-block images">
    <img src="https://i5.walmartimages.com/asr/81434355-3e69-4cea-860f-db92df6562be_1.6f35432cf22ea0c0cefd77ad80a7007f.gif?odnHeight=72&odnWidth=72&odnBg=FFFFFF" class=" responsive peepphone" />
  </div>
</div>
0 голосов
/ 01 января 2019 

.drop {
  position: relative;
}
/* Use position to place the shadow div over the image */
.shadow {
  position: absolute;
  top: 75px;
  left: 285px;
  width: 429px;
  height: 500px;
  background: none;
  z-index: 100;
  border-radius: 67px;
  box-shadow: 0 0 5px #aaa, 0 0 10px #888, 0 0 15px #666, 0 0 5px #444, 0 0 8px #333, 0 0 10px #666;
}

.peepphone {
  position: absolute;
  top: 0;
  z-index: 0;
}

.animated {
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-duration: 1s;
  animation-fill-mode: both;
}
<div class=" col-md-6 " id="first">
  <div class="drop animated  text-center d-none d-md-block images">
    <!-- Add a shadow div -->
    <div class="shadow"></div>
    <img src="https://i5.walmartimages.com/asr/81434355-3e69-4cea-860f-db92df6562be_1.6f35432cf22ea0c0cefd77ad80a7007f.gif?odnHeight=72&odnWidth=72&odnBg=FFFFFF" class=" responsive peepphone" />
  </div>
</div>
...