css3 transform做动画
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做动画的更多相关文章
- css3 transform动画效果与公司框架简易动画的差异
先看一下该网站的效果 http://2014guangzhouchezhan.dongfeng-citroen.com.cn/mobile/ 该站里面的动画效果由简易动画与css3动画2种方式混合达到 ...
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
- 【CSS3】 理解CSS3 transform中的Matrix(矩阵)
理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...
- 理解CSS3 transform中的Matrix(矩阵)
一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...
- 理解CSS3 transform中的Matrix(矩阵)——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你 ...
- CSS3 Transform变形理解与应用
CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开 ...
- CSS3绘图与动画
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 1.CSS3-2D转换属性:trans ...
- css3 transform中的matrix矩阵
CSS3中的矩阵CSS3中的矩阵指的是一个方法,书写为matrix()和matrix3d(),前者是元素2D平面的移动变换(transform),后者则是3D变换.2D变换矩阵为3*3, 如上面矩阵示 ...
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
随机推荐
- python编程基础之三十
时间模块: 时间戳:就是当前是键距离1970年1月1日0:0:0的秒数,后面还带小数,可以说是非常精确 时间的表示形式: a.以整数或者浮点数表示一个以秒为单位的时间间隔,这个时间的基础值1970.1 ...
- Faker——生成测试数据的PHP类库
工作上用的是TP框架,每次测试功能的时候都要手动添加测试数据,词穷起名总是起一些test1.test2这种low到爆炸的用户名,这让我很难受.稍微翻阅了一些资料,发现laravel有一个生成测试数据的 ...
- Java的IO操作之关闭流
我们知道,当结束对一个流的操作时,需要调用流的close()方法对其进行释放,这将释放掉与这个流有关的所有资源,包括文件句柄.端口等.如果不关闭流,垃圾回收机制将无法识别你是否已使用完这个文件,读取的 ...
- 蓝牙TWS耳机IBRT的原理初分析
最近在倒腾TWS对耳的一些东西,看到一些源码,发现一个新概念,IBRT没有搞清楚,抱着吾将上下而求索的态度,详细看了一些代码,查了一些资料,还是发现了不少有价值的信息的.至少,我突然感觉自己懂了一些什 ...
- Java的事件自定义事件学习
课程设计要做一个游戏,由于对C++不是很熟悉,老师也准许使用java 或者其他的语言,在.net我学过事件,一种委托回调,但是在java 我不是很了解,应该原理都相同吧! 游戏大致是这样的,现在这在写 ...
- 网站是HTTP?10分钟变成HTTPS!域名免费添加配置SSL证书,变成https//环境
对于小程序request请求需要https域名.navigator.geolocation定位也需要在https环境下才可以生效等问题: 前端开发越来越需要https环境来来测试一下API接口和各类问 ...
- Axios 详解
首先祝广大程序猿们节日快乐! 一.axios简介 基于promise,用于浏览器和node.js的http客户端 二.特点 支持浏览器和 node.js 支持 promise 能拦截请求和响应 能转换 ...
- java学习2-数据类型和运算符
1.数据类型分类 java是强类型语言:a.所有的变量必须先声明后使用 b.指定类型的变量只能接受类型与之匹配的值 java语言支持的类型分为两类:基本类型和引用类型. 基本类型:包括boolean类 ...
- git中fatal: Authentication failed的问题
git中fatal: Authentication failed的问题 有两种办法,一种是删除重新认证,另一种是使用Ssh 删除重新认证 有控制面板->用户账户->管理windows凭据- ...
- Activity 学习(二) 搭建第一个Activity流程框架
本次示例使用的IDER测试完成 测试背景 : xx饿了去饭店吃饭 需要先和服务员点餐 点完餐后服务员将菜品传递给厨师制作 制作完成后吃饱 一 :创建流程图 创建上一篇测试成功出现的BpmnFil ...