CSS3简单实现div图层360deg旋转

1489 2020/06/01 艾维畅想网

本文介绍的是关于CSS3简单实现div图层360deg旋转,希望对你有所帮助。

代码如下:

<!DOCTYPE html>

<html>

<head>    

<meta charset="UTF-8">    

<title>CSS3简单实现div图层360deg旋转</title>

</head> 

<style>    

.stage{        width: 200px;        height: 200px;        background-color: #acffa5;    }    

.box1{        width: 50px;        height: 50px;        background-color: #b2caff;         animation: rotate  2s linear infinite;    }     

.box1:hover{        animation-play-state: paused;    }    

@keyframes rotate {        

0%{            transform: rotate(0);        }        

100%{            transform: rotate(360deg);        }   

 }  

</style>

<body>

 <div>    

<div> 图层旋转</div>

</div> 

</body>

</html>


animation: name duration timing-function delay iteration-count direction fill-mode play-state;


                         说明

animation-name    指定要绑定到选择器的关键帧的名称

animation-duration    动画指定需要多少秒或毫秒完成

animation-timing-function    设置动画将如何完成一个周期

animation-delay    设置动画在启动前的延迟间隔。

animation-iteration-count    定义动画的播放次数。

animation-direction    指定是否应该轮流反向播放动画。

animation-fill-mode    规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。

animation-play-state    指定动画是否正在运行或已暂停。

initial    设置属性为其默认值。 阅读关于 initial的介绍。

inherit    从父元素继承属性。 阅读关于 initinherital的介绍。


分享到
  • 微信好友
  • QQ好友
  • QQ空间
  • 腾讯微博
  • 新浪微博
  • 人人网
成都艾维畅想网络科技有限公司
地址:成都市双流区华阳镇西寺路石化大厦酒店附近100米
联系人:满经理(成都/北京)
电话:199-3875-5567
QQ:845583755(成都/北京)
邮箱:845583755@qq.com
  • 微信公众号
  • 手机版
  • 微信小程序

——需求定制——

您的姓名
联系电话
需求
热门标签: 品牌网站建设 | 购物商城建设 | 微信公众号 | 微信小程序 | APP开发 | 响应式开发 北京网站建设 | 成都网站建设 | 广州网站建设 | 网站推广优化 | 网站维护 | 服务器环境搭建 LOGO设计 | 宣传册设计 | 产品包装设计 | 名片设计 | 海报设计 | 广告设计
Copyright © 2011-2022 艾维畅想网 All Right Reserved.
ICP备案: 蜀ICP备20018253号-1
川公网安备 51010402000995号 川公网安备 51010402000995号

在线
客服

客服
热线

199-3875-5567
7*24小时客服服务热线

新浪
微博

微信
咨询

微信咨询

关注
微信

关注官方微信公众号
顶部