当青训营遇上码上掘金 - 我的名片

用户9608586346079
83 阅读4分钟

当青训营遇上码上掘金 - 我的名片

主题 1：我的名片

名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。

效果展示

dc7e824a80fe1d7099d10181f2a6164.png

01bbf85dc770a6077d0414fdbe24b69.png

创作灵感

  1. 首先是一个名片大小的“卡片”，为了让其更加活泼，在四周加入了一些黄色的线条作为点缀

  2. 其次为决定其中的内容，黑黄的配色显得更具特色，左上角的一个图标不仅起到了点缀作用，还起到了让动画自图标的框向外伸展的作用

  3. 做鼠标经过的效果，黄色色块由图标框蔓延到整个卡片，还为灰色的背景留下了余地，同时文字变化颜色，外围的四个线条向卡片靠拢

CSS 动画基础

这个卡片由于样式相对简单，可使用 CSS 动画来进行制作

什么是 CSS 动画？

动画使元素逐渐从一种样式变为另一种样式。 您可以随意更改任意数量的 CSS 属性。 如需使用 CSS 动画，您必须首先为动画指定一些关键帧。 关键帧包含元素在特定时间所拥有的样式。

  • 延迟动画
    • animation-delay 属性规定动画开始的延迟时间。
  • 设置动画应运行多少次
    • animation-iteration-count 属性指定动画应运行的次数。
  • 反向或交替运行动画
    • animation-direction 属性指定是向前播放、向后播放还是交替播放动画。
    • animation-direction 属性可接受以下值：
      • normal - 动画正常播放（向前）。默认值
      • reverse - 动画以反方向播放（向后）
      • alternate - 动画先向前播放，然后向后
      • alternate-reverse - 动画先向后播放，然后向前
  • 指定动画的速度曲线
    • animation-timing-function 属性规定动画的速度曲线。
    • animation-timing-function 属性可接受以下值：
      • ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
      • linear - 规定从开始到结束的速度相同的动画
      • ease-in - 规定慢速开始的动画
      • ease-out - 规定慢速结束的动画
      • ease-in-out - 指定开始和结束较慢的动画
      • cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值
  • 指定动画的填充模式

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。 在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。

  • animation-fill-mode 属性可接受以下值：
    • none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
    • forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
    • backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
    • both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。
  • 动画简写属性
div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#:[参考文章](CSS 动画 (w3school.com.cn))

代码编写

代码的编写也相对较为简单，技术栈使用了基础的HTML、CSS

这里附上HTML代码：

<!DOCTYPE html>
<html>
<head>
<title>当青训营遇上码上掘金</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
  <div class="container">
    <div class="box" style="--clr:#e9ca18;">
      <div class="content">
        <span class="icon"><i class="fa fa-random"></i></span>
        <span class="name">天已微冷</span>
        <span class="leixin">前、后端开发小白一枚</span>
        <div class="text">
          <p> 联系电话：18800000010</p>
          <p> 邮箱：2689643069@qq.com</p>
          <p> 地址：山西省XXX市XXX县XXXXX</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

详细代码可见：[码上掘金](cbjPmgGO - 码上掘金 (juejin.cn))

写在最后

这次的主题给到了一个使用代码来写名片的一个场景，虽然这次使用的技术并不多也相对较为基础，但也考验了CSS动画的使用，相信如果更加深入的去研究，例如可以扩展使用 JavaScript 来为整个界面加上更为活泼的主题以及更多更高级的动画，一定可以做出一个更好的作品。

avatar
文章
阅读
粉丝