图片倾斜效果。 代码： ＜div align="center"＞
＜style type="text/css"＞#图片倾斜
{ display: block;
position: relative;
animation: 动 10s linear infinite; }
@keyframes 动 {
0% { transform: skew(0deg); }
25% {transform: skew(-30deg);}
50% {transform: skew(0deg);}
75% {transform: skew(30deg);}
100% { transform: skew(0deg); } }
＜/style＞
＜img id="图片倾斜" src="http://www.oldkids.cn/upload/2018/09/17/blog_20180917141338952.jpg" style="width:250px;height:450px" /＞
＜/div＞ 代码解析： 这里用的是 id 选择器，在css样式命名前有个 # 字号。命名可以是英文或汉字。 display: block; 其中： display 规定元素显示方式。 block 以块状元素方式显示。 position: relative; 表示定位类型为相对定位。（定位属性有四个值：相对定位 relative ; 绝对定位 absolute ; 静态定位 static ; 固定定位 fixed ）。 @keyframes 动 { 0% { transform: skew(0deg); }25% {transform: skew(-30deg);} 50% {transform: skew(0deg);} 75% {transform: skew(30deg);} 100% { transform: skew(0deg); 其中： @keyframes 规则是用于创建动画的。在 @keyframes 中规定 css样式，就能创建由当前样式逐渐过渡到新样式的动画效果。 动 规定动画类型（缩放、倾斜或平移）。 0% 表示动画开始，也可以用 from 表示； 100% 表示动画结束，也可以用 to 表示。 animation: 动 10s linear infinite 依次为“动画”、“动作类型”、“规定一个动作周期所用的时间”、“动作无限循环不停”。（ s 表示时间单位为“秒”，其值越大，动作速度越慢）。 transform: skew(50deg) 其中： transform 是变形属性，用来规定元素如何变形； skew 表示倾斜；括号内的值为倾斜角度。 deg 表示角度单位为“度”。 | 
