js+css实现卡片图文切换效果代码-html代码-BFW代码库

js+css实现卡片图文切换效果代码

代码语言：html

所属分类：其他

代码描述：js+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/normalize.5.0.css">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.5.1.2.css">
  
<style>

section {
  display: flex;
  flex-flow: row wrap;
  margin: 10px;
}

div {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-basis: calc(100% - 20px);
  margin: 10px;
  padding-bottom: 20px;
  background: #eee;
  border-radius: 6.6666666667px;
  overflow: hidden;
}
@media screen and (min-width: 500px) {
  div {
    flex-basis: calc((100% / 2) - 20px);
  }
}
@media screen and (min-width: 700px) {
  div {
    flex-basis: calc((100% / 3) - 20px);
  }
}
@media screen and (min-width: 1200px) {
  div {
    flex-basis: calc((100% / 4) - 20px);
  }
}

img {
  margin-bottom: 20px;
  width: 100%;
}

h2, h3, p, a {
  margin-left: 20px;
  margin-right: 20px;
}

h2 {
  margin-bottom: 6.6666666667px;
  font-size: 1.5rem;
}

h3 {
  font-size: 0.875rem;
}

a {
  align-self: flex-start;
}

.btn-close {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: var(--bs-danger);
  background-size: 50%;
  border-radius: 100%;
  transition: 250ms all ease-in-out;
}

div:has(img) a {
  margin-top: auto;
}
div:not(:has(img)) {
  padding-top: 20px;
  justify-content: center;
  background: repeating-linear-gradient(-45deg, #dbdbdb, #dbdbdb 2px, #eee 2px, #eee 30px);
}
div:not(:has(img)) h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}
div:not(:has(img)) h3 {
  font-size: 1rem;
}
div:not(:has(img)) p {
  font-size: 1.2rem;
}
div:not(:has(img)) .btn-close {
  transform: rotate(45deg);
  background-color: var(--bs-success);
  background-size: 40%;
}
</style>

  
  
</head>

<body translate="no">
  <section>
  <div>
    <button type="button" class="btn-close" aria-label="Close"></button>
    <img src="https://dummyimage.com/400x225/333/ccc" alt="">
    <h2>Title One</h2>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio suscipit natus ducimus dolore officia praesentium inventore.</p>
    <a href="#" class="btn btn-primary">Call to Action</a>
  </div>
  <div>
    <button type="button" class="btn-close" aria-label="Close"></button>
    <img src="https://dummyimage.com/400x225/333/ccc" alt="">
    <h2>Title Two</h2>
    <h3>Electric Boogaloo</h3>
    <p>Lorem, ipsum dolor sit amet consectetur adipisi.........完整代码请登录后点击上方下载按钮下载查看