html+css+js组件

故及
143 阅读3分钟

登录界面

html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Form Input Wave</title>
</head>

<body>
  <div class="container">
    <h1>辛苦了！</h1>
    <form>
      <div class="form-control">
        <input type="text" required>
        <label>Email</label>
        <!-- <label>
          <span style="transition-delay: 0ms">E</span>
          <span style="transition-delay: 50ms">m</span>
          <span style="transition-delay: 100ms">a</span>
          <span style="transition-delay: 150ms">i</span>
          <span style="transition-delay: 200ms">l</span>
        </label> -->
      </div>
      <div class="form-control">
        <input type="password" required>
        <label>Password</label>
      </div>
      <button class="btn">Login</button>
      <p class="text">Don't have an account? <a href="#">Register</a> </p>
    </form>
  </div>
  <script>
    const labels = document.querySelectorAll('.form-control label')

    labels.forEach(label => {
      label.innerHTML = label.innerText
        .split('')
        .map((letter, idx) => `<span style="transition-delay:${idx * 50}ms">${letter}</span>`)
        .join('')
    })
  </script>
</body>

</html>

css

* {
  /* 属性定义了应该如何计算一个元素的总宽度和总高度。 */
  box-sizing: border-box;
}

body {
  background-color: steelblue;
  color: #fff;
  /* 弹性布局 */
  display: flex;
  /* 主轴 */
  flex-direction: row;
  /* 侧轴对齐方式:居中 */
  align-items: center;
  /* 主轴对齐方式 */
  justify-content: center;
  /* 可见高度 */
  height: 100vh;
  /* 溢出隐藏 */
  overflow: hidden;

  margin: 0;
}

/* 设置阴影 */
.container {
  background-color: rgba(0, 0, 0, 0.4);
  padding: 20px 40px;
  /* 设置元素的外边框圆角 */
  border-radius: 5px;
}

.container h1 {
  text-align: center;
  margin-bottom: 30px;
}

.container a {
  /* 去掉a链接默认下划线 */
  text-decoration: none;
  color: lightblue;
}

.btn {
  /* 属性设置光标的类型（如果有），在鼠标指针悬停在元素上时显示相应样式。 */
  cursor: pointer;
  /*行内元素 */
  display: inline-block;
  width: 100%;
  background: lightblue;
  padding: 15px;
  font-family: inherit;
  font-size: 16px;
  border: 0;
  border-radius: 5px;
}

/* 获取焦点状态 */
.btn:focus {
  /* 设置显示轮廓 */
  /* outline: 0; */
  outline: solid #61ec558a;
}

/* 选中的是激活状态的按钮元素 */
.btn:active {
  /* 设置按钮点击的按钮缩小的动态效果 */
  transform: scale(98%);
}

/* 设置p标签的上外边距 */
.text {
  margin-top: 30px;
}

.form-control {
  /* 是计算后位置属性为 relative的元素 */
  position: relative;
  margin: 20px 0 40px;
  width: 300px;
}

.form-control input {
  /* 设置背景颜色透明 */
  background-color: transparent;
  border: 0;
  /* 设置下边框*/
  border-bottom: 2px #fff solid;
  display: block;
  width: 100%;
  padding: 15px 0;
  font-size: 18px;
  color: #fff;
  /* 设置相对定位 元素不脱离文档流 */
  position: relative;
  /* 定位层级 */
  z-index: 100;
}

/* 获取焦点 与内容验证正确生效*/
.form-control input:focus,
.form-control input:valid {
  /* 设置显示轮廓 */
  outline: 0;
  /* 设置边框颜色 */
  border-bottom-color: rgb(250, 12, 12);
}

.form-control label {
  /* 绝对定位 脱离文档流 */
  position: absolute;
  top: 15px;
  left: 0;
  /*  
  none
  元素永远不会成为鼠标事件的target。
  但是，当其后代元素的pointer-events属性指定其他值时，
  鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
  */
  pointer-events: none;
}


