分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

css 3 中的动画呈现(11月18日)

发布时间:2023-09-06 01:26责任编辑:熊小新关键词:动画

一、2D/3D的转换:

transform向元素应用 2D 或 3D 转换。

(1)平移属性:

transform:translate(x,y)其中只写一项的值为左右平移的值。(数值的正负性:左负右正,上负下正)

transform:translateX()仅限左右移动。

transform:translateY()仅限上下移动。

(2)旋转属性:

transform:rotate(Xdeg)括号中填需要旋转的角度值,正值顺时针,负值逆时针。

(3)缩放属性:

transform:scale(  )括号中填写数值。大于1为放大,0~1之间的为缩小。

(4)倾斜属性:

transform:skew(Xdeg,Xdeg)

transform-origin允许你改变被转换元素的位置。

transform-origin:right(left) top(bottom) % 具体像素

二、过渡属性:

transition简写属性,用于在一个属性中设置四个过渡属性。

transition:过渡对象 过渡时间 过渡时间的频率 延迟时间

三、@keyframes动画(自定义动画):

animation所有动画属性的简写属性,除了 animation-play-state 属性。

animation调用自定义动画。

animation-name规定 @keyframes 动画的名称。
animation-duration规定动画完成一个周期所花费的秒或毫秒。
animation-timing-function规定动画的速度曲线。

其中可以用%来定义动画的开始和结束:开头为0%,结尾为100%。

四、媒体查询功能:

media属性规定被链接文档将显示在什么设备上。media属性用于为不同的媒介类型规定不同的样式。

(1)media的调用方式:

方法一:用link调用

media=“all and (屏幕尺寸分界像素)”

方法二:在css 页面列表中

@media书写

五、自创属性:

只要在自创的属性名称前面加上“data-”就可以自创属性。

然后在后续中的文本中用content:“(“attr(data-自创属性名)”)”调用即可。

六、弹性盒子(手机端用到的比较多):

改变顺序:divection 属性为rtl(right-to-left)

flex-direction:弹性子元素在父元素中的位置

本文出自 “Trouble-Maker” 博客,请务必保留此出处http://13356335.blog.51cto.com/13346335/1984090

css 3 中的动画呈现(11月18日)

原文地址:http://13356335.blog.51cto.com/13346335/1984090

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved