【css学习计划】实现一个好看的悬停卡片

x_lykl

已于 2022-05-04 21:12:43 修改

阅读量474

点赞数 1

文章标签： css css3 html

于 2022-05-04 20:59:39 首次发布

本文链接：https://blog.csdn.net/x_lykl/article/details/124576853

版权

本文通过介绍如何利用CSS渐变、定位和变换技术，详细阐述了实现一个吸引人的悬停卡片效果的过程。强调了理解并灵活运用渐变颜色预设的重要性。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>image hover effects</title>
    <style>
      * {
     
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Poppins", sans-serif;
      }
      body {
     
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(45deg, #fbda61, #ff5acd);
        min-height: 100vh;
      }
      .card {
     
        position: relative;
        width: 350px;
        height: 190px;
        background: #fff;