.form-control label span {
  display: inline-block;
  font-size: 18px;
  min-width: 5px;
  /* 动画 */
  transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.form-control input:focus + label span,
.form-control input:valid + label span {
  color: lightblue;
  transform: translateY(-30px);
}

vue3

<script setup lang="ts">
import { ref } from 'vue';
// 用户名
const username = 'username';
// 密码
const password = 'password'
// 列表
const usernameList = ref(username.split('').map((letter)=>letter));
const passwordList = ref(password.split('').map((letter)=>letter));

</script>

<template>
    <div class="main">
        <div class="container">
            <h1>登录</h1>
            <form>
            <div class="form-control">
                <input type="text" required>
                <label>
                  <span v-for="(item,index) in usernameList" :key="index" :style="{ transitionDelay: index * 60 + 'ms' }">{{ item }}</span>
                </label>
            </div>
            <div class="form-control">
                <input type="password" required>
                <label>
                  <span v-for="(item,index) in passwordList" :key="index" :style="{ transitionDelay: index * 60 + 'ms' }">{{ item }}</span>
                </label>
            </div>
            <button class="btn">登录</button>
            <p class="text">没有账号？ <a href="#">注册</a> </p>
            </form>
        </div>
    </div>

</template>

效果图

image.png

导航条

<!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">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: rgb(221, 230, 245);
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        .slipNav {
            width: 920px;
            margin: 100px auto;
        }

        .slipNav a {
            position: relative;
            float: left;
            width: 150px;
            line-height: 50px;
            text-align: center;
            font-size: 18px;
            color: #000;
            z-index: 1;
        }

        .slipNav nav {
            position: relative;
            background-color: white;
            border-radius: 50px;
        }

        .slipNav nav::after {
            content: '';
            display: block;
            clear: both;
        }

        .slipNav nav :hover {
            color: #54a0ff;
        }

        .selected {
            color: white !important;
        }

        .line {
            position: absolute;
            top: 50px;
            left: 35px;
            /* 线的长宽 */
            height: 3px;
            width: 80px;
            background-color: #54a0ff;
            transition: all .3s;
        }

        .bgc {
            position: absolute;
            top: 0px;
            left: 25px;
            /* 线的长宽 */
            height: 50px;
            width: 100px;
            border-radius: 50px;
            background-color: rgb(84, 126, 233);
            transition: all .3s;
        }
    </style>
</head>

<body>
    <div class="slipNav">
        <nav>
            <a href="javascript:;" class="selected">首页</a>
            <a href="javascript:;">我的</a>
            <a href="javascript:;">联系</a>
            <a href="javascript:;">订阅</a>
            <a href="javascript:;">管理</a>
            <a href="javascript:;">相册</a>
            <!-- 底部线条 -->
            <div class="line"></div>
            <!-- 背景滑块 -->
            <div class="bgc"></div>
        </nav>
    </div>
    <script>
        let line = document.querySelector('.line');
        let slipNav = document.querySelector('.slipNav nav');
        let slipAll = document.querySelectorAll('.slipNav nav a');
        //给所有的a标签添加index属性，方便后面查找
        for (let i = 0; i < slipAll.length; i++) {
            slipAll[i].setAttribute('data-index', i)
        }
        //鼠标移入底下的线跟着移动
        slipNav.addEventListener('mouseover', function (e) {
            let target = e.target
            let len = 150 * target.dataset.index + 35;// 计算当前的left值
            line.style.left = len + 'px';
        })
        //鼠标移出时底下的线回到原来的位置
        slipNav.addEventListener('mouseleave', function (e) {
            let selected = document.querySelector('.slipNav .selected')
            let len = 150 * selected.dataset.index + 35 // 线回到被选择元素的位置
            line.style.left = len + 'px'
        })
        //鼠标点击时背景颜色的滑块滑倒相应的位置
        slipNav.addEventListener('click', function (e) {
            let target = e.target;
            let bgc = document.querySelector('.bgc')
            //排他思想
            for (let i = 0; i < slipAll.length; i++) {
                slipAll[i].classList.remove('selected')
            }
            target.classList.add('selected');// 通过添加类名实现颜色变化
            let len = 150 * target.dataset.index + 25 // 计算背景滑块left值
            bgc.style.left = len + 'px';
        })
    </script>
</body>

</html>

效果图

image.png

avatar
文章
阅读
粉丝