css实现图片悬浮分割前后图层分割显示效果代码-html代码-BFW代码库

css实现图片悬浮分割前后图层分割显示效果代码

代码语言：html

所属分类：其他

代码描述：css实现图片悬浮分割前后图层分割显示效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1">



    <style>
        body{background:#000}
        img {
        	display:block;
        	height:auto;
        }
        .switch {
        	width:500px;/* image width */
        	margin:50px auto;
        	position:relative;
        	display:flex;
        	border:5px solid #fff;
        }
        .img:after{
        	content:"";
        	position:absolute;
        	right:-2px;
        	top:0;
        	bottom:0;
        	width:4px;
        	background:rgba(100,100,100, 0.8);
        }
        .img:before{
        	content:"";
        	position:absolute;
        	right:-8px;
        	top:0;
        	bottom:0;
        	margin:auto;
        	width:16px;
        	height:40px;
        	border-radius:4px;
        	background:rgba(100,100,100, 0.8);
        	box-shadow:inset 0 0 10px rgba(0,0,0,0.3).........完整代码请登录后点击上方下载按钮下载查看