如何使用纯CSS停止移动使用阴影效果？ [英] How to stop shadow effect from moving using pure css?

问题描述

我对图片有悬停效果，在悬停时悬浮向上。

但是，我一直在试图实现它，使阴影在这种悬停效果期间保持静态（即使图像看起来像是悬停在地面上

到目前为止，我的jsfiddle看起来像这。

使用

  -webkit-box-shadow：0px 0px 8px 2px＃000000; 
 -moz-box-shadow：0px 0px 8px 2px＃000000; 
 box-shadow：0px 0px 8px 2px＃000000; 
  
 
 
 
因此，图像应该看起来像（当无遮挡时）：
  + ------ + 
 | | 
 | | 
 + ------ + 
 ________<  -  shadow / hover 
  
 
 
 
 
 
 
  / \ 
 Hovered：/ || \ 
 || 
 || 
 + ------ + || 
 | |楼层
 | | || 
 + ------ + || 
 \ || / 
 ______<  -  shadow / hover \ / 
  
 
 
 
 
 
 
  ^ 
 | 
  
阴影也应该'shink'大小（但不应该 bad to implement。
 
 
 
所以shadow不应该移动，img应该加注。
 
 
 
 
 
 
  .threeWidget {float：left; width：30％; height：25％; background-color：AppWorkspace; margin：2px;}。topMenImg {transition：0.5s;}。topMenImg：hover {-moz-transform：translate（0，-8px）; -ms-transform：translate（0，-8px）; -o-transform：translate（0，-8px）; -webkit-transform： 8px）; transform：translate（0，-8px）; -webkit-transform：translateY（-10px）; transform：translateY（-10px）;}。TopMenu {background-color：＃808080; border-style：inset solid; border-width：5px;}。topMenImg：hover :: after {content：; -webkit-transform：translateY（10px）; transform：translateY（10px）; width：100％; display： z-index：-1; -webkit-box-shadow：0px 0px 8px 2px＃000000; -moz-box-shadow：0px 0px 8px 2px＃000000; box-shadow：0px 0px 8px 2px＃000000;}。topMenImg :: after {-webkit-transform：translateY（10px）; transform：translateY（10px）; -webkit-box-shadow：0px 0px 8px 2px＃000000; -moz-box-shadow：0px 0px 8px 2px＃000000; box-shadow：0px 0px 8px 2px＃000000;}  
 
  < div class =topMenImgstyle =float：left; margin-left：8％> < img src =http://www.clker.com/cliparts/a/1/8/b/1264830175321493735blue-marble-globe-md.png/>< / div>  
 
 
 
 
 
 
任何帮助都将非常感激。
 
 
 
你可以告诉我，我不是css天才，但我有梦想）
 
 
 
 编辑 
 
 
 
