css3特效

最新推荐文章于 2024-02-14 12:52:46 发布

转载最新推荐文章于 2024-02-14 12:52:46 发布 · 86 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xxxo/p/haha.html

本文深入探讨了CSS3的transform属性及其应用，包括矩阵变换、平移、旋转、缩放、扭曲等，同时展示了如何使用动画实现动态效果。

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>

转载于:https://www.cnblogs.com/xxxo/p/haha.html