圆形图片360度不停旋转---@-webkit-keyframes使用@keyframes规则,你可以创建动画
来源:互联网 发布:mysql from not in 编辑:程序博客网 时间:2024/06/05 17:26
html代码:
<div class="picxz"></div>
css代码:
* { margin:0; padding:0; list-style:none;}body { background:#1F1F1F;}.picxz { width: 220px; height: 220px; margin: 0 auto; background: no-repeat url("http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg") left top; -webkit-background-size: 220px 220px; -moz-background-size: 220px 220px; background-size: 220px 220px; -webkit-border-radius: 110px; border-radius: 110px; -webkit-animation:loadRotate 3s linear infinite; -webkit-animation-fill-mode:both;}@-webkit-keyframes loadRotate{ from{ -webkit-transform:rotateZ(0deg); } to{ -webkit-transform:rotateZ(360deg); }}@keyframes loadRotate{ from{ transform:rotateZ(0deg); } to{ transform:rotateZ(360deg); }}
1 0
- 圆形图片360度不停旋转---@-webkit-keyframes使用@keyframes规则,你可以创建动画
- CSS动画@-webkit-keyframes
- CSS3 @keyframes动画规则
- @keyframes创建动画
- css3 @keyframes 动画规则学习
- keyframes
- keyframes
- CSS3实现图片旋转 transform keyframes
- css3动画的使用(@keyframes)
- CSS3 @keyframes 规则
- CSS3中@keyframes规则
- CSS3 @keyframes 规则
- css @keyframes动画
- css 动画 @keyframes
- CSS3动画 @keyframes
- CSS3 animation,@keyframes 动画
- CSS3 动画@keyframes
- @keyframes自定义动画
- 让页面滑动流畅得飞起的新特性:Passive Event Listeners
- JDK1.7 ConcurrentHashMap
- C#中使用DirectX编程
- 廖雪峰Python教程 学习笔记2 安装Python
- Linux配置主机名
- 圆形图片360度不停旋转---@-webkit-keyframes使用@keyframes规则,你可以创建动画
- OpenWrt交换机手册(Switch Documentation)
- ThinkPHP框架在Linux系统中报找不到模版文件的错误
- React Native 学习笔记二十(关于ListView的使用)
- Spring MVC ---- RedirectAttributes 使用,请求转发携带参数总结
- 实习工作日志
- SPI、I2C、UART三种串行总线通信的原理以及区别
- 解决Eclipse SVN文件冲突详解
- 梯度下降算法的实质