css3 transform做动画
第一种用关键帧 这里就不说了 就说第二种方法用 transition属性
ps:1jquery anim不支持transform动画 但css还是支。
2 css3关键帧就是不能动态修改关键帧属性 所以采用这个。

<pre>
<img class="p1_wz1"src="{$yuming}/images/1/p1_wz1.jpg" />
.p1_wz1{
width: 2.3rem;
position: absolute;
left: 41.6%;
top: 4.2rem;

-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}

</pre>

然后运行下如下代码
<pre>
$(".p1_wz1").css({"-webkit-transform":"rotate(260deg)"});
</pre>
马上就旋转了起来 进度条可以参考这个方法来做

css3 transform做动画的更多相关文章

  1. css3 transform动画效果与公司框架简易动画的差异

    先看一下该网站的效果 http://2014guangzhouchezhan.dongfeng-citroen.com.cn/mobile/ 该站里面的动画效果由简易动画与css3动画2种方式混合达到 ...

  2. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  3. 【CSS3】 理解CSS3 transform中的Matrix(矩阵)

    理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...

  4. 理解CSS3 transform中的Matrix(矩阵)

    一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...

  5. 理解CSS3 transform中的Matrix(矩阵)——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你 ...

  6. CSS3 Transform变形理解与应用

    CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开 ...

  7. CSS3绘图与动画

    <meta http-equiv="X-UA-Compatible" content="ie=edge">  1.CSS3-2D转换属性:trans ...

  8. css3 transform中的matrix矩阵

    CSS3中的矩阵CSS3中的矩阵指的是一个方法,书写为matrix()和matrix3d(),前者是元素2D平面的移动变换(transform),后者则是3D变换.2D变换矩阵为3*3, 如上面矩阵示 ...

  9. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

随机推荐

  1. git的下载及简单使用一

    git 是世界上最先进的分布式版本控制系统 常用的git网站 GitHub gitee(码云) git的下载地址 https://git-scm.com/downloads 而后根据计算机的系统选择相 ...

  2. Flask中的渲染变量

    Flask中的渲染变量 一.渲染变量 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  3. PHP array_replace_recursive

    1.函数的作用:比较键值,递归的替代数组中的元素 2.函数的参数: @params array $array1 @params array $array2 @params array $array3 ...

  4. Flink Connector 深度解析

    作者介绍:董亭亭,快手大数据架构实时计算引擎团队负责人.目前负责 Flink 引擎在快手内的研发.应用以及周边子系统建设.2013 年毕业于大连理工大学,曾就职于奇虎 360.58 集团.主要研究领域 ...

  5. Github带来的不止是开源,还有折叠的认知

    如果第二次看到我的文章,欢迎右侧扫码订阅我哟~ 

  6. Distinct 实现自定义去重

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  7. 钢铁B2B电商案例:供应链金融如何解决供应链金融痛点

    一.区块链是什么 区块链是一种按照时间顺序将数据块以特定的顺序相连的方式组合成的链式数据结构,其上存储了系统诞生以来所有交易的记录.区块链上的数据由全网节点共同维护并共同存储,同时以密码学方式保证区块 ...

  8. 生成对抗网络(Generative Adversarial Networks,GAN)初探

    1. 从纳什均衡(Nash equilibrium)说起 我们先来看看纳什均衡的经济学定义: 所谓纳什均衡,指的是参与人的这样一种策略组合,在该策略组合上,任何参与人单独改变策略都不会得到好处.换句话 ...

  9. 关于C#界面开发winform与SharpGL结合鼠标只在OpenGLControl绘图区域显示坐标移动消息响应(鼠标单独在某个控件上的消息响应)

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/11773260.html 因为很多时候我们开发画图之类的工具时,鼠标移动之类的,都只想在绘图区域 ...

  10. 设计模式(六)Prototype模式

    Prototype模式就是不根据类来生成实例,而是根据实例来生成新实例.至于为什么不能根据类来生成实例,在最后会讲到. 还是根据实例程序来理解这种设计模式吧. 下面是实例代码. package Big ...