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-success-950: #003315;
  --color-gold-50: #fffde6;
  --color-gold-100: #fffac2;
  --color-gold-200: #fff18a;
  --color-gold-300: #ffe047;
  --color-gold-400: #ffcf0f;
  --color-gold-500: #f0b400;
  --color-gold-600: #cc8b00;
  --color-gold-700: #a86200;
  --color-gold-800: #944f00;
  --color-gold-900: #853e00;
  --color-gold-950: #471f00;
  --spacing-01: 4px;
  --spacing-02: 8px;
  --spacing-03: 12px;
  --spacing-04: 16px;
  --spacing-05: 20px;
  --spacing-06: 24px;
  --spacing-07: 28px;
  --spacing-08: 32px;
  --spacing-09: 40px;
}

/*=========================*/
/*      Sass Functions     */
/*=========================*/
/*=================*/
/*      Theme      */
/*=================*/
:root {
  color-scheme: light dark;
  --font-color-default: var(--color-gray-700);
  --font-color-strong: var(--color-gray-900);
  --font-color-light: var(--color-gray-400);
  --background-page: var(--color-gray-50);
  --border-light: 1px solid var(--font-color-light);
  --border-strong: 2px solid var(--font-color-strong);
  --border-radius-sm: var(--spacing-01);
  --border-radius-md: var(--spacing-02);
  -.........完整代码请登录后点击上方下载按钮下载查看