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. 统计字符的个数,能够组成几个acmicpc

    Problem F. String Input file:                  standard input Output file:               standard ou ...

  2. 配置VC++2010的glut库

    VC++2010是一个成熟稳定的版本,微软的编译工具Visual Studio系列从VC6到如今的VC2019,功能非常强大,我们在开始学习C++和计算机图形学的时候,一般入手<<C++P ...

  3. django后台管理-admin

    0922自我总结 django后台管理-admin 一.模型注册 admin.py 注册方式一: #在对于注册的app中的admin文件中导入模型然后注册模型 admin.site.register( ...

  4. Numpy中的三个常用正态分布相关的函数,randn,standard_normal, normal的区别

    这三个函数都可以返回随机正态分布(高斯Gaussian 分布)的数组,都可以从numpy.random中导出 先看三个函数的参数方式: randn: randn(d0, d1, ..., dn), 返 ...

  5. JavaScript七宗罪和一些槽点

    当下JavaScript越来越流行,成为长期霸语言榜前三的语言.但是实际上JavaScript是一个很丑陋有很多槽点的语言,这就是为什么新出了那么多框架(从jQuery到Vue)以及海尔斯伯格大大推出 ...

  6. JZOJ5771【NOIP2008模拟】遨游

    Description      MWH寒假外出旅游,来到了S国.S国划分为N个省,第i个省有Ti座城市,编号分别为Ci1,Ci2,……CiTi(各省城市编号不会重复).所有城市间有M条双向的道路连接 ...

  7. c++11::std::is_same/decay

    #include <type_traits> std::is_same 判断类型是否一致 通过std::is_same即可判断两个类型是否一样,特别在模板里面,在不清楚模板的参数时,此功能 ...

  8. grunt前端自动构建工具初级使用

    好啦,今天来和大家谈谈grunt 害怕与社会脱轨,所以自己研究了一下,简单说说我梳理完的grunt 首先要知道为什么使用grunt 1.grunt可以检测js.css文件内部是否有错误 2. grun ...

  9. python中list切片详解

    语法:[start:stop:step] step代表切片步长:切片区间为[start,stop),包含start但不包含stop 1.step > 0,从左往右切片 2.step <0, ...

  10. 卡特兰(Catalan)数入门详解

    也许更好的阅读体验 基本概念 介绍 学卡特兰数我觉得可能比组合数要难一点,因为组合数可以很明确的告诉你那个公式是在干什么,而卡特兰数却像是在用大量例子来解释什么时卡特兰数 这里,我对卡特兰数做一点自己 ...