css3.0实现背景旋转的方法

最新推荐文章于 2024-04-30 09:57:30 发布

xurui55

最新推荐文章于 2024-04-30 09:57:30 发布

阅读量3.7k

点赞数 1

分类专栏： css3.0 文章标签： css3.0 css背景旋转 css背景动画 html5

本文链接：https://blog.csdn.net/xurui55/article/details/9120935

版权

css3.0 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<style type="text/css">
/*css3.0 的从from 到to的改变 */
@-webkit-keyframes spin {
from { -webkit-transform: rotate(-55deg) }
to { -webkit-transform: rotate(305deg) }
}
@-moz-keyframes spin{
from { -moz-transform: rotate(-55deg) }
to { -moz-transform: rotate(305deg) }
}
@-ms-keyframes spin {
from { -ms-transform: rotate(-55deg) }
to { -ms-transform: rotate(305deg) }
}
/* t1 初始形态 */
#t1{
width:66px;
height:66px;
background-image:url(https://img-blog.csdn.net/20130618151427656);
display: block;
position: absolute;
-moz-transform: rotate(-55deg);
-webkit-transform: rotate(-55deg);
-ms-transform: rotate(-55deg);
/* webkit chrome, safari, mobile */
-webkit-animation-name: spin;
-webkit-animation-duration: 5000ms; /* 40 seconds */
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
/* ff */
-moz-animation-name: spin;
-moz-animation-duration: 5000ms; /* 40 seconds */
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
/* ie */
-ms-animation-name: spin;
-ms-animation-duration: 5000ms; /* 40 seconds */
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}

</style>
</head>

<body>
<div id="t1"></div>
<p>css的动画基本上可以说是已经可以独当一面了，呵呵。学习学习</p>
</body>
</html>

xurui55

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3.0实现背景旋转的方法

test/*css3.0 的从from 到to的改变 */@-webkit-keyframes spin { from { -webkit-transform: rotate(-55deg) } to { -webkit-transform: rotate(305deg) }}@-moz-keyframes spin{ from { -moz-
复制链接

扫一扫

专栏目录