其他分享
首页 > 其他分享> > 用CSS3动画 animation实现图片旋转

用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);}
}

　　动画效果：

 

标签：CSS3,动画,myfirst,height,width,animation,150px
来源： https://www.cnblogs.com/zhangcheng001/p/10949191.html