码迷，mamicode.com
首页 > Web开发 > 详细

css3特效

时间：2015-08-31 21:32:26      阅读：294      评论：0      收藏：0      [点我收藏+]

标签：

1.css3的transform

属性:

none：无转换
matrix(<number>,<number>,<number>,<number>,<number>,<number>)：
以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate(<length>[, <length>])：指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
translateX(<length>)：指定对象X轴（水平方向）的平移
translateY(<length>)：指定对象Y轴（垂直方向）的平移
rotate(<angle>)：指定对象的2D rotation（2D旋转），需先有transform-origin属性的定义
scale(<number>[, <number>])：指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
scaleX(<number>)：指定对象X轴的（水平方向）缩放
scaleY(<number>)：指定对象Y轴的（垂直方向）缩放
skew(<angle> [, <angle>])：指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
skewX(<angle>)：指定对象X轴的（水平方向）扭曲
skewY(<angle>)：指定对象Y轴的（垂直方向）扭曲
应用:
<style>
h1{clear:both;padding-top:10px;font-size:16px;font-family:Arial;}
.test{zoom:1;width:700px;margin:0;padding:0;list-style:none;}
.test li{float:left;margin:20px 30px 0 0;border:1px solid #000;}
.test li p{width:300px;height:100px;margin:0;background:#ddd;}
.test .matrix{-moz-transform:matrix(0,1,1,1,10px,10px);-webkit-transform:matrix(0,1,1,1,10,10);-o-transform:matrix(0,1,1,1,10,10);-ms-transform:matrix(0,1,1,1,10,10);transform:matrix(0,1,1,1,10,10);}
.test .translate p{-moz-transform:translate(5%,10px);-webkit-transform:translate(10px,10px);-o-transform:translate(10px,10px);-ms-transform:translate(10px,10px);transform:translate(10px,10px);}
.test .translate2 p{-moz-transform:translate(-10px,-10px);-webkit-transform:translate(-10px,-10px);-o-transform:translate(-10px,-10px);-ms-transform:translate(-10px,-10px);transform:translate(-10px,-10px);}
.test .translateX p{-moz-transform:translateX(20px);-webkit-transform:translateX(20px);-o-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}
.test .translate3 p{-moz-transform:translate(20px);-webkit-transform:translate(20px);-o-transform:translate(20px);-ms-transform:translate(20px);transform:translate(20px);}
.test .translateY p{-moz-transform:translateY(10px);-webkit-transform:translateY(10px);-o-transform:translateY(10px);-ms-transform:translateY(10px);transform:translateY(10px);}
.test .translate4 p{-moz-transform:translate(0,10px);-webkit-transform:translate(0,10px);-o-transform:translate(0,10px);-ms-transform:translate(0,10px);transform:translate(0,10px);}
.test .rotate{-moz-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);-o-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg);}
.test .rotate2{-moz-transform:rotate(5deg);-webkit-transform:rotate(5deg);-o-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg);}
.test .scale{-moz-transform:scale(.8);-webkit-transform:scale(.8);-o-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);}
.test .scale2{-moz-transform:scale(1.2);-webkit-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2);}
.test .skew{-moz-transform:skew(-5deg);-webkit-transform:skew(-5deg);-o-transform:skew(-5deg);-ms-transform:skew(-5deg);transform:skew(-5deg);}
.test .skew2{-moz-transform:skew(-5deg,-5deg);-webkit-transform:skew(-5deg,-5deg);-o-transform:skew(-5deg,-5deg);-ms-transform:skew(-5deg,-5deg);transform:skew(-5deg,-5deg);}
</style>
</head>
<body>
<h1>矩阵变换：matrix()</h1>
<ul class="test">
    <li class="matrix">
        <p>transform:matrix(0,1,1,1,10,10)</p>
    </li>
