css 实现表单文字对齐效果

1.场景

表单在我们编程中是一个很常见的需求，我们可以直接使用 UI 框架如element-UI就能很快速的实现一个表单

表单.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>实现表单文字对齐效果</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css" />
    <script src="//cdn.jsdelivr.net/npm/vue@3"></script>
    <script src="//cdn.jsdelivr.net/npm/element-plus"></script>
    <style>
      .container-box {
        width: 620px;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="container-box">
        <el-form :model="form" label-width="120px">
          <el-form-item label="姓名">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="form.age" />
          </el-form-item>
          <el-form-item label="兴趣爱好">
            <el-input v-model="form.hobby" />
          </el-form-item>
          <el-form-item label="最喜欢的食物">
            <el-input v-model="form.favoriteFood" />
          </el-form-item>
          <el-form-item label="最喜欢的颜色">
            <el-input v-model="form.favoriteColor" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary">提交</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <script>
      const App = {
        data() {
          return {
            form: {
              name: '',
              age: '',
              hobby: '',
              favoriteFood: '',
              favoriteColor: '',
            },
          }
        },
      }

      const app = Vue.createApp(App)
      app.use(ElementPlus)
      app.mount('#app')
    </script>
  </body>
</html>

Zaylen大约 2 分钟

翻转时钟动画实现

1. 背景

css 实现表单文字对齐效果

1.场景