如何使用纯 css 阻止阴影效果移动？

Question

我对图像有悬停效果，其中悬停时“浮动”向上。

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

到目前为止，我的 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:                                        /||\
                                                 ||
                                                 ||
+------+                                         ||
|      |                                     floor level
|      |                                         ||
+------+                                         ||
                                                \||/
 ______      <-- shadow/hover                    \/

---

   ^
   |

阴影的大小也应该“缩小”（但这应该不会太糟糕而无法实施。

所以“影子”不应该移动，而 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: 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>

任何帮助将非常感激。

正如你所知道的，我不是 css 天才，但我有梦想 :)

编辑

像这里显示的浮动阴影是我正在寻找/瞄准的东西

Answer 1

像这样的东西？ JSFiddle

我添加了一个新的子 div 并为其添加了 box-shadow，然后在激活子项的父项上设置了悬停状态。

HTML：

<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 class="shadow"></div>
</div>

CSS：

.topMenImg img {
    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);
}
.topMenImg:hover::after {
    content:"";
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    width:100%;
    display: block;
    position: absolute;
    z-index: -1;
}
.shadow {
    width: 300px;
    -webkit-box-shadow: 0px 0px 8px 2px #000000;
    -moz-box-shadow: 0px 0px 8px 2px #000000;
    box-shadow: 0px 0px 8px 2px #000000;
    position: absolute;
    top: 330px;
}

.topMenImg:hover .shadow {
    transform: scaleX(.8);
    transition: 0.2s;
}

Answer 2

给你的图片一个id：

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

然后将悬停添加到您的 id：

#image: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);
}

给你的 div 类： topMenImg阴影

Answer 3

将阴影的 y 偏移量增加与减少按钮的 y 偏移量相同的量。

Answer 4

 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>

我设法编辑了我的 css（相当多）摆弄了很多值，最后想出了这个：

在这个例子中小提琴而言，我已经改变了它成为这个