</ul>
<h1>平移：translate(), translateX(), translateY()</h1>
<ul class="test">
    <li class="translate">
        <p>transform:translate(5%,10px)</p>
    </li>
    <li class="translate2">
        <p>transform:translate(-10px,-10px)</p>
    </li>
    <li class="translateX">
        <p>transform:translateX(20px)</p>
    </li>
    <li class="translate3">
        <p>transform:translate(20px)</p>
    </li>
    <li class="translateY">
        <p>transform:translateY(10px)</p>
    </li>
    <li class="translate4">
        <p>transform:translate(0,10px)</p>
    </li>
</ul>
<h1>旋转：rotate()</h1>
<ul class="test">
    <li class="rotate">
        <p>transform:rotate(-15deg)</p>
    </li>
    <li class="rotate2">
        <p>transform:rotate(15deg)</p>
    </li>
</ul>
<h1>缩放：scale()</h1>
<ul class="test">
    <li class="scale">
        <p>transform:scale(.8)</p>
    </li>
    <li class="scale2">
        <p>transform:scale(1.2)</p>
    </li>
</ul>
<h1>扭曲：skew()</h1>
<ul class="test">
    <li class="skew">
        <p>transform:skew(-5deg)</p>
    </li>
    <li class="skew2">
        <p>transform:skew(-5deg,-5deg)</p>
    </li>
</ul>
</body>

