CSS3笔记：滚动、扭曲、旋转、翻转、动画练习整理

<marquee direction="left" width="160px" height="30px" scrollamount="20" behavior="alternate" scrolldelay="1" onmouseover="this.stop()" onmouseout="this.start()">大家好，欢迎来到蔡爸爸的个人空间，爸爸永远爱你！！！！</marquee>

这是一个CSS滚动标签 <marquee>，参数说明：

direction="滚动方向" left、right、top

 width="容器宽的长度" height同理 scrollamount="滚动速度" 用1-100表示 behavior="滚动效果" alternate来回滚动 slide滚一次 scroll循环滚 scrolldelay="延迟时间" 也是用数字表示 οnmοuseοut="this.start()" 鼠标移开继续滚 οnmοuseοver="this.stop()" 鼠标放上去停止滚 

transform:skew(20deg,15deg);

这是扭曲，注意括号内的数值是 deg 不是px  

可以这样skewX或skewY，代表只是X轴、Y轴的变形

transform:rotate(45deg);

旋转，数值同样是deg

如果rotateX、rotateY则表示翻转，此效果不咋样

transition:all 2s;

动画效果，其中all是代表所有对象，实际上使用应该针对某一个的，这样写

.div1{

width:100px;

transition:width 2s; <!--width的变化在2s内完成-->

}

transition 是写在这里，不是写在.div:hover里面。实际效果一般般，不如jQuery优秀

.div1:hover{

width:500px;

}