像这里显示的浮动阴影是我在看的东西/瞄准
解决方案
 
 
 
  input [type =text]，input [type =button ]，.search {border-radius：40px 40px 40px 40px; -moz-border-radius：40px 40px 40px 40px; -webkit-border-radius：40px 40px 40px 40px; padding-left：2px;} input [type =按钮]：hover，input [type =text]：focus，input [type =text] {-webkit-box-shadow：inset 0 0 2px rgba（0，0，0，0.3），inset 0px 1px 2px rgba（0，0，0，0.3），0 0 5px 1px rgba（16，216，252，0.8）; -moz-box-shadow：inset 0 0 2px rgba（0，0，0，0.3），inset 0px 1px 2px rgba（0，0，0，0.3），0 0 5px 1px rgba（16，216，252，0.8 ）; box-shadow：inset 0 0 2px rgba（0，0，0，0.3），inset 0px 1px 2px rgba（0，0，0，0.3），0 0 5px 1px rgba（16，216，252，0.8）;} .TopMenu {width：100％;背景颜色：darkgray; -webkit-box-shadow：inset 0px 0px 131px 25px rgba（0,0,0,0.55）;  -  moz-box-shadow：inset 0px 0px 131px 25px rgba（0,0,0,0.55）; box-shadow： inset 0px 0px 131px 25px rgba（0,0,0,0.55）; float：left; border-radius：40px 40px 40px 40px; -moz-border-radius：40px 40px 40px 40px; -webkit-border-radius：40px 40px 40px 40px;}。search {margin-right：2％; width：auto; margin-left：0; display：flexbox; margin：auto;} searchTextBox {width：auto; overflow：hidden; clear：both;}。searchButtonSubmit {width：auto;利润率：1％;清除： overflow：hidden;}。topMenuImg {margin-left：5％; float：left;过渡：0.2s;位置：相对; display：table-cell; z-index：10;}。topMenuImg：first-child {margin-left：20％;} topMenuImg：hover {-moz-transform：translate（0，-8px）; -ms-transform：translate（0，-8px）; -o-transform：translate（0，-8px）; -webkit-transform：translate（0，-8px）; transform：translate（0，-8px）; -webkit-transform：translateY（-10px）; transform：translateY（-10px）;}。topMenuImg：after {/ *这是阴影效果* / content：''; position：absolute;底部：-1％;左：3％; z-index：0;宽度：90％;身高：8％; border-radius：50％; box-shadow：0px 10px 0px rgba（14，14，14，0.10）;过渡：0.2s; -moz-transform：translate（0，-8px）; -ms-transform：translate（0，-8px）; -o-transform：translate（0，-8px）; -webkit-transform：translate（0，-8px）; transform：translate（0， -  8px）; -webkit-transform：translateY（-10px）; transform：translateY（-10px）; box-shadow：0px 10px 0px rgba（14，14，14，0.80）;} .topMenuImg：hover：after {/ *也阴影效果* / content：'' position：absolute; z-index：0;底部：0％;左：18％;宽度：60％;身高：8％; border-radius：50％; box-shadow：0px 10px 0px rgba（14，14，14，0.40）; transform：scale（0.2）; -moz-transform：translate（0，4px）; -ms-transform：translate（0，4px）; -o-transform：translate（0，4px）; -webkit-transform：translate（0，4px）; transform：translate（0，4px）; -webkit-transform：translateY（0px）; transform：translateY（0px）;}  
 
 < div id =TopMenuclass => < div class =topMenuImg>< img src =〜/ Content / Images / TopMenu / Add.png/>< / div> < div class =topMenuImg>< img src =〜/ Content / Images / TopMenu / Delete.png/>< / div> < div class =topMenuImg>< img src =〜/ Content / Images / TopMenu / Edit.png/>< / div> < div class =topMenuImg>< img src =〜/ Content / Images / TopMenu / Save.png/>< / div> < div class =topMenuImg>< img src =〜/ Content / Images / TopMenu / Print.png/>< / div> < div class =topMenuImg>< img src =〜/ Content / Images / TopMenu / Search.png/>< / div> < / div>  
 
 
 
 
 
 
我设法编辑我的css一个小的），用一个LOT的值，最终出现了这个：
 
 
 
在这个例子中，我改变了它变成 this  
 
I have a hover effect on an image, in which 'floats' upwards on hover. 

However, I've been trying to implement it in such a way that the shadow remains static during this hover effect (i.e. make the image look like it's hovering off the ground.

So far my jsfiddle looks like this.

It's using the 
-webkit-box-shadow: 0px 0px 8px 2px #000000;
   -moz-box-shadow: 0px 0px 8px 2px #000000;
        box-shadow: 0px 0px 8px 2px #000000;
in order to generate the shadow.

So, the image should look like (when unhovered):
+------+
|      |
|      |
+------+
________     <-- shadow/hover




                                                 /\
Hovered:                                        /||\
                                                 ||
                                                 ||
+------+                                         ||
|      |                                     floor level
|      |                                         ||
+------+                                         ||
                                                \||/
 ______      <-- shadow/hover                    \/




   ^
   |
the shadow should also 'shink' in size (but that shouldn't be too bad to implement.

So the 'shadow' shouldn't move, and the img should raise.



.threeWidget {
  float: left;
  width: 30%;
  height: 25%;
  background-color: AppWorkspace;
  margin: 2px;
}
.topMenImg {
  transition: 0.5s;
}
.topMenImg:hover {
  -moz-transform: translate(0, -8px);
  -ms-transform: translate(0, -8px);
  -o-transform: translate(0, -8px);
  -webkit-transform: translate(0, -8px);
  transform: translate(0, -8px);
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}
.TopMenu {
  background-color: #808080;
  border-style: inset solid;
  border-width: 5px;
}
.topMenImg:hover::after {
  content: "";
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
  width: 100%;
  display: block;
  position: absolute;
  z-index: -1;
  -webkit-box-shadow: 0px 0px 8px 2px #000000;
  -moz-box-shadow: 0px 0px 8px 2px #000000;
  box-shadow: 0px 0px 8px 2px #000000;
}
.topMenImg::after {
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-box-shadow: 0px 0px 8px 2px #000000;
  -moz-box-shadow: 0px 0px 8px 2px #000000;
  box-shadow: 0px 0px 8px 2px #000000;
}

<div class="topMenImg" style="float:left ;margin-left:8%">
  <img src="http://www.clker.com/cliparts/a/1/8/b/1264830175321493735blue-marble-globe-md.png" />
</div>





Any help would be much appreciated.

As you can tell, i'm not css genius, but I have dreams :)

Edit

Something like the Floating shadow shown here is what i'm looking/aiming for
解决方案


input[type="text"], input[type="button"], .search{
border-radius: 40px 40px 40px 40px;
-moz-border-radius: 40px 40px 40px 40px;
-webkit-border-radius: 40px 40px 40px 40px;
padding-left:2px;
}

input[type="button"]:hover, input[type="text"]:focus,input[type="text"] {
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3), inset 0px 1px 2px rgba(0, 0, 0, 0.3), 0 0 5px 1px rgba(16, 216, 252, 0.8);
  -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3), inset 0px 1px 2px rgba(0, 0, 0, 0.3), 0 0 5px 1px rgba(16, 216, 252, 0.8);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3), inset 0px 1px 2px rgba(0, 0, 0, 0.3), 0 0 5px 1px rgba(16, 216, 252, 0.8);
}



