CSS

2D、3D转换

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸

.div{
    /*2D*/
    transform:translate(200px,100px);/*移动到距离 x 200px，距离 y 100px*/
    -webkit-transfom:translate(200px,100px); /*safari chrome*/
    -ms-transform:translate(200px,100px);/*IE 360*/
    -o-transform:translate(200px,100px);/*opera*/
    -moz-transform:translate(200px,100px);/*Firefox*/

    transform:rotate(60deg);/*旋转60度*/
    -webkit-transfom:rotate(60deg); /*safari chrome*/
    -ms-transform:rotate(60deg);/*IE 360*/
    -o-transform:rotate(60deg);/*opera*/
    -moz-transform:rotate(60deg);/*Firefox*/

    transform:scale(1,2);/*宽度不变，高度为2倍*/
    transform:skew(20deg,20deg);/*x轴倾斜20度，y轴倾斜20度*/

    /*3D*/
    transform:rotateX(100deg);
    transform:rotateY(100deg);
}

过渡

通过使用 CSS3，可以给元素添加一些效果
CSS3 过渡上元素从一种样式转换到另一种样式
动画效果的CSS

动画的执行时间

属性:

属性	描述
transition	设置四个过渡属性
transition-property	过渡的名称
transition-duration	过渡效果花费的时间
transition-timing-function	过渡效果的时间曲线
transition-delay	过渡效果的开始时间，延时多少

<style>
 .Donhua{width:50px;height:50px;font-size:small;text-align:center;background-color: tomato;
         transition:width 2s,height 2s,transform 2s,background-color 4s,font-size 1.5s;
         transition-delay:0.3s;}

 .Donhua:hover{width:100px;height:100px;font-size: large;background-color: forestgreen;
               transform:rotate(360deg);}
</style>
<div class="Donhua">鼠标滑过动画效果</div>

鼠标滑过动画效果

动画

通过 CSS3，也可以进行创建动画了
CSS3 的动画需要遵循 @keyframes 规则
规定动画的时长

规定动画的名称

<style>
.Donhua2{width:30px;height:30px;background-color: yellow;position:relative;
         animation: anim 5s infinite alternate;}/*infinite:循环。alternate:反播放。*/
@keyframes anim {
    0%{background-color: #ff2b0d;left:0px;top:0px;}
    25%{background-color: #ff23de;left:200px;top:0px;}
    50%{background-color: #133cff;left:200px;top:50px;opacity: 0.5;}
    75%{background-color: #47ff22;left:0px;top:50px;opacity:0;}
    100%{background-color:yellow;left:0px;top:0px;opacity:1;}
}
</style>
<div class="Donhua2"></div>

分列

.fenlie{
    column-count:3;
    column-gap:50px;
    column-rule:5px outset #ff0000;
}

人民网北京2月24日电 (记者刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。此次国内成品油价格调整幅度，是按照现行国内成品油价格形成机制，根据国际市场油价变化情况确定的。去年11月16日国内成品油价格调整以来，受市场预期欧美经济复苏前景向好以及中东局势持续动荡等因素影响，国际市场原油价格先抑后扬，2月上旬WTI和布伦特原油期货价格再次回升至每桶95美元和115美元以上。虽然近两日价格有所回落，但国内油价挂钩的国际市场三种原油连续22个工作日移动平均价格上涨幅度已超过4%，达到国内成品油价格调整的边界条件。通知指出，这次成品油调价后，国家将按照已建立的补贴机制，继续对种粮农民、渔业（含远洋渔业）、林业、城市公交、农村道路客运（含岛际和农村水路客运）等给予补贴。同时，为保证市场物价基本稳定，防止连锁涨价，对与居民生活密切相关的铁路客运、城市公交、农村道路客运（含岛际和农村水路客运）价格不作调整。

瀑布流

.pubu{column-width:250px;column-gap:5px;}
.pubu div{width:250px;max-height:400px;margin:5px 0;}