用CSS3动画 animation实现图片旋转

　　利用animation的动画过渡效果制作一个图片旋转的动画。

　　随便取了一个图片素材

　　

      HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转</title>
    <link rel="stylesheet" href="../CSS/xuanzhuan.css">
</head>
<body>
    <div></div>
</body>
</html>

　　CSS代码：

　　

body
{
    margin: 0;
    padding: 0;
}
div
{
    width: 50px;
    height: 25px;
    margin: 100px auto;
    padding: 150px;
    background: url("../IMG/001.jpg") no-repeat;
    position: relative;
    animation:myfirst 1s infinite ;
}
@keyframes myfirst
{
    100%{width: 300px;height: 150px;transform: rotate(360deg);}
}

　　动画效果：

 

posted @ 2019-05-30 13:59  一颗糊涂淡  阅读(4226)  评论(0)  编辑  收藏  举报