css实现自适应卡片选择渐显动画效果代码-html代码-BFW代码库

css实现自适应卡片选择渐显动画效果代码

代码语言：html

代码描述：css实现自适应卡片选择渐显动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        html {
        	display: grid;
        	place-items: center;
        	min-height: 100vh;
        	background: #222;
        	color: gray;
        	text-align: center;
        	font-family: sans-serif;
        }
        body:before {
        	content: "Left/Right arrows to move";
        	display: block;
        	margin-bottom: 3rem;
        }
        
        div {
        	width: 20vw;
        	max-width: 250px;
        	height: 75vh;
        	background: red;
        	background-size: auto 100%;
        	background-position: 50% 50%;
        	background-repeat: no-repeat;
        	display: inline-block;
        	margin: 0 0.5rem;
        	filter: grayscale(1) opacity(0.1) contrast(200%);
        	transition: 0.5s;
        	transform: skewY(-10deg);
        	z-index: -1;
        }
        
        .highlight {
        	filter: grayscale(0) opacity(1);
        	transform: scale(1.1);
        	box-shadow: 0 25px 50px black;
        	z-index: 100;
        }
        
        @media (orientation: portrait) {
        	body:before {
        		content: "Up/Down arrows to move";
        	}
        
        	div {
        		width: 75vw;
        		max-width: 75vw;
        		height: 20vh;
        		display: block;
        		margin: 1rem 0;
        		background-size: 100% auto;
        		background-position: 50% 0%;
        		transform: skewX(-10deg);
        	}
        	div:nth-child(3) {
        		background-position: 50% 20%;
        	}
        	div:nth-child(4) {
        		background-position: 50% 10%;
        	}
        }
        
        div:nth-child(1) {
        	background-color: dodgerblue;
        	background-image: url("//repo.bfw.wiki/bfwrepo/image/5fc1af0ba6cc8.png");
        }
        
        div:nth-child(2) {
        	background-color: red;
        	background-image: url("//repo.bfw.wiki/bfwrepo/image/5fc1ae951e91a.png");
        }
        div:nth-child(3) {
        	background-color: purple;
        	background-image: url("//repo.bfw.wiki/bfwrepo/image/5fe1bd1861604.png");
        }
        div:nth-child(4) {
        	background-color: d.........完整代码请登录后点击上方下载按钮下载查看