【开原宝藏】30天学会CSS - DAY1 第一课

下面提供一个由浅入深、按步骤拆解的示例教程,让你能从零开始,逐步理解并实现带有旋转及悬停动画的社交图标效果。为了更简单明了,以下示例仅创建四个图标(Facebook、Twitter、Google+、LinkedIn),并在每一步都附带代码展示和讲解。


【开原宝藏】30天学会CSS - DAY1 第一课_第1张图片

第 0 步:项目结构说明

先准备两个文件:

  1. index.html
    • HTML 的主体结构
  2. style.css
    • 样式代码,控制图标外观与动画

目录结构如下:

project/
   |- index.html
   |- style.css

后面每一步都会提示你往哪个文件里添加或修改代码。


第 1 步:创建最基础的 HTML 骨架

index.html 中,先写一个最简化的结构,并在 区域中引入 Font Awesome(用于社交媒体图标)。


DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>社交图标旋转动画示例title>

  
  <link
    rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
  >
  
  
  <link rel="stylesheet" href="style.css">
head>
<body>

  
  <ul class="icon-list">

    
    <li class="icon-item">
      <a href="#" class="icon-link">
        
        <span class="fa fa-facebook">span>
      a>
    li>

    <li class="icon-item">
      <a href="#" class="icon-link">
        <span class="fa fa-twitter">span>
      a>
    li>

    <li class="icon-item">
      <a href="#" class="icon-link">
        <span class="fa fa-google-plus">span>
      a>
    li>

    <li class="icon-item">
      <a href="#" class="icon-link">
        <span class="fa fa-linkedin">span>
      a>
    li>

  ul>

body>
html>

说明

你可能感兴趣的:(开源宝藏,css,前端)