css实现可切换颜色的手机壳效果代码-html代码-BFW代码库

css实现可切换颜色的手机壳效果代码

代码语言：html

代码描述：css实现可切换颜色的手机壳效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
body { 
  margin: 0; 
  height: 100vh;
  display: grid;
  place-items: center;
}

:root {
  --imgheight: 856;
  --imgwidth: 432;
  --height: 60vmin;
  --width: calc((var(--imgwidth) / var(--imgheight) * var(--height)));
}

img, input {
  height: var(--height);
  width: var(--width);
  grid-area: 1 / -1;
}

input[type="color"]  { 
  /* mix blend mode makes the color of the input swatch alter the image behind it. */
  mix-blend-mode: multiply; 
  cursor: pointer;
  /* masks out the camera lenses */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 856"><path d="M433 148v-28l-2-2V68s-1-66-71-67H68S11 1 2 63L1 788s-2 63 64 69h303s60-4 63-62V309a19 19 0 0 0 1-3v-55l-1-2v-14l1-3v-56l-1-2v-24ZM72 40a29 29 0 1 1-29 29 29 29 0 0 1 29-29Zm0 138a29 29 0 1 1 29-28 29 29 0 0 1-29 28Zm65-106a6 6 0 1 1 6-6 6 6 0 0 1-6 6Z" /></svg>') no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 856"><path d="M433 148v-28l-2-2V68s-1-66-71-67H68S11 1 2 63L1 788s-2 63 64 69h303s60-4 63-62V309a19 19 0 0 0 1-3v-55l-1-2v-14l1-3v-56l-1-2v-24ZM72 40a29 29 0 1 1-29 29 29 29 0 0 1 29-29Zm0 138a.........完整代码请登录后点击上方下载按钮下载查看