.TopMenu{
    width:100%;
   background-color:darkgray;

   -webkit-box-shadow: inset 0px 0px 131px 25px rgba(0,0,0,0.55);
-moz-box-shadow: inset 0px 0px 131px 25px rgba(0,0,0,0.55);
box-shadow: inset 0px 0px 131px 25px rgba(0,0,0,0.55);

float:left;
border-radius: 40px 40px 40px 40px;
-moz-border-radius: 40px 40px 40px 40px;
-webkit-border-radius: 40px 40px 40px 40px;
}

.search {
margin-right:2%;
width:auto;
margin-left:0;
display:flexbox;
margin:auto;
}
.searchTextBox{
    width:auto;
    overflow:hidden;
    clear:both;
}
.searchButtonSubmit{
    width:auto;
    margin-right:1%;
    clear:both;
    overflow:hidden;
}

.topMenuImg{
    margin-left:5%;
    float:left;
    transition: 0.2s;
    position: relative;
    display:table-cell;
    z-index:10;
}

.topMenuImg:first-child{
    margin-left:20%;
}

.topMenuImg:hover{
     -moz-transform: translate(0, -8px);
    -ms-transform: translate(0, -8px);
    -o-transform: translate(0, -8px);
    -webkit-transform: translate(0, -8px);
    transform: translate(0, -8px);
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
}

.topMenuImg:after{ /*This is the shadow effect*/
        content: '';
    position: absolute;
    bottom: -1%;
    left: 3%;
    z-index:0;
    width: 90%;
    height: 8%;

    border-radius: 50%;
    box-shadow: 0px 10px 0px rgba(14, 14, 14, 0.10);
        transition: 0.2s;
         -moz-transform: translate(0, -8px);
    -ms-transform: translate(0, -8px);
    -o-transform: translate(0, -8px);
    -webkit-transform: translate(0, -8px);
    transform: translate(0, -8px);
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
      box-shadow: 0px 10px 0px rgba(14, 14, 14, 0.80);
}
    
.topMenuImg:hover:after{ /*Also shadow effect*/
          content: '';
    position: absolute;
    z-index:0;
    bottom: 0%;
    left: 18%;
    width: 60%;
    height: 8%;
    border-radius: 50%;
  box-shadow: 0px 10px 0px rgba(14, 14, 14, 0.40);
  transform: scale(0.2);

    -moz-transform: translate(0, 4px);
    -ms-transform: translate(0, 4px);
    -o-transform: translate(0, 4px);
    -webkit-transform: translate(0, 4px);
    transform: translate(0, 4px);
    -webkit-transform: translateY(0px);
    transform: translateY(0px);

}

  <div id="TopMenu" class="">
                        <div class="topMenuImg"><img src="~/Content/Images/TopMenu/Add.png" /></div>
                        <div class="topMenuImg"><img src="~/Content/Images/TopMenu/Delete.png" /></div>
                        <div class="topMenuImg"><img src="~/Content/Images/TopMenu/Edit.png" /></div>
                        <div class="topMenuImg"><img src="~/Content/Images/TopMenu/Save.png" /></div>
                        <div class="topMenuImg"><img src="~/Content/Images/TopMenu/Print.png" /></div>
                        <div class="topMenuImg"><img src="~/Content/Images/TopMenu/Search.png" /></div>
                    </div>





I managed to edit my css (quite a bit) of fiddling with a LOT of the values, finally coming up with this:

In terms of the example fiddle, I have altered it to become this

                        
这篇关于如何使用纯CSS停止移动使用阴影效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！