伪类缩放和扭曲样式

关于伪类首先就是要知道一个hover值，通常加载css样式里，可以起到一个鼠标移入变化的效果；

这是一个简单的css3动画样式做的a标签的选择按钮类似于一些小游戏里面的任务栏

 

图一                               图二

 

其实特别简单

★首先设置好需要的标签；

★然后在css里设计好样式，然后在选择到div下面的a标签和em标签分别写好样式

 

★当然里面有最重要的就是transform: translateX(0px);这个值了；这个任务栏的动画全靠这个值；transform: translateX(0px);这个值为X的 ，移动方向则是按X轴左右移动，transform: translateY(0px);当为Y的时候则是沿着Y轴上下移动了；

然后就是transform: skew(8deg,8deg)；控制图一的扭曲了，括号里的值决定扭曲的角度，（单位：deg）当然里面的文字其实也可以一起扭曲的。

★transform: scale(1.3);就是控制图二的缩放比例了括号里的值大于1则是放大，小于1则是缩小；

 

◆当然transform: translateX(0px)这个值是非常有趣的，还可以设置出太阳升起的样；

我们还是用伪类，当鼠标移入上去的时候就发生变化；

这个也就是一些很基础普通的东西了，希望能给大家一些小灵感，创作出很优秀的作品，最后祝大家学习进步！

 

注：本样式根据老师上课案例改编！