纯css实现带图片卡片选择效果代码-html代码-BFW代码库

纯css实现带图片卡片选择效果代码

代码语言：html

代码描述：纯css实现带图片卡片选择效果代码

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


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

<head>

  <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">


  
<style>
.card {
  --background: #fff;
  --background-checkbox: #0082ff;
  --background-image: #fff, rgba(0, 107, 175, 0.2);
  --text-color: #666;
  --text-headline: #000;
  --card-shadow: #0082ff;
  --card-height: 190px;
  --card-width: 190px;
  --card-radius: 12px;
  --header-height: 47px;
  --blend-mode: overlay;
  --transition: 0.15s;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.card:nth-child(odd) .card__body-cover-image {
  --x-y1: 100% 90%;
  --x-y2: 67% 83%;
  --x-y3: 33% 90%;
  --x-y4: 0% 85%;
}
.card:nth-child(even) .card__body-cover-image {
 .........完整代码请登录后点击上方下载按钮下载查看