input交替和css动画animation

input交替出现兼容ie8实现placeholder

//html

<div class="con_account_info">
    <input type="text" name="" id="" value="" placeholder="请输入账号" title="请输入账号" class="account_info_number"/>
    <div class="account_info_passWrap">
        <input type="text" name="" id="" value="" placeholder="请输入密码" title="请输入密码" class="account_info_passWord"/>
        <input type="password" name="" id="" value="" title="请输入密码" class="account_info_passWordReal"/>
    </div>
</div>

//css

.con_account_info{
    overflow: hidden;
    padding: 0 50px;
}
.con_account_info .account_info_number{
    font-size: 14px;
    width: 100%;
    height: 38px;
    line-height: 36px;
    padding: 0 10px 0 26px;
    border: 1px solid #dedede;
    box-sizing: border-box;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    behavior: url(../js/PIE.htc);
    position: relative;
    background: #f7f8fc url(../images/login/icon_tel.png) no-repeat 10px center;
}
.account_info_passWrap{
    width: 100%;
    height: 38px;
    border: 1px solid #dedede;
    box-sizing: border-box;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    behavior: url(../js/PIE.htc);
    margin-top: 10px;
    position: relative;
}
.account_info_passWrap input{
    font-size: 14px;
    width: 100%;
    height: 36px;
    line-height: 36px;
    padding: 0 10px 0 26px;
    border: none;
    box-sizing: border-box;
    background: #f7f8fc url(../images/login/icon_lock.png) no-repeat 10px center;
}
.account_info_passWordReal{
    display: none;
}

//js

//获取焦点
$('.account_info_passWord').on('focus',function(){
    $(this).hide();
    $('.account_info_passWordReal').show().focus();
});
//失去焦点
$('.account_info_passWordReal').on('blur',function(){
    if(!$(this).val()||$(this).val()=="请输入密码"){
        $(this).hide();
        $('.account_info_passWord').show().blur();
    }
});
//登陆
$('.con_account_btn span').on('click',function(){
    var userAccountNumber = $('.account_info_number').val().trim();
    var userAccountPassWord = $('.account_info_passWordReal').val().trim();
    if(!checkInput(userAccountNumber)&&!checkInput(userAccountPassWord)){
        alert('请输入账号和密码！');
    }else if(!checkInput(userAccountNumber)){
        alert('请输入账号！');
    }else if(!checkInput(userAccountPassWord)){
        alert('请输入密码！');
    }else{
        if(userAccountNumber=='admin'&&userAccountPassWord==888888){
            window.open('../index.html','_self');
        }else{
            alert('登录失败！');
        }
    }
});
//监听回车登录
$('.account_info_number,.account_info_passWordReal').keydown(function(event){
    if(event.keyCode==13){
        $('.con_account_btn span').click();
    }
});

主流浏览器与ie实现动画animation

//html

<div class="section_footer_flow pa">
    <div class="footer_flow_wrap pa">
        <div></div><div></div>
    </div>
</div>

//css

.section_footer_flow{
    left: 0;
    right: 0;
    height: 60px;
    overflow: hidden;
}
@-webkit-keyframes animatedBackground {
  0%    { left: -100%; }
  100%  { left: 0; }
}
@-moz-keyframes animatedBackground {
  0%    { left: -100%; }
  100%  { left: 0; }
}
@-o-keyframes animatedBackground {
  0%    { left: -100%; }
  100%  { left: 0; }
}
@-ms-keyframes animatedBackground {
  0%    { left: -100%; }
  100%  { left: 0; }
}
@keyframes animatedBackground {
  0%    { left: -100%; }
  100%  { left: 0; }
}
.footer_flow_wrap{
    top: 0;
    left: -100%;
    width: 200%;
    height: 60px;
    -webkit-animation: animatedBackground 10s linear infinite;
    -moz-animation: animatedBackground 10s linear infinite;
    -o-animation: animatedBackground 10s linear infinite;
    -ms-animation: animatedBackground 10s linear infinite;
    animation: animatedBackground 10s linear infinite;
}
.footer_flow_wrap div{
    float: left;
    width: 50%;
    height: 60px;
    background: url(../images/login/bg_flow2.png) no-repeat left center;
    -webkit-background-size: 100% 60px;
    -moz-background-size:  100% 60px;
    -o-background-size:  100% 60px;
    background-size: 100% 60px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/login/bg_flow2.png',sizingMethod='scale');
}

//js兼容IE

if(!-[1,]){
    var windowWidth = Number($(window).width());
    var offsetbg = -windowWidth;
    setInterval(function bg() {
        if (offsetbg >= 0) {
            offsetbg = -windowWidth;
        }
        offsetbg += 1;
        $(".footer_flow_wrap").css("left", offsetbg + "px");
    },2);
}