CSS3 clip裁剪动画

CSS3 clip裁剪动画

下面是比较简单的例子

<html>
<head>
<style type="text/css">
img 
{
position:absolute;
clip:rect(0px 120px 151px 0px);
animation: clipMe 5s linear infinite;
}
	@-webkit-keyframes clipMe {
		   0% {
		 
		  }
		
		  100% {
		clip:rect(0px 0px 151px 0px);
		  }
		}
</style>
</head>

<body>
<p>clip 属性剪切了一幅图像:</p>
<p><img border="0" src="/i/eg_bookasp.gif" width="120" height="151"></p>
</body>

</html>

如果clip属性不理解的看下面1张图 秒懂!!
qq%e6%88%aa%e5%9b%be20161105144011

js播放图片序列帧

js播放图片序列帧
1 先预加载

var load_img = [];
for(k=0;k&lt;=16;k++){
load_img.push( '/cjsxy/images/chuanyue/'+k+'.jpg' );
}

//资源图片加载
jQuery.imgpreload(load_img, {
all: function() {

}
});

然后html ]

<script type="text/javascript" src="/js/jquery.imgpreload.min.js"></script>
<img class="chuansuo" />

最后js定时器播放

    $('.chuansuo').css('display', 'block');
    i++;
    if (i >= 16) {
        $('.chuansuo').css('display', 'none');
        i=0;
        return false;
    }
    $('.chuansuo').attr('src', "/cjsxy/images/chuanyue/" + i + ".jpg");
    ss = setTimeout(chuanyue, 200);

注意的问题 尽量吧图片压缩的小一点 这样渲染速度会快

文字和图片发光的简单demo

文字和图片发光的简单demo
阴影叠加下就好

<!DOCTYPE html>
<html>
<head>
<style>
h1
{
		color:#FFF;
    text-shadow: 0 0 5px #fff,0 0 5px #fff
           
               
}
.fwe
{
		color:#FFF;
    box-shadow: 0 0 5px #fff,0 0 15px #fff
           
               
}

</style>
</head>
<body>
	<div style="width:130px; height:130px; background:#FFF" class="fwe">
	
	</div>
<h1>文本阴影效果!</h1>
</body>
</html>

rem手机自适应框架

rem是按照html的字体大小来 所以 不同宽度浏览器 htmlfont-size不一样 就可以做到自适应了 此方法比百分比方便

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <div style="width:10rem; height:10.2rem; background: #000;"></div>
 <div style="width:10.6rem; height:10.3rem; background: #F00;"></div>
</body>

<script>
    (function (doc, win) {
        var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                      /*   var clientWidth = docEl.clientWidth;*/
                     var clientWidth = parseInt($('body').width());
                    if (!clientWidth) return;
                    docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
                };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>
</html>

ps:这个rem使用需要注意 这个js函数不是立马执行的 所以刚开始加载的时候最好加个进度条 或者用百分比 不然就会出现 js没执行完的rem效果 然后又出现js执行完加了rem的效果