简单的Css3效果

					简单的Css3动画效果

开发工具与关键技术:DW中的Css3效果
作者:冉冉
撰写时间:2019年1月17日

Css3有三大属性,分别是:transform,transition,animation。其中transform对旋转,缩放,扭曲,位移都能提供属性支持
transition是实现动画效果的一个属性
animation是用@keyframes规则达到不断变化的效果
我要实现的是transform中的旋转效果和位移效果,transition属性。
下面要实现的是旋转效果: 在这里插入图片描述
rotate();用来设置旋转的度数,(可以是正数也可以是负数,正数代表着顺时针方向,负数代表着逆时针方向;“deg”是单位“度”)
再一个就是位移效果:
在这里插入图片描述
translate(X,Y);用来设置位移的偏移量,X表示的是横坐标,Y表示的是纵坐标。X,Y可以是负数,X:正数向右偏移,负数向左偏移;Y:正数向下偏移,负数则相反
下面来实现transition属性效果:
在这里插入图片描述
property:;变化的值(宽度,高度等);duration:;执行动画的时间;delay:;延迟执行时间;还有其他函数就不一一列举了
在css3中可以实现很多在js中需要很复杂的代码实现的效果,虽然在js中有很多css3实现不了的效果,而我们都想用更简洁的代码来实现更复杂的功能,因为复杂的代码会令一些程序员头疼,简单的代码会使程序员偶尔轻松一下,因此我们也为这个目标一直努力。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值