聊代码（第七十集）css样式（之四十）       图片扭动效果。

海特行者欢迎你

代码：

＜div align="center"＞

＜style type="text/css"＞ .背景图片{ border-radius: 20%;

background-image:url(http://img4.oldkids.cn/upload/2017/09/29/blog_ 20170929203720474.gif);

width: 680px;

height: 450px; }

.动图属性{

transform-origin: center ;

position: relative; top:70px; left:-20px;

animation: 动 linear 20s infinite; }

@keyframes 动{

0% {transform: skew(-10deg,0deg);}

25% {transform: skew(10deg,-10deg);}

50% {transform: skew(-10deg,0deg);}

75% {transform: skew(10deg,10deg);}

100% {transform: skew(-10deg,0deg);} }

＜/style＞

＜div class="背景图片"＞

＜div class="动图属性"＞

＜img src="//image109.360doc.com/DownloadImg/2022/09/1508/252081474_2_20230427040514894.png" style="width: 180px; height: 350px;" /＞＜span style="font-size:25px;color:#f00">海特行者欢迎你＜/span＞＜/div＞ ＜/div＞

代码解析：

border-radius: 20%; 圆角半径。通过对圆角半径的不同设置，可以获得直角矩形、圆角矩形、正圆形和椭圆形。

background-image:url(http://img4....gif); 背景图片。

box-shadow: 0 0 80px 10px rgba(230,0,0,1); 边框阴影。（其中：80px表示边框阴影厚度；10px表示边框厚度，在设置了阴影的情况下，边框厚度不明显）。

transform-origin: center ; 设置旋转元素的基点位置。

position: relative; top:70px; left:-20px;定位类型设置为相对定位。

animation: 动 linear 20s infinite; 依次为“动画”、“动作类型”、“旋转”、“时速”、“动作循环不停”。（20s表示一个动作周期的时间，值越大，动作速度越慢）。

@keyframes 动{ from {transform:rotate(0deg);} to {transform:rotate(360deg);}360度旋转的css样式。（如果设置了动作循环不停，建议设置360度旋转）。