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:svg设置宽度并不能修改里面的宽度 viewBox 167 167是svg原本的宽度和高度 单位是像素 不能去改他 改width和height只能等比例缩放 不能拉伸

更多svg自适应的理解查看 http://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/

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>

CSS 滤镜Filter亮度动画

-webkit-filter:brightness 值越高 亮度越亮

<!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:355px;
            height:296px;
            -webkit-filter:brightness(1);
            -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
        }


        @-webkit-keyframes mymove /*Safari and Chrome*/
        {

            to {  -webkit-filter:brightness(20);}
        }
    </style>
</head>
<body>
<div class="img">

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

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

文字和图片发光的简单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的效果

CSS3 flex垂直居中 水平居中终极解决方案(史上最简单的写法)

CSS3 flex垂直居中 水平居中终极解决方案(史上最简单的写法)
//align-items: center; 垂直居中
// justify-content:center; 水平居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
	<title>RunJS 演示代码</title>

		<style>
			.ccs1{
				width:30%; height:100px;    display:flex;/* android 4.4 */  justify-content:center; align-items: center; background:#F00; 
			}
		</style>
  </head>
<body>
	<div class="ccs1">
		wefwefewfewf
	</div>
  </body>
</html>

ps:此时如果用了 text-align: center; 在 display: flex; 下就没有水平居中效果了

注意此方法 安卓低版本不支持 所以不建议用

当然还有其他可行方案
右对齐可以采用float:right
水平居中可以用margin:0 auto;考虑到不能用float:left可以在外面再加一层容器即可
垂直居中可以参考这个文章 http://newmiracle.cn/?p=2079