如何使用纯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:                                        /||
                                                 ||
                                                 ||
+------+                                         ||
|      |                                     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天才，但我有梦想：）

编辑

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

类似的东西JSFiddle

我添加了一个新的子div，并添加了框阴影，然后在激活子div的父div上设置悬停状态。

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;
}

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（相当多），篡改了很多值，最终得到了这个：

就fiddle的例子而言，我已经将其更改为这个

给您的图像一个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);
}

并给类为topMenImg的div提供阴影

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

相关内容

最新更新

热门标签：