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);
    }
}

svg描边路径动画

svg描边路径动画

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>

        html,body{
            width:100%; height:100%;
        }
        /*1000是线条(path)的长度  stroke-dasharray和stroke-dashoffset的值要一样 stroke-dasharray的值就是每段的长度    stroke-dashoffset每段的偏移值 */
     path {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            -webkit-animation: dash 1s linear infinite;
        }

        @-webkit-keyframes dash {
            to {
                stroke-dashoffset: 0;
            }
        }
        .svgdonghua2{
            display: none;
        }
    </style>
</head>
<body>


<div style="width:300px; height:300px;" class="ds">
    <svg class="svgdonghua svgdonghua1" version="1.1" id="huaban1" xmlns="http://www.w3.org/2000/svg" width="31rem" height="31rem"  viewBox="0 0 167 167" preserveAspectRatio="xMaxYMax meet" >
        <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M1.2,1.011c1.885-0.986,6.254-0.182,8.395-0.182
	c12.128,0,24.256,0,36.383,0c13.245,0,26.49,0,39.735,0c3.012,0,5.487,0.271,8.421,1.165c6.376,1.941,12.309,2.474,18.951,2.665
	c5.468,0.157,10.894,0.001,16.298-0.724c4.636-0.622,9.396-0.374,14.094-0.374c6.421,0,12.851-0.041,19.267,0.002
	c0.196,24.462,0.439,48.991,0.21,73.474c-0.063,6.69-0.391,13.389-0.367,20.103c0.031,9.434,1.144,18.918-1.417,28.075
	c-0.944,3.375-0.21,4.532,0.259,7.825c0.572,4.013,0.765,7.719,0.975,11.732c0.186,3.555,3.401,8.736,0.915,12.164
	c-2.479,3.416-8.678,5.368-12.396,6.45c-6.105,1.777-12.556,1.496-18.925,1.563c-6.96,0.074-13.882,0.559-20.823,0.542
	c-29.13-0.067-58.268,0.183-87.387,0.183c-4.539,0-9.118,0.193-13.652,0c-1.883-0.08-5.043-0.18-6.566-1.272
	c-1.454-1.043-1.981-4.339-2.145-6.046c-0.266-2.767,0.061-5.548-0.264-8.322c-0.352-3.009-0.733-6.372-0.124-9.383
	c0.97-4.795,1.534-9.665,2.355-14.517c0.391-2.309,0.553-4.632,0.898-6.944c0.434-2.9,1.448-5.635,1.842-8.542
	c1.016-7.5,0.352-15.428,0.352-22.993c0-12.143,0.861-24.604-1.147-36.562C3.297,38.959,2.699,26.44,2.476,14.118
	C2.394,9.625,1.047,5.583,1.018,1.193"/>
</svg>
</div>



ps: viewBox 167 167是svg原本的宽度和高度 单位是像素 不能去改他 改width和height只能等比例缩放 不能拉伸

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 后面显示该文字 因为一定要确保字体下载好后显示

CSS3 motion-path 路径动画

CSS3 motion-path 路径动画 ps:只支持谷歌最新版浏览器 微信暂不支持奥

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .img{
            background: url(http://weiqunwang.net/demo/css3mask/kate.png) no-repeat;
            width:22px;
            height:33px;
            motion-path: path('M100,250 C 100,50 400,50 400,250');
            motion-offset:0%;
            -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/

        }


        @-webkit-keyframes mymove /*Safari and Chrome*/
        {
            to {  motion-offset:100%}
        }
    </style>
</head>
<body>
<div class="img">

</div>
</body>
</html>