移动效果:
transform:translate(200px,100px);//不同浏览器还需要不同的适应
旋转效果:
transform: rotate(180deg);
缩放效果:
transform:scale(1,2)//横向不变,纵向放大2倍
倾斜效果:
transform:skew(50deg,50deg)
过渡:
通过使用CSS3,可以给元素添加一些效果,CSS3过渡是元素从一种样式转换成另一种样式(动画效果的CSS,动画执行的时间)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: blue; transition:width 2s,height 2s,transform 2s; transition-delay: 2s;//延时两秒实现效果 } div:hover{ width: 200px; height: 200px; transform: rotate(360deg); } </style> </head> <body> <div> </div> </body> </html>
动画:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: red; position: relative; animation: anim 5s infinite alternate; } @keyframes anim{ 0%{background: red; left:0px; top: 0px; } 25%{background: blue; left:200px; top: 0px; } 50%{background: #40ff50; left:200px; top: 200px; } 75%{background: #ff3ff6; left:0px; top: 200px; } 100%{background: #ff121a; left:0px; top: 0px; } } @-webkit-keyframes anim { 0%{background: red; left:0px; top: 0px; } 25%{background: blue; left:200px; top: 0px; } 50%{background: #40ff50; left:200px; top: 200px; } 75%{background: #ff3ff6; left:0px; top: 200px; } 100%{background: #ff121a; left:0px; top: 0px; } } </style> </head> <body> <div> </div> </body> </html>
多列:
.div1{ column-count: 3; column-gap: 50px; column-rule: 5px outset red; }
瀑布流效果
column-width: 250px;
column-gap: 5px;
}
.container div{
width: 250px;
margin: 5px 0;
border: 1px solid red;
}