【前端设计】card

发布时间：2024年01月21日

欢迎来到前端设计专栏，本专栏收藏了一些好看且实用的前端作品，使用简单的html、css语法打造创意有趣的作品，为网站加入更多高级创意的元素。

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
      <link rel="stylesheet" href="./card1.css">

</head>
<body>
<div class="card">
    <div class="card-top">
        <p class="card__title">Rick And Morty</p>
        <div class="rating">
            <svg width="17" height="17" viewBox="0 0 17 17" fill="none">
                <path d="M8.51948 1.625C9.1214 1.625 10.0427 4.16625 10.4636 5.43013C10.6014 5.8437 10.9837 6.13054 11.4192 6.14904C12.7373 6.20505 15.375 6.39722 15.375 7.0384C15.375 7.66696 13.5161 9.17543 12.5322 9.92976C12.1816 10.1986 12.0365 10.6604 12.1687 11.082C12.5631 12.34 13.2755 14.8755 12.7573 15.3009C12.2506 15.717 10.2147 14.2326 9.15246 13.4009C8.77021 13.1016 8.22949 13.1012 7.84719 13.4004C6.78473 14.2321 4.75246 15.717 4.28166 15.3009C3.79912 14.8745 4.47615 12.3275 4.84741 11.0727C4.97086 10.6555 4.82425 10.2029 4.47885 9.93826C3.49798 9.18681 1.625 7.66933 1.625 7.0384C1.625 6.3962 4.2711 6.20444 5.5871 6.14878C6.0197 6.13048 6.3998 5.84769 6.53973 5.43793C6.97041 4.17673 7.91633 1.625 8.51948 1.625Z" fill="#00B9AE" stroke="#00B9AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
        </div>
    </div>
    <div class="card__info">
        <p class="episode__num">46Ep</p>
        <p class="episode__type">Fantasy</p>
    </div>
    <div class="card__btns">
        <button class="add-btn">+</button>
        <button class="watch-btn">watch</button>
    </div>
</div>
</body>
</html>

?css

.card {
  --width: 190px;
  --height: 210px;
  --primary: #00b9ae;
  --text: #f9f9f9b2;
  --secondary: #f9f9f933;
  --radius: 20px;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  width: var(--width);
  height: var(--height);
  background: linear-gradient(
      180deg,
      rgba(22, 24, 30, 0) 0%,
      rgba(22, 24, 30, 0.7) 65.28%
    ),
    linear-gradient(0deg, rgba(22, 24, 30, 0.4), rgba(22, 24, 30, 0.4));
  background-size: cover;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1em;
  padding-top: 1.4em;
}


/*  */

.card .card__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 0.2rem;
}

.rating {
  margin-top: 0.5em;
  width: 85px;
  height: 16px;
  background-image: url("data:image/svg+xml,%20%3Csvg%0A%20%20%20%20%20%20%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20%20%20%20%20%20%20%20width%3D%2217%22%0A%20%20%20%20%20%20%20%20%20%20height%3D%2217%22%0A%20%20%20%20%20%20%20%20%20%20viewBox%3D%220%200%2017%2017%22%0A%20%20%20%20%20%20%20%20%20%20fill%3D%22none%22%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20%20%20%20%20d%3D%22M8.51948%201.625C9.1214%201.625%2010.0427%204.16625%2010.4636%205.43013C10.6014%205.8437%2010.9837%206.13054%2011.4192%206.14904C12.7373%206.20505%2015.375%206.39722%2015.375%207.0384C15.375%207.66696%2013.5161%209.17543%2012.5322%209.92976C12.1816%2010.1986%2012.0365%2010.6604%2012.1687%2011.082C12.5631%2012.34%2013.2755%2014.8755%2012.7573%2015.3009C12.2506%2015.717%2010.2147%2014.2326%209.15246%2013.4009C8.77021%2013.1016%208.22949%2013.1012%207.84719%2013.4004C6.78473%2014.2321%204.75246%2015.717%204.28166%2015.3009C3.79912%2014.8745%204.47615%2012.3275%204.84741%2011.0727C4.97086%2010.6555%204.82425%2010.2029%204.47885%209.93826C3.49798%209.18681%201.625%207.66933%201.625%207.0384C1.625%206.3962%204.2711%206.20444%205.5871%206.14878C6.0197%206.13048%206.3998%205.84769%206.53973%205.43793C6.97041%204.17673%207.91633%201.625%208.51948%201.625Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%2300B9AE%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke%3D%22%2300B9AE%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3D%222%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-linecap%3D%22round%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fsvg%3E");
  background-repeat: space;
}

.card .card__info {
  display: flex;
  margin-top: auto;
  font-size: 0.8rem;
  color: var(--text);
  font-weight: 400;
  justify-content: space-between;
}

.card .card__btns {
  display: flex;
  gap: 0.6rem;
}

.card button {
  border: none;
  background: none;
  cursor: pointer;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: bold;
  transition: 0.2s;
}

.card button:hover {
  opacity: 0.8;
  transform: scale(0.9);
}

.card .add-btn {
  color: #fff;
  padding: 0.5em 0.8em;
  background: rgba(249, 249, 249, 0.2);
  border-radius: 14px;
}

.card .watch-btn {
  flex: 1;
}

文章来源:https://blog.csdn.net/weixin_55939638/article/details/135732920
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章