一、2D、3D转换
通过CSS3转换,我们能够对元素精心移动、缩放、转动、拉长或者拉伸转换是使元素改变形状、尺寸和位置的一种效果,可以使用2D3D转换元素
<body>
<div>这是一个初始效果</div>
<br/>
<div class="div2">改变后的效果2</div>
<div class="div3">改变后的效果3</div>
<div class="div4">改变后的效果4</div>
<div class="div5">改变后的效果5</div>
<div class="div6">改变后的效果6</div>
</body>
div{
width: 100px;
height: 100px;
background-color: gray;
}
1.2D转换方法
translate()--移动
rotate()--旋转
scale()--缩放
skew()
matrix()
.div2{
transform:translate(100px,100px);/*向上向下移动100px*/
-webkit-transform:translate(100px,100px);/*safari chrome*/
-ms-transform:translate(100px,100px);/*IE*/
-o-transform:translate(100px,100px);/*opera*/
-moz-transform:translate(100px,100px);/*firefox*/
}
.div3{
transform:rotate(180deg);/*旋转180°*/
-webkit-transform:rotate(180deg);/*safari chrome*/
-ms-transform:rotate(180deg);/*IE*/
-o-transform:rotate(180deg);/*opera*/
-moz-transform:rotate(180deg);/*firefox*/
}
.div4{
margin-top: 200px;
transform:scale(1,2);/*宽度1倍,高度2倍*/
-webkit-transform:scale(1,2);/*safari chrome*/
-ms-transform:scale(1,2);/*IE*/
-o-transform:scale(1,2);/*opera*/
-moz-transform:scale(1,2);/*firefox*/
}
.div5{
margin-top: 200px;
transform:skew(50deg,50deg);/*x轴倾斜50°,y轴倾斜50°*/
-webkit-transform:skew(50deg,50deg);/*safari chrome*/
-ms-transform:skew(50deg,50deg);/*IE*/
-o-transform:skew(50deg,50deg);/*opera*/
-moz-transform:skew(50deg,50deg);/*firefox*/
}
2.3D转换方法
rotateX()
rotateY()
.div6{
transform:rotateX(100deg);/*x轴倾斜50°,y轴倾斜50°*/
-webkit-transform:rotateX(100deg);/*safari chrome*/
-ms-transform:rotateX(100deg);/*IE*/
-o-transform:rotateX(100deg);/*opera*/
-moz-transform:rotateX(100deg);/*firefox*/
}
二、过渡
通过使用CSS3,可以给元素添加一些效果
过渡是元素从一种样式转换成另一种样式
动画效果的CSS
动画执行的CSS
属性:
<div>测试</div>
div{
width:100px;
height:100px;
background-color:blue;
-webkit-transition:width 2s,height 2s,-webkit-transform 2s;
-moz-transition:width 2s,height 2s,-moz-transform 2s;
-o-transition:width 2s,height 2s,-o-transform 2s;
transition:width 2s,height 2s,-o-transform 2s;
-webkit-transition-delay:2s;
-moz-transition-delay:2s;
-o-transition-delay:2s;
transition-delay:2s;
}
div:hover{
width:200px;
height:200px;
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
以上代码的效果就是鼠标放上去后旋转360°,宽变为200px高度也变为200px,延迟两秒钟执行
三、动画
CSS3的动画需要遵循@keyframes规则
规定动画的时长
规定动画的名称
<body>
<div>动画效果</div>
</body>
div{
width:100px;
height:100px;
background-color: blue;
position:relative;
animation:anim 5s infinite alternate;/*动画效果5s,持续进行,逆向进行*/
-webkit-animation:anim 5s infinite alternate;
}
@keyframes anim{
0%{background: blue;left: 0px;top: 0px;}
25%{background: red;left: 200px;top: 0px;}
50%{background: #ccffcc;left: 200px;top: 200px;}
75%{background: #00ffff;left: 0px;top: 200px;}
{background: blue;left: 0px;top: 0px;}
}
@-webkit-keyframes anim{
0%{background: blue;left: 0px;top: 0px;}
25%{background: red;left: 200px;top: 0px;}
50%{background: #ccffcc;left: 200px;top: 200px;}
75%{background: #00ffff;left: 0px;top: 200px;}
{background: blue;left: 0px;top: 0px;}
}
四、多列
可以创建多列来对文本或者区域进行布局
属性:
column-count 分列的数量
column-gap 每列中间间隔的距离
column-rule 每列之间间隔的线及线的颜色
<div class="div1">大家好,我是在csdn上面写的博客,我叫扁豆,请多多指教!大家好,我是在csdn上面写的博客,我叫扁豆,请多多指教!大家好,我是在csdn上面写的博客,我叫扁豆,请多多指教!大家好,我是在csdn上面写的博客,我叫扁豆,请多多指教!大家好,我是在csdn上面写的博客,我叫扁豆,请多多指教!大家好,我是在csdn上面写的博客,我叫扁豆,请多多指教!大家好,我是在csdn上面写的博客,我叫扁豆,请多多指教!大家好,我是在csdn上面写的博客,我叫扁豆,请多多指教!</div>
.div1{
column-count: 3;
-webkit-column-count: 3;
-webkit-column-gap: 50px;
column-gap: 50px;
column-rule: 5px outset #FF0000;
-webkit-column-rule: 5px outset #FF0000;
}
五、瀑布流效果
<body>
<div class="container">
<div><img src="img/1.jpg"></div>
<div><img src="img/2.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/4.jpg"></div>
<div><img src="img/5.jpg"></div>
<div><img src="img/6.jpg"></div>
<div><img src="img/7.jpg"></div>
<div><img src="img/8.jpg"></div>
<div><img src="img/9.jpg"></div>
<div><img src="img/1.jpg"></div>
<div><img src="img/2.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/4.jpg"></div>
<div><img src="img/5.jpg"></div>
<div><img src="img/6.jpg"></div>
<div><img src="img/7.jpg"></div>
<div><img src="img/8.jpg"></div>
<div><img src="img/1.jpg"></div>
<div><img src="img/2.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/4.jpg"></div>
<div><img src="img/5.jpg"></div>
<div><img src="img/6.jpg"></div>
<div><img src="img/7.jpg"></div>
<div><img src="img/8.jpg"></div>
<div><img src="img/9.jpg"></div>
</div>
</body>
.container{
column-width: 250px;
-webkit-column-width: 250px;
-o-column-width: 250px;
-ms-column-width: 250px;
-moz-column-width: 250px;
column-gap: 5px;
}
.container div{
width:250px;
margin:5px 0px;
}
原文链接:https://blog.csdn.net/biandous/article/details/53427675