先上效果图
css代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>毛玻璃</title><link rel="stylesheet" href="/font-awesome/4.7.0/css/font-awesome.min.css"><style>body{background-color: rgb(226, 244, 253);}.box{float: left;position: relative;margin:10px;height: 300px;width: 200px;/* border:1px solid red; */background:url("/it/u=3149292902,2355207328&fm=26&fmt=auto") no-repeat center;background-size:200px 300px ;overflow: hidden;border:1px solid rgb(182, 182, 182);border-radius: 10px;}span{position:absolute;bottom: -122px;/* bottom: 0; */display: inline-block;height: 120px;width: 200px;box-shadow:0 0 10px 0px rgba(44, 44, 44, 0.5);border:1px solid rgba(204, 200, 200, 0.1);backdrop-filter:blur(10px);/*这里是主要的毛玻璃效果*/transition: bottom 0.5s;transition-delay: 0.7s;}.box:hover span{bottom: 0px;transition-delay:0s;}.hear{margin-top: 20px;color:#fff;font-weight: bold;text-align: center;width: 200px;height: 33px;transform:translateY(-20px);transition:0.5s;transition-delay:0.5s;opacity: 0;visibility:hidden;/* border:1px solid red; */}.uul{margin: 10px 0 0 0;list-style: none;}.box:hover .hear{visibility: visible;transform: translateY(0px);opacity: 1;}.uul i{margin-left: 20px;color: #fff;float: left;transform:translateY(20px);transition:0.5s;opacity: 0;transition-delay: calc(0.2s * var(--i));}.box:hover .uul i{transform:translateY(0px);opacity: 1;}</style></head><body><div class="box"><span class="dd"><div class="hear">SOMEONE FAMOOURS<BR />CREATIVE DESIGNER</div><ul class="uul"><li><i style="--i:1" class="fa fa-facebook" aria-hidden="true"></i></li><li><i style="--i:2" class="fa fa-twitter" aria-hidden="true"></i></li><li><i style="--i:3" class="fa fa-instagram" aria-hidden="true"></i></li></ul></span></div><div class="box" style="background-image: url('/image_search/src=http%3A%2F%%2Fsite%2F1209141711212vizhtk7.jpg');"><span class="dd"><div class="hear">SOMEONE FAMOOURS<BR />CREATIVE DESIGNER</div><ul class="uul"><li><i style="--i:1" class="fa fa-facebook" aria-hidden="true"></i></li><li><i style="--i:2" class="fa fa-twitter" aria-hidden="true"></i></li><li><i style="--i:3" class="fa fa-instagram" aria-hidden="true"></i></li></ul></span></div><div class="box" style="background-image: url('/9fo3dSag_xI4khGko9WTAnF6hhy/lbc/w%3D448%3Bq%3D90/sign=6933ed314d4a20a4311e3dc3a869e91f/cdbf6c81800a19d8961b312631fa828ba61e46fc.jpg');"><span class="dd"><div class="hear">SOMEONE FAMOOURS<BR />CREATIVE DESIGNER</div><ul class="uul"><li><i style="--i:1" class="fa fa-facebook" aria-hidden="true"></i></li><li><i style="--i:2" class="fa fa-twitter" aria-hidden="true"></i></li><li><i style="--i:3" class="fa fa-instagram" aria-hidden="true"></i></li></ul></span></div><div class="box" style="background-image: url('/image_search/src=http%3A%2F%%2Fstatic_old%2Falbum%2F46063%2F22770%2F05261759414606322770267.jpg');"><span class="dd"><div class="hear">SOMEONE FAMOOURS<BR />CREATIVE DESIGNER</div><ul class="uul"><li><i style="--i:1" class="fa fa-facebook" aria-hidden="true"></i></li><li><i style="--i:2" class="fa fa-twitter" aria-hidden="true"></i></li><li><i style="--i:3" class="fa fa-instagram" aria-hidden="true"></i></li></ul></span></div></div></body></html>
结束啦
