css3自定义移动端滚动条

css3自定义移动端滚动条

 /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
    width: 10px;
    height: 10px;
    background-color: #FFF;
    border-radius: 10px;
}
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #160345;
}
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #FFF;
}

css 完美垂直居中解决方案兼容ie8以上等其他浏览器

css 完美垂直居中解决方案兼容ie8以上等其他浏览器

<!DOCTYPE html>
<html>
<head>
    <title>DIV水平垂直居中 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        #outer {
            display:table;
            height:400px;
            #position:relative;
            overflow:hidden;
        }
        #middle {
            width:300px;
            height: 400px;;
            display:table-cell;
            vertical-align:middle;
            #position:absolute;
            #top:50%;
            background: #F0E68C;
        }
        #inner {
            #position:relative;
            #top:-50%;

        }
    </style>
</head>
<body>
<div id="outer">
    <div id="middle">
        <div id="inner">
           水平居中</br>
           水平居中</br>
           水平居中</br>
           水平居中</br>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    //显示浏览器版本
    document.getElementById('ver').innerHTML = navigator.userAgent;
</script>

css3软键盘不盖住输入框的方法

css3软键盘不盖住输入框的方法

弹出软键盘的时候 最外面的容器高度就发生了变化 要减去软键盘高度了

<div class="p1">
    <img class="p1_bg" src="/yaluquan/images/1/p1_bg.jpg" alt="">
    <input type="text" id="id_phone">
    <input type="text" id="id_xuliehao">
    <img class="p1_tijiao" src="/yaluquan/images/1/p1_tijiao.png" alt="">
</div>
.p1{
    width:100%;
    height: auto;
    overflow: hidden;
    position: relative;
}
.p1_bg{
    width:100%;
}
#id_xuliehao{
    width: 10.1rem;
    height: 1.3rem;
    position: absolute;
    left: 11%;
    top: 82.5%;
    border: none;
    background: url(/yaluquan/images/1/p1_ininput2.png);
    background-size: 100% 100%;
    padding-left: 3rem;
}

/*高度用js控制 别用height:100%不然被压扁的*/
     var bodyheight=$('body').height();
      $('.p1_bg').css('height',bodyheight);

css3 transform做动画

css3 transform做动画
第一种用关键帧 这里就不说了 就说第二种方法用 transition属性 ps:jquery anim不支持transform动画 但css还是支持 还有就是不能动态修改关键帧属性 所以采用这个

         <img class="p1_wz1"src="{$yuming}/images/1/p1_wz1.jpg" />
.p1_wz1{
    width: 2.3rem;
    position: absolute;
    left: 41.6%;
    top: 4.2rem;

    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
}

然后运行下如下代码

$(".p1_wz1").css({"-webkit-transform":"rotate(260deg)"});

马上就旋转了起来 进度条可以参考这个方法来做

css3写下雨效果

css3写下雨效果

<div class="xiayuxiaoguo">
</div>
.xiayuxiaoguo{
    width:100%;
    height: 100%;
    position: absolute;
    left:0px;
    top:0px;
    z-index: 2;
}
.xiayu {
    animation: xiayu 2s forwards;
    -webkit-animation: xiayu 2s forwards;
}


@keyframes xiayu /* Firefox */
{

    to {
        top: 130%;
    }
}

@-webkit-keyframes xiayu /* Safari 和 Chrome */
{

    to {
        top: 130%;
    }
}
.yudi{
    width:2px;
    height: 10px;
    position: absolute;
    top:0%;
    background: #000;
}
xiayu();
function xiayu() {
    setTimeout(function () {
        var leftsuiji=RandomNumBoth(0,100);
        var yudi='<div style="left:'+leftsuiji+'%;" class="yudi xiayu"></div>';
        $(".xiayuxiaoguo").append(yudi);
        xiayu();
        if($('.yudi').length>=150){
            $('.yudi').remove();
        }
    },100)
}
function RandomNumBoth(Min,Max){
    var Range = Max - Min;
    var Rand = Math.random();
    var num = Min + Math.round(Rand * Range); //四舍五入
    return num;
}

大致就是利用jquery动态创建雨滴 然后播放css3动画就OK了