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>
        * {
        	box-sizing: border-box;
        }
        
        a,
        a:visited {
        	color: inherit;
        }
        body {
        	align-items: center;
        	display: flex;
        	height: 100vh;
        	justify-content: center;
        	margin: 0;
        	padding: 4rem;
        	position: relative;
        	z-index: 0;
        }
        body::after {
        	background-color: white;
        	content: "";
        	inset: 0;
        	opacity: 0.75;
        	position: absolute;
        	z-index: 1;
        }
        .container {
        	background: white;
        	border-radius: 3rem;
        	box-shadow: 0 0.5rem 1.5rem -0.375rem rgba(0, 0, 0, 0.21);
        	display: flex;
        	height: calc(100vh - 8rem);
        	max-height: 960px;
        	max-width: 1440px;
        	overflow: hidden;
        	position: relative;
        	width: calc(100vw - 8rem);
        	z-index: 2;
        }
        .image-container {
        	position: relative;
        	z-index: 0;
        }
        .image-attribution {
        	background-color: rgba(0, 0, 0, 0.5);
        	bottom: 0;
        	color: white;
        	font-family: sans-serif;
        	left: 0;
        	padding: 1.5rem 2rem;
        	position: absolute;
        	right: 0;
        	z-index: 1;
        	backdrop-filter: blur(4px);
        }
        .image-attribution > p:first-child {
        	font-size: 1.25rem;
        	line-height: 1.875rem;
        }
        .image-attribution > p:last-child {
        	font-size: 0.875rem;
        	line-height: 1.25rem;
        	opacity: 0.8;
        }
        p {
        	margin: 0;
        }
        
        .swatch {
        	flex-grow: 1;
        	display: flex;
        	flex-direction: column;
        	justify-content: flex-end;
        	padding: 0 1rem;
        	cursor: pointer;
        }
        .swatch:nth-child(1) {
        	border-radius: 0 1.5rem 0 0;
        }
        .swatch:nth-child(5) {
        	border-radius: 0 0 1.5rem 0;
        }
        .swatch-container {
        	display: grid;
        	gap: 2rem;
        	padding: 2rem;
        }
        .thumbnail {
        	object-fit: cover;
        	width: 100%;
        	height: 100%;
        }
        
        @m.........完整代码请登录后点击上方下载按钮下载查看