css实现电影卡片悬浮文字介绍效果代码-html代码-BFW代码库

css实现电影卡片悬浮文字介绍效果代码

代码语言：html

所属分类：悬停

代码描述：css实现电影卡片悬浮文字介绍效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
<style>
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap");
/*=================*/
/*     Values      */
/*=================*/
:root {
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e1e7ef;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #65758b;
  --color-gray-600: #48566a;
  --color-gray-700: #344256;
  --color-gray-800: #1d283a;
  --color-gray-900: #0f1729;
  --color-gray-950: #020617;
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f3ff;
  --color-primary-200: #b8e6ff;
  --color-primary-300: #7ad5ff;
  --color-primary-400: #33c2ff;
  --color-primary-500: #00a7f5;
  --color-primary-600: #0085c7;
  --color-primary-700: #006aa3;
  --color-primary-800: #005a8a;
  --color-primary-900: #004e7a;
  --color-primary-950: #003152;
  --color-danger-50: #fff0f0;
  --color-danger-100: #ffe0e0;
  --color-danger-200: #ffc7c7;
  --color-danger-300: #ffa3a3;
  --color-danger-400: #ff6b6b;
  --color-danger-500: #f53d3d;
  --color-danger-600: #f31212;
  --color-danger-700: #d60000;
  --color-danger-800: #b30000;
  --color-danger-900: #9e0000;
  --color-danger-950: #4d0000;
  --color-success-50: #f0fff4;
  --color-success-100: #dbffe8;
  --color-success-200: #b3ffcd;
  --color-success-300: #75ffa8;
  --color-success-400: #34f47a;
  --color-success-500: #0bda57;
  --color-success-600: #00b843;
  --color-success-700: #009436;
  --color-success-800: #007a2f;
  --color-success-900: #006629;
  --color-succ.........完整代码请登录后点击上方下载按钮下载查看