2.css3动画
属性:
[ animation-name ]：检索或设置对象所应用的动画名称
[ animation-duration ]：检索或设置对象动画的持续时间
[ animation-timing-function ]：检索或设置对象动画的过渡类型
[ animation-delay ]：检索或设置对象动画延迟的时间
[ animation-iteration-count ]：检索或设置对象动画的循环次数
[ animation-direction ]：检索或设置对象动画在循环中是否反向运动
[ animation-play-state ]：检索或设置对象动画的状态。
应用:
<style>
div{position:absolute;top:50%;left:50%;overflow:hidden;width:300px;height:150px;margin:-75px 0 0 -150px;border:3px solid #eee;background:#e0e0e0;}
span{opacity:0;display:block;height:50px;font:bold 14px/50px Georgia;}
.a1{
    -webkit-transform:translate(60px);
    -webkit-animation:animations 2s ease-out;
    -moz-transform:translate(55px);
    -moz-animation:animations 2s ease-out;
    -o-transform:translate(55px);
    -o-animation:animations 2s ease-out;
    -ms-transform:translate(55px);
    -ms-animation:animations 2s ease-out;
    transform:translate(55px);
    animation:animations 2s ease-out;
}
@-webkit-keyframes animations{
    0%{-webkit-transform:translate(0);opacity:0;}
    50%{-webkit-transform:translate(30px);opacity:1;}
    70%{-webkit-transform:translate(35px);opacity:1;}
    100%{-webkit-transform:translate(60px);opacity:0;}
}
@-moz-keyframes animations{
    0%{-moz-transform:translate(0);opacity:0;}
    50%{-moz-transform:translate(30px);opacity:1;}
    70%{-moz-transform:translate(35px);opacity:1;}
    100%{-moz-transform:translate(60px);opacity:0;}
}
@-o-keyframes animations{
    0%{-o-transform:translate(0);opacity:0;}
    50%{-o-transform:translate(30px);opacity:1;}
    70%{-o-transform:translate(35px);opacity:1;}
    100%{-o-transform:translate(60px);opacity:0;}
}
@-ms-keyframes animations{
    0%{-ms-transform:translate(0);opacity:0;}
    50%{-ms-transform:translate(30px);opacity:1;}
    70%{-ms-transform:translate(35px);opacity:1;}
    100%{-ms-transform:translate(60px);opacity:0;}
}
@keyframes animations{
    0%{transform:translate(0);opacity:0;}
    50%{transform:translate(30px);opacity:1;}
    70%{transform:translate(35px);opacity:1;}
    100%{transform:translate(60px);opacity:0;}
}
.a3{
    -webkit-transform:translate(100px);
    -webkit-animation:animations3 2s ease-out 2s;
    -moz-transform:translate(100px);
    -moz-animation:animations3 2s ease-out 2s;
    -o-transform:translate(100px);
    -o-animation:animations3 2s ease-out 2s;
    -ms-transform:translate(100px);
    -ms-animation:animations3 2s ease-out 2s;
    transform:translate(100px);
    animation:animations3 2s ease-out 2s;
}
@-webkit-keyframes animations3{
    0%{-webkit-transform:translate(160px);opacity:0;}
    50%{-webkit-transform:translate(130px);opacity:1;}
    70%{-webkit-transform:translate(125px);opacity:1;}
    100%{-webkit-transform:translate(100px);opacity:0;}
}
@-moz-keyframes animations3{
    0%{-moz-transform:translate(160px);opacity:0;}
    50%{-moz-transform:translate(130px);opacity:1;}
    70%{-moz-transform:translate(125px);opacity:1;}
    100%{-moz-transform:translate(100px);opacity:0;}
}
@-o-keyframes animations3{
    0%{-o-transform:translate(160px);opacity:0;}
    50%{-o-transform:translate(130px);opacity:1;}
    70%{-o-transform:translate(125px);opacity:1;}
    100%{-o-transform:translate(100px);opacity:0;}
}
@-ms-keyframes animations3{
    0%{-ms-transform:translate(160px);opacity:0;}
    50%{-ms-transform:translate(130px);opacity:1;}
    70%{-ms-transform:translate(125px);opacity:1;}
    100%{-ms-transform:translate(100px);opacity:0;}
}
@keyframes animations3{
    0%{transform:translate(160px);opacity:0;}
    50%{transform:translate(130px);opacity:1;}
    70%{transform:translate(125px);opacity:1;}
    100%{transform:translate(100px);opacity:0;}
}
.a2{
    text-align:center;font-size:26px;
    -webkit-animation:animations2 5s ease-in-out 4s;
    -moz-animation:animations2 5s ease-in-out 4s;
    -o-animation:animations2 5s ease-in-out 4s;
    -ms-animation:animations2 5s ease-in-out 4s;
    animation:animations2 5s ease-in-out 4s;
}
@-webkit-keyframes animations2{
    0%{opacity:0;}
    40%{opacity:.8;}
    45%{opacity:.3;}
    50%{opacity:.8;}
    55%{opacity:.3;}
    60%{opacity:.8;}
    100%{opacity:0;}
}
@-moz-keyframes animations2{
    0%{opacity:0;}
    40%{opacity:.8;}
    45%{opacity:.3;}
    50%{opacity:.8;}
    55%{opacity:.3;}
    60%{opacity:.8;}
    100%{opacity:0;}
}
@-o-keyframes animations2{
    0%{opacity:0;}
    40%{opacity:.8;}
    45%{opacity:.3;}
    50%{opacity:.8;}
    55%{opacity:.3;}
    60%{opacity:.8;}
    100%{opacity:0;}
}
@-ms-keyframes animations2{
    0%{opacity:0;}
    40%{opacity:.8;}
    45%{opacity:.3;}
    50%{opacity:.8;}
    55%{opacity:.3;}
    60%{opacity:.8;}
    100%{opacity:0;}
}
@keyframes animations2{
    0%{opacity:0;}
    40%{opacity:.8;}
    45%{opacity:.3;}
    50%{opacity:.8;}
    55%{opacity:.3;}
    60%{opacity:.8;}
    100%{opacity:0;}
}
</style>
</head>
<body>
<div>
    <span class="a1">CSS3 Animations</span>
    <span class="a2">CSS3 Animations</span>
    <span class="a3">CSS3 Animations</span>
</div>
</body>

css3特效

标签：

原文地址：http://www.cnblogs.com/xxxo/p/haha.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！