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)">

rem不兼容ie9以下所以 pc里面不要用rem
ps:1349px是网页设计图的可视区域 手机和ipad因为自适应通用 1239是一般网页的 有些网页宽度可能还要大 里面的css用百分比表示方便调整 font-size写成可视区域计算出来的值
但pc不行 不能通用css 相差有点大 建议分开

这样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 然后放最上面 图片放下面

CSS3幸运大转盘最简单的写法

点击开始 直接css动画 如果你要自己控制转到哪里 那就多写几个class 根据不同角度 运行不同的class。。

.zhuandong{
    animation: zhuandong 5s ease-in-out forwards;
    -webkit-animation: zhuandong 5s ease-in-out forwards;
}







@-webkit-keyframes zhuandong {
    0% {
    }

    100% {
        -webkit-transform:rotate(1123deg);


    }
}

@keyframes zhuandong {
    0% {
    }

    100% {
        transform:rotate(1123deg);
    }
}

CSS3自定义字体写法

CSS3自定义字体写法 ps:最好英文 中文字体太大 影响加载速度 (中文字体网上的ttf大多数是gb2312 不过页面UTF-8格式可以用 不会乱码 会自动转化为utf-8)

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        @font-face
        {
            font-family: myFirstFont;
            src: url('Sansation-Light.ttf')
        }

        .ew
        {
            font-family:myFirstFont;
        }
    </style>
</head>
<body>

<div class="ew">
    With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts
</div>


</body>
</html>

myFirstFont这个是自定义字体标识 可以自定义 注意和上面font-face对应就行了
ps:一定要在window.onload 后面显示该文字 因为一定要确保字体下载好后显示