利用translate()完成一个动态表单效果：

最新推荐文章于 2024-07-25 10:18:55 发布

品风 ₯ 未醉

最新推荐文章于 2024-07-25 10:18:55 发布

阅读量183

点赞数

分类专栏： js+html+css的小练习文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_48342617/article/details/121037624

版权

js+html+css的小练习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

视频效果：

通过transform和transition来实现动态表单

思路： 使用颜色渐变创建出一个颜色盒子，然后使用translate将其移动形成动态效果

代码：

<!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>动态表单</title>
    <style>
        /* 清楚系统自带的样式 */
        *{
            margin: 0px;
            padding: 0px;
        }
        /* 先设置好main的大小 */
        body{
            width: 100vw;
            height: 100vh;
            background-color: aqua;
            /* 设置弹性布局 */
            display: flex;
            /* 将里面的内容居中 */
            justify-content: center;
            align-items: center;
        }
        /* 设置div的一些样式 */
        .filed{
            position: relative;
            border:1px solid ;
            background-color: white;
            border-color: cadetblue;
            margin-bottom: 20px;
            /* 溢出隐层 */
            overflow: hidden;
        }
        /* 为input加入一个动态效果 */
        .filed::after{
            position: absolute;
            content: '';
            width: 100%;
            height: 3px;
            left: 0px;
            bottom: 0px;
            /* 背景使用渐变效果 */
            background:linear-gradient(to right,white,#1abc9c,#e74c3c,#f1c40f);
            /* 添加一个过渡时间 */
            transition-duration: 3s;
            /* 将其向左滑动100%，并隐藏起来 */
            transform: translateX(-100%);
        }

        /* 当鼠标悬浮在filed上面是在滑动回去 */
        .filed:hover::after{
            transform: translateX(100%);
        }
        /* 设置两个input的一些样式 */
        .filed input{
            height: 25px;
          /* 清楚input自带的边框 */
          border: none;
          outline: none;
          display: flex;
          padding: 10px;
         /* 将里面的内容居中 */
         justify-content: center;
         align-items: center;
        }
    </style>
</head>
<body>
    <main>
        <div class="filed" >
            <input type="text" placeholder="莞工杰仔">
        </div>
        <div class="filed">
            <input type="text" placeholder="莞工杰仔">
        </div>
    </main>
</body>
</html>

要掌握的知识点：

1.背景颜色渐变
2.translate();

品风 ₯ 未醉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用translate()完成一个动态表单效果：

视频效果：思路：使用颜色渐变创建出一个颜色盒子，然后使用translate将其移动形成动态效果代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev
复制链接

扫一扫

专栏目录