当青训营遇上码上掘金

我完成的主题是1-我的名片

采用html+css，部署在github上。

效果图：

ezgif.com-gif-maker.gif

创作灵感：

采用一种走马灯的形式为背景的卡片，下面名字跳转某站链接，鼠标移动卡片显示名字。走马灯效果：用伪元素before，after组成，after卡片背景用动画旋转渐变（keyframes），再用before背景尺寸小点的卡片覆盖。

":before" 伪元素可以在元素的内容前面插入新内容。 ":after" 伪元素可以在元素的内容之后插入新内容。

  .card::before {
    content: "";
    width: 104%;
    height: 102%;
    border-radius: 8px;
    background-image: linear-gradient(
      var(--rotate)
      , #5ddcff, #3c67e3 43%, #4e00c2);
      position: absolute;
      z-index: -1;
      top: -1%;
      left: -2%;
      animation: spin 2.5s linear infinite;
  }
  
  .card::after {
    position: absolute;
    content: "";
    top: calc(var(--card-height) / 6);
    left: 0;
    right: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    transform: scale(0.8);
    filter: blur(calc(var(--card-height) / 6));
    background-image: linear-gradient(
      var(--rotate)
      , #5ddcff, #3c67e3 43%, #4e00c2);
      opacity: 1;
    transition: opacity .5s;
    animation: spin 2.5s linear infinite;
  }

鼠标移动到卡片取消样式用hover实现。

 .card:hover:before, .card:hover:after {
    animation: none;
    opacity: 0;
  }

js可以用更改css样式实现。

classList,className...

过程:

1.首先编写html部分

title——网页题目
ul——无序列表
li——样例
a——超链接（target="_ blank"跳转网页新建标签页)

<!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">
    <link rel="stylesheet" href="index.css">
    <title>我的名片</title>
</head>
<body>
    <div class="card">
        <ul>
          <li>名字：XXX</li>
          <li>电话：XXX</li>
          <li>email：XXX</li>
          <li>微信/QQ:XXX</li>
          
        </ul>
      </div>
      
    <a href="xxx" target="_blank">XXX</a>
</body>
</html>

2.css部分

body采用flex布局等

  body {
    min-height: 100%;
    background: #212534;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 2rem;
    padding-bottom: 2rem;
    box-sizing: border-box;
  }

    justify-content: center;
    align-items: center;

使全局内容垂直水平居中。

用:root，方便使用。

是一个伪类，表示文档根元素，所有主流浏览器均支持 :root 选择器，除了 IE8 及更早的版本。在:root中声明相当于全局属性，只要当前页面引用了:root segment所在文件，都可以使用var()来引用。用 – 这样写法加上样式名称例如：–background 引用：var(–background)

  :root {
    --card-height: 65vh;
    --card-width: calc(var(--card-height) / 1.5);
  }

var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。（这样做通常会产生无效的语法或者一个没有关联到变量的值。）

鼠标样式，放在card选择器里

cursor: pointer;

长度单位em,rem,px

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

EM特点

1. em的值并不是固定的；
1. em会继承父级元素的字体大小。

REM

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

EM特点

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

PX特点