用CSS3动画 animation实现图片旋转

最新推荐文章于 2023-03-28 23:59:54 发布

weixin_30301183

最新推荐文章于 2023-03-28 23:59:54 发布

阅读量1.9k

点赞数

原文链接：http://www.cnblogs.com/zhangcheng001/p/10949191.html

版权

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

　　动画效果：

转载于:https://www.cnblogs.com/zhangcheng001/p/10949191.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30301183

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
用CSS3动画 animation实现图片旋转

　　利用animation的动画过渡效果制作一个图片旋转的动画。　　随便取了一个图片素材　　 HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>旋转</title> ...
复制链接

扫一扫