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了

jquery控制css3动画播放

jquery控制css3动画播放 长按图片缩小 松开停止缩小 再长按继续缩小….如此循环下去

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .suoxiaoxiaoguo1 {
            animation: scale5 7s forwards;
            -webkit-animation: scale5 7s forwards;
        }

        @-webkit-keyframes scale5 {
            0% {

            }
            100% {
                -webkit-transform: scale(0.5, 0.5);
                opacity: 1;
            }
        }

        @keyframes scale5 {
            0% {

            }
            100% {
                -webkit-transform: scale(0.5, 0.5);
                opacity: 1;
            }
        }

        .pause {
            animation-play-state: paused;
        }

    </style>
</head>
<body>
<img class="ss" style="width:100%; height:100%;  "
     src="http://wx.bocweb.cn/peng/xiangsheng_yjdd/resource/assets/library/1.jpg"/>

<script type="text/javascript" src="/index/js/jquery.min.js"></script>
<script>
    $(function () {
        $('body').on('touchstart', function () {

            $('.ss').removeClass('pause');
            $('.ss').addClass('suoxiaoxiaoguo1');

        })
        $('body').on('touchend', function () {
            $('.ss').addClass('pause');
        })
    })


</script>
</body>
</html>

ps:如果要重置动画可以用
$(‘.ss’).removeClass(‘suoxiaoxiaoguo1’); setTimeout(function(){ $(‘.ss’).addClass(‘suoxiaoxiaoguo1’); },100);
remove以后要过100毫秒 添加动画才有效果

css3网站响应式写法

css3响应式写法
我用的是媒体查询方法
这个手机和pc都用统一用下面的media
因为media不支持ie9以下的浏览器 所有要加个判断

     
 <!--[if lte IE 8]>
    <link rel="stylesheet"  href="/index/pc/css/common.css?v=<?php echo time() ?>"">
    <![endif]-->
    <!--  当页面宽度大于等于1350px触发 pc端显示的css-->
    <link rel="stylesheet"  href="/index/pc/css/common.css"  media="(min-width:1350px)">

   <!--ipad和手机公用的css-->
    <link rel="stylesheet"  href="/index/css/common.css"  media="(max-width:1349px)">

    <!-- 当页面宽度大于等于768px 小于等于1290px触发 匹配ipad  笔记本 等其他设备宽度   ipad尺寸是768px 1349px是网页的内容宽度    -->
    <link rel="stylesheet"  href="/index/ipad/css/common.css"  media="(min-width:768px) and (max-width:1349px)">
    <!-- 当页面宽度小于等于767px触发 手机端显示的css*/-->
    <link rel="stylesheet"  href="/index/mobile/css/common.css"  media="(max-width:767px)">

PC 宽度写死也可以写成百分比 中间内容都用百分比

ipad和手机适用同个自适应规则

这样2个css完全分离了 更好的调试css了
注意字体大小最好不要小于12px(手机端低于12px看不清)

pc 1如果是宽屏显示都写宽度100% 宽屏图片要注意等比例缩小
2 文字用代码写 能提高加载速度 seo优化 不会低于12号字体

其他设备都采取 自适应 百分比写法 来保证所有文字大小的统一

测试的时候测试iphone ipad 还有 1290 宽度情况下的页面

注意:如果碰到编辑器编辑生成内容需要自适应的时候 在移动端 图片要设置百分比 编辑图片的时候不能写宽度和高度哦居中就行 文字字体大小不用管

css3自定义上传图片输入框的方法

css3自定义上传图片输入框的方法

代码如下

   <form class="form1">
          <img  src="/kelatoupiao/images/p6/p6_wz1.png" alt="" class="p6_wz1">
            <input  type="file" name="file_temporaryImage" onchange="TemporaryMedia();"/>
        </form>

.p6_wz1 {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;

}

.form1 {
    width: 2.4rem;
    height: 2.4rem;
    float: left;
    margin-left: 0.43rem;
    margin-top: 0.03rem;
    position: relative;

}

.form1 input {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0;
}

ps:原理就是input设置透明度0 然后放最上面 图片放下面