css实现炫酷聚焦placeholder上浮输入框动画效果代码-html代码-BFW代码库

css实现炫酷聚焦placeholder上浮输入框动画效果代码

代码语言：html

代码描述：css实现炫酷聚焦placeholder上浮输入框动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
   
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
   <style>

* {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(200deg,#0c3483,#a2b6df)
}

.wrapper {
    width: 450px;
    background-color: #fff;
    padding: 40px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 8px
}

.wrapper .input-data {
    position: relative;
    width: 100%;
    height: 40px
}

.wrapper .input-data input {
    width: 100%;
    height: 100%;
    border: 0;
    font-size: 17px;
    border-bottom: 2px solid #c0c0c0
}

.wrapper .input-data input:focus ~ label,.wrapper .input-data input.........完整代码请登录后点击上方下载按钮下载查看