CSS3的一些动画样式

最新推荐文章于 2024-07-22 19:12:50 发布

还是会XN

最新推荐文章于 2024-07-22 19:12:50 发布

阅读量195

点赞数

分类专栏：专题文献文章标签： css3动画

本文链接：https://blog.csdn.net/weixin_44560992/article/details/86566140

版权

专题文献专栏收录该内容

28 篇文章 0 订阅

订阅专栏

CSS3

作者：任浩基 
撰写时间：2019年01月19日    星期六
下面为大家展示动画效果样式(包含经典代码以及效果图):
一、	扭曲:
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190120210002594.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MDk5Mg==,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190120205658531.PNG?x-oss-process=image/watermark,type_3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MDk5Mg==,size_16,color_FFFFFF,t_70)  ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190120205225809.PNG?x-oss-process=im![在这里插入图片描述](https://img-blog.csdnimg.cn/2019012020530366.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MDk5Mg==,size_16,color_FFFFFF,t_70)age/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MDk5Mg==,size_16,color_FFFFFF,t_70)
二、	缩放: 
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190120205819219.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MDk5Mg==,size_16,color_FFFFFF,t_70)![在这里插入图片描述](https://img-blog.csdnimg.cn/20190120205731894.PNG?x-oss-process=image/watermark![在这里插入图片描述](https://img-blog.csdnimg.cn/20190120205808979.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MDk5Mg==,size_16,color_FFFFFF,t_70),type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MDk5Mg==,size_16,color_FFFFFF,t_70)
三、	位移:  ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190120205849739.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MDk5Mg==,size_16,color_FFFFFF,t_70)![在这里插入图片描述](https://img-blog.csdnimg.cn/20190120205833244.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MDk5Mg==,size_16,color_FFFFFF,t_70)
四、	原点:  ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190120205915710.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MDk5Mg==,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190120205904621.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MDk5Mg==,size_16,color_FFFFFF,t_70)
上述部分代码引用老师所教内容，如有代码写错，望各位网友改正下?