首页 > 网站技术 > css3技术 时代sdcms网站模板网

css3不停旋转图片案例

作者:时代sdcms网站模板网 更新:2019-03-06 14:38:17 评论 来源:sdcms模板 人气:0

如果你需要让图片不停的旋转,就可以参考下面的代码,如果只旋转一次,也可以部分修改实现。


<!DOCTYPE html>

<html>

<head>

<style> 

div

{

width:100px;

height:100px;

background:red;

animation:myfirst linear infinite 5s;

-moz-animation:myfirst linear infinite 5s; /* Firefox */

-webkit-animation:myfirst linear infinite 5s; /* Safari and Chrome */

-o-animation:myfirst linear infinite 5s; /* Opera */

}

@keyframes myfirst

{

from {transform: rotate(0deg);-ms-transform: rotate(0deg);-webkit-transform: rotate(0deg);}

to {transform: rotate(360deg);-ms-transform: rotate(360deg);-webkit-transform: rotate(360deg);}

}

@-moz-keyframes myfirst /* Firefox */

{

from {transform: rotate(0deg);-ms-transform: rotate(0deg);-webkit-transform: rotate(0deg);}

to {transform: rotate(360deg);-ms-transform: rotate(360deg);-webkit-transform: rotate(360deg);}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

from {transform: rotate(0deg);-ms-transform: rotate(0deg);-webkit-transform: rotate(0deg);}

to {transform: rotate(360deg);-ms-transform: rotate(360deg);-webkit-transform: rotate(360deg);}

}

@-o-keyframes myfirst /* Opera */

{

from {transform: rotate(0deg);-ms-transform: rotate(0deg);-webkit-transform: rotate(0deg);}

to {transform: rotate(360deg);-ms-transform: rotate(360deg);-webkit-transform: rotate(360deg);}

}

</style>

</head>

<body>

<div></div>

<p><b>注释:</b>本例在 Internet Explorer 中无效。</p>

</body>

</html>


时代sdcms网站模板 - 一个用心制作sdcms网站模板的网站

在这里,您不仅能购买到当下最优质的sdcms网站模板,同时也能为您提供sdcms程序修改、二次开发等功能定制,以及sdcms系统或模板bug修复,本站将全心全意为您提供完美服务和售后,欢迎收藏本站。