css3-定时缓动效果与块旋转
先来了解一下两个css3的属性(当前学习到并理解的属性)
1.transform(变换)
语法:
transform : none | <transform-function> [ <transform-function> ]*
取值:
scale(<number>[, <number>])
提供执行[sx,sy]缩放矢量的两个参数指定一个2D scale(2D缩放)。如果第二个参数未提供,则取与第一个参数一样的值。
scaleX(<number>) :
使用 [sx,1] 缩放矢量执行缩放操作,sx为所需参数。
scaleY(<number>) :
使用 [i,sy] 缩放矢量执行缩放操作,sy为所需参数。
rotate(<angle>) :
通过指定的角度参数对原元素指定一个2D rotation(2D 旋转),需先有transform-origin属性的定义。
实际演示:
-webkit-transform:rotate(10deg);//顺向旋转10度,其中deg为度的意思,反方向的话用负值
-webkit-transform:scala(1.5);//放大1.5倍
两者可以合并写法是
-webkit-transform:rotate(10deg) scala(1.5);
2.transition(过度)
语法:
transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
取值:
transition-property:
需要过度的属性
transition-duration:
过度执行的时间(以s为单位)
transition-timing-function:
过度的缓动
ease:ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
linear:linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
ease-in:ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
ease-out:ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
ease-in-out:ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
cubic-bezier:特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。
实际演示:
-webkit-transition:all 0.5s ease-in;合并写法
利用a 的hover来制作移动上去变换的效果
a{
display:block;
width: 100px;
height: 100px;
border:solid 1px #9A9A9A;
background-color: white;
box-shadow: 5px 5px 5px gray;
-webkit-transform:rotate(10deg);
-webkit-transition:all 0.5s ease-in;
}
a:hover{
-webkit-transform:rotate(0deg) scale(1.05)
}
<a href=""></a>
css3-定时缓动效果与块旋转相关推荐
- JavaScript Tween算法及缓动效果
Flash做动画时会用到Tween类,利用它可以做很多动画效果,例如缓动.弹簧等等. 我这里要教大家的是怎么利用flash的Tween类的算法,来做js的Tween算法,并利用它做一些简单的缓动效果. ...
- javascript的缓动效果
这部分对原先的缓动函数进行抽象化,并结合缓动公式进行强化.成品的效果非常惊人逆天.走过路过不要错过. 好了,打诨到此为止.普通的加速减速是难以让人满意的,为了实现弹簧等让人眼花缭乱的效果必须动用缓动公 ...
- 简单动画函数封装及缓动效果
function animate(obj, target) {clearInterval(obj.timer);//obj.timer = setInterval(function() {var ti ...
- javascript 45种缓动效果BY司徒正美
javascript 45种缓动效果 参数 类型 说明 el element 必需,为页面元素 begin number 必需,开始的位置 change number 必需,要移动的距离 durati ...
- 网页轮播图+缓动效果
实现某宝上面的网页轮播图+缓动效果 代码和注释: <!DOCTYPE html> <html lang="en"><head><meta ...
- 软件项目技术点(1)——Tween算法及缓动效果
AxeSlide软件项目梳理 canvas绘图系列知识点整理 Tween算法及缓动效果 软件里在切换步序时需要有过渡动画效果,从当前位置的画面缓动到目标位置的画面.动画效果可重新查看文章系列第一篇 ...
- 运动曲线研究(缓动效果)
刚刚学习了一下网页动画中上的缓动效果,分享一下学习心得. 缓动曲线的概念: 缓动曲线是一个0为起点的连续函数曲线,x轴表示时间变化,y轴表示位移变化.曲线的斜率反映出运动的数度. 缓动效果在Flash ...
- ui动效 unity_【FairyGUI Unity】使用动效功能实现血条UI扣血与加血的缓动效果
原理 血条使用进度条组件,可以得到当前值与最大值. 通过动效-改变缩放可以让图片宽度从1到0按百分比变化. 动效可以指定播放动效的时间范围 组件设计 创建一个进度条组件,作为血条. bar是实际血量条 ...
- swiper.js实现区域轮播-两边小中间大的缓动效果
效果展示(已加速) 第一步:在页面引入css和js <link rel="stylesheet" href="css/swiper.min.css"> ...
最新文章
- MP3 编码解码 附完整c代码
- 概述---《TCP/IP协议》卷一 练习题
- 对计算机课评价,信息技术课教学效果评价
- 微软Build 2017首日主角AI 同时发布.NET Core 2.0 Preview 1
- 环形buffer代码_为什么Buffer开发人员开源了他的代码
- CI生成查询记录集result(),row(),row_array().....
- ASM:《X86汇编语言-从实模式到保护模式》第8章:实模式下硬盘的访问,程序重定位和加载...
- 空间点到直线的距离c语言,空间两直线间距离公式(文档篇).doc
- 3D优化之ShadowGun系列二:浓烟,使用面片模拟粒子效果
- IP地址介绍,子网划分(VLSM),构造超网(CIDR) 详解
- DoIP(五)—— UDSonIP
- MOSFet 的类型和区别:NP沟道,增强耗尽
- go - rune类型
- 在开课吧的Python学习
- 2021CCPC东北四省赛 D. Lowbit 势能线段树
- 【VM】虚拟机+操作系统安装
- budgie_为什么要为您的Linux桌面选择Budgie
- 攻防世界逆向初级训练
- 信息学奥赛一本通(C++版)NOIP提高组微信步数
- myeclipse破解文件不成功的解决办法,cracker.jar
热门文章
- CSS3 3D Swiper思路分析之性感美女秀
- Cesium Billboard加载Gif图片
- fatal: unable to update url base from redirection: asked for: http://1XX.XXX.XX.XXX/m-pla/info/re
- 哪所三本大学计算机专业强,理科计算机强的三本大学排名
- 华盛顿赞助电竞战队 城市联赛或将出现
- xml解析库对比总结(解析方式,第三方库,TinyXml)
- 益聚星荣:辣味赛道还有多少空间留给卫龙?
- nfs与iptable
- P4072 [SDOI2016]征途
- 运维工程师需要掌握的基础技能有哪些?