如何在透明GIF文件下添加圆形阴影？

Question

我为我的网站构建了一个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>

Answer 1

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

Answer 2

您的伪选择器未显示，因为您需要向类中添加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>