文本框动画

原创 2018年04月15日 21:54:43
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .out {
            width: 320px;
            /*height: 200px;*/
            margin: 100px auto;
            position: relative;
            text-align: center;
        }

        .tips {
            width: 110px;
            height: 0;
            position: absolute;
            top: -25px;
            right: 0;
            font-size: 14px;
            color: #ffffff;
            background-color: #333333;
            border-radius: 3px;
            text-align: center;
        }
        input {
            width: 320px;
            height: 38px;
            font-size: 16px;
        }
        .user {
            font-size: 16px;
            position: absolute;
            top: 9px;
            left: 16px;
            padding: 0 2px;
            background-color: #ffffff;
            transition: all 0.5s;
            color: #aaa;
        }
    </style>
</head>
<body>
<form action="">
    <div class="out">
        <div class="user">用户名/手机号</div>
        <div class="tips">请输入登录账号</div>
        <input type="text" id="button">
    </div>
</form>
<script>
    document.getElementById('button').onfocus = function () {
        var h = 0;
        var timer = setInterval(function () {
            h += 2;
            document.getElementsByClassName('tips')[0].style.height = h + 'px';
            if (h > 20) {
                clearInterval(timer);
            }
        }, 10);
        document.getElementsByClassName('user')[0].style.transform = 'scale(0.7) translate(-25px,-29px)';
        document.getElementsByClassName('user')[0].style.color = 'deepskyblue';
    };
    document.getElementById('button').onblur = function () {
        var h = parseInt(document.getElementsByClassName('tips')[0].style.height);
        var timer = setInterval(function () {
            h -= 2;
            document.getElementsByClassName('tips')[0].style.height = h + 'px';
            if (h < 0) {
                clearInterval(timer);
            }
        }, 10);
        document.getElementsByClassName('user')[0].style.transform = 'none';
        document.getElementsByClassName('user')[0].style.color = '#aaa';
    }
//    事件方法
    document.getElementsByClassName('user')[0].onclick=function () {
        document.getElementsByTagName('input')[0].focus();
    }
</script>
</body>
</html>

Android核心技术——动画与图形

讲解了动画的三种类型,补间动画,帧动画,属性动画,图形绘制,Bitmap抽样比例,内存缓存,磁盘缓存。传说中的二级缓存实现。
  • 2017年01月04日 18:10

弹出输入文本框上弹的动画效果

输入文本框上弹的动画效果
  • u012827205
  • u012827205
  • 2014-08-20 11:22:17
  • 2695

Android 各种动画效果的实现

  • 2015年08月14日 10:38
  • 1.9MB
  • 下载

鼠标换过 边框 变色 并带有动画效果

效果图: 鼠标滑过之前 html: 职位名称 ...
  • qq_30632003
  • qq_30632003
  • 2017-03-03 15:08:10
  • 183

Animy.js动画插件

  • 2015年06月08日 14:50
  • 62KB
  • 下载

WPF中自动增加行(动画)的TextBox

WPF中自动增加行(动画)的TextBoxWPF中的Textbox控件是可以自动换行的,只要设置TextWrapping属性为”Wrap”即可,但是存在一个问题:Textbox的高度是固定的,当输入文...
  • openzpc
  • openzpc
  • 2016-07-23 21:27:49
  • 726

VFP与Flash之间的相互控制--数据交互

[原创]VFP与Flash之间的相互控制--数据交互上篇文章(http://dev.csdn.net/article/35/35481.shtm)中主要说明了Flash来控制vfp,是单向的。这篇则是...
  • yasur
  • yasur
  • 2004-09-05 23:43:00
  • 1648

WPF TextBlock 文本 动画

无聊中想给文本信息加一个动画,提高用户对这块信息的关注。下面的一段代码可以实现上诉要求。       RoutedEvent="Loaded">                ...
  • wzhiu
  • wzhiu
  • 2012-06-04 17:02:02
  • 2506

# 输入框的抖动效果

比如你在Edittext输入为空的时候点击提交让其抖动在res目录下新建anim文件,在anim目录下建一个自己的 shake.xml ...
  • duandonghui
  • duandonghui
  • 2016-06-30 20:16:52
  • 358

用flash动作脚本动态创建和控制文本框

在Flash 5中文本框只能在设计阶段创建,而在Flash MX中,我们可以使用动作脚本在运行期动态创建。在Flash MX的动作脚本语言中新增了两个对象:TextField(文本框)对象和TextF...
  • aiwtu
  • aiwtu
  • 2007-04-10 19:20:00
  • 2826
收藏助手
不良信息举报
您举报文章:文本框动画
举报原因:
原因补充:

(最多只允许输入30个字)