css浮动和悬浮效果
文章描述：
css浮动和悬浮效果
浮动效果
<div class="list">
<div class="item item-site-ac"></div>
</div>.list .item{
width:214px;
height:62px;
border:1px solid #e9e9e9;
border-radius:5px;
}
.item-site-ac {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.item-site-ac:hover {
transform: translateY(-4px);
-webkit-transform: translateY(-4px);
-moz-transform: translateY(-4px);
box-shadow: 0 20px 32px -18px rgba(79,125,183,.3);
-webkit-box-shadow: 0 20px 32px -18px rgba(79,125,183,.3);
-moz-box-shadow: 0 20px 32px -18px rgba(79,125,183,.3);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
悬浮效果
<div class="loop">
<div class="item hover-shadow-ui"></div>
</div>.loop .item{ width:80px; height:80px; background:#417aed; border-radius:50%; }
.hover-shadow-ui {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.hover-shadow-ui:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 60%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 60%);
/* W3C */
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform, opacity;
transition-property: transform, opacity;
}
.hover-shadow-ui:hover, .hover-shadow-ui:focus, .hover-shadow-ui:active {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
.hover-shadow-ui:hover:before, .hover-shadow-ui:focus:before, .hover-shadow-ui:active:before {
opacity: 1;
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
发布时间：2022/12/26
发表评论