福州专业网站制作,企业名录怎么导出,wordpress加会员中心,百度seo点击工具文章目录 CSS3 过渡动画一、transition属性二、transform属性-2D变换2.1 tanslate #xff1a; 移动2.2 rotate-旋转2.3 scale-变形2.4 skew-斜切2.5 transform-origin: 变换中心点设置 三、CSS3关键帧动画四、CSS3-3D变换4.1 perspective 定义3D元素距视图距离4.2 transform-… 文章目录 CSS3 过渡动画一、transition属性二、transform属性-2D变换2.1 tanslate 移动2.2 rotate-旋转2.3 scale-变形2.4 skew-斜切2.5 transform-origin: 变换中心点设置 三、CSS3关键帧动画四、CSS3-3D变换4.1 perspective 定义3D元素距视图距离4.2 transform-style4.3 3D位移- translate3d4.4 3D旋转- rotate(x,y,z,a)4.5 3D缩放4.6 多重变形 CSS3 过渡动画
一、transition属性 过渡是元素从一种样式逐渐改变为另一种的效果.它主要通过transition四个过渡属性来控制transition-property、transition-duration、transition-timing-function、transition-delay四个属性也可以合并简写成: transition。 语法 transition: property duration timing-function delay; 1、transition-property transition-property 属性规定应用过渡效果的 CSS 属性的名称(当指定的 CSS 属性改变时过渡效果将开始)transition-property: none |all |property; 过渡属性 none没有属性会获得过渡效果。all 所有属性都将获得过渡效果property定义应用过渡效果的CSS 属性名称列表列表以逗号分隔
2、transition-duration过渡时间
transition-duration: time time规定完成过渡效果需要花费的时间 (以秒或毫秒计)默认值是 0意味着不会有效果
3、transition-timing-function缓动函数 - linear: 以相同速度开始至结束的过渡效果 (cubic-bezier(0,0,1,1)) - ease: 慢速开始然后变快慢速结束 (cubic-bezier(0.25,0.1,0.25,1)) - ease-in: 以慢速开始的过渡效果 (cubic-bezier(0.42,0,1,1)) - ease-out: 以慢速结束的过渡效果 (cubic-bezier(0,0,0.58,1)) - ease-in-out: 以慢速开始和结束的过渡效果 (cubic-bezier(0.42,0,0.58,1)) - cubic-bezier(n,n,n,n): 在 cubic-bezier 函数中定义自己的值,可能的值是 0至1之间的数值。
4、transition-delay
transition-delay: time;time 规定在过渡效果开始之前需要等待的时间以秒或毫秒计。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* transition */.box{width:300px;height: 100px;background: pink;transition: all .5s linear;}.box:hover{background: cyan;}/style
/head
bodydiv classbox/div
/body
/html二、transform属性-2D变换
2.1 tanslate 移动 transform:translate(x,y) :平移x,y可以是像素也可以是百分比
2.2 rotate-旋转 2.3 scale-变形 2.4 skew-斜切 2.5 transform-origin: 变换中心点设置
transform-origin: x y:
x默认值50%left|center| right长度百分比y: 默认值50%top | center | bottom长度百分比
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box{width:200px;height: 200px;background: cyan;}.translate{transform: translate(100px,100px);}.rotate{transform: rotate(30deg);}.scale{transform: scale(0.5);}.skew{transform: skew(-50deg);}/style
/head
bodydiv classbox/divdiv classbutton-groupbutton classtranslate-btntranslate/buttonbutton classrotate-btnrotate/buttonbutton classscale-btnscale/buttonbutton classskew-btnskew/button/divscriptvar box document.querySelector(.box)var translate document.querySelector(.translate-btn)var rotate document.querySelector(.rotate-btn)var scale document.querySelector(.scale-btn)var skew document.querySelector(.skew-btn)translate.onclickfunction(){box.className box translate}rotate.onclickfunction(){box.className box rotate}scale.onclickfunction(){box.className box scale}skew.onclickfunction(){box.className box skew}/script
/body
/html三、CSS3关键帧动画
CSS3 关键帧动画通过对关键帧的指定来在页面上产生更复杂的动画效果以方便制作逐帧动画。 通过“keyframes 动画名”来定义关键帧通过animation属性来设置动画信息animation: name duration timing-function delay iteration-count direction fill-mode play-state; animation-name 指定要绑定到选择器的关键帧的名称keyframes名,必填项animation-duration: 时长,单位秒或毫秒animation-timing-function: 缓动函数默认匀速animation-delay: 延迟时间单位可以是秒s或毫秒msanimation-iteration-count: 定义动画的播放次数。 值类型n(数字| infinite(无限次 animation-direction: 指定是否应该轮流反向播放动画 值包括 normal|reverse|alternate|alternate-reverse|initial|inherit;reverse: 动画反向播放alternate: 动画在奇数次1、3、5…正向播放在偶数次2、4、6…反向播放。alternate-reverse: 动画在奇数次1、3、5…反向播放在偶数次2、4、6…正向播放。initial: 设置该属性为它的默认值。 animation-fill-mode: 规定当动画不播放时当动画完成时或当动画有一个延迟未开始播放时要应用到元素的样式。 可选值none|forwards|backwards|both|initial|inherit;forwards: 结束时停在最后一帧backwards: 结束时显示第一帧 animation-play-state: 指定动画是否正在运行或已暂停 可选值 running(默认) | paused。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box{width:100px;height: 100px;background: pink;position: absolute;left:0;top:0;animation: go 2s linear 0s 3 forwards;}keyframes go {0%{left:0;}100%{left:300px;}}/style
/head
bodydiv classbox/div
/body
/html四、CSS3-3D变换 现实世界拍摄的三要素:镜头拍摄环境的空间拍摄的物件。CSS 3D的世界里也要找到并创建这三个物件要素不过因为在CSS世界里并没有摄影镜头、拍摄的环境的空间等这些真实世界拍摄需要的要素所以变成用div进行展现在对应的div 上头加入对应的style属性就可以进行模拟我们这里就必须要用到三层div最外层是摄影镜头第二层为立体空间第三层则是立体空间内的立体元素 4.1 perspective 定义3D元素距视图距离
perspective属性用来定义3D元素距视图的距离以像素计通常和perspective-origin属性一起使用perspective-origin属性可以改变3D元素的底部位置。perspective-origin属性允许改变3D元素查看3D元素的视图;当为元素定义perspective属性时其子元素会获得透视效果而不是元素本身;perspective 属性只影响 3D 转换元素。perspective属性语法格式: - perspective: number none - number:元素距离视图的距离以像素计; - none与0相同不设置透视(默认) : 4.2 transform-style 控制子元素是否开启三维立体环境。。transform-style:flat子元素不开启3d立体空间 默认的. transform-style: preserve-3d;子元素开启立体空间代码写给父级但是影响的是子盒子这个属性很重要后面必用 4.3 3D位移- translate3d 在CSS3中3D位移操作主要通过translatezO和translate3d0两个函数实现。其中translate3d()函数使一个元素在三维空间移动。其基本语法如下 translate3d(tx,ty,tz) 其中各参数取值说明如下 tx;代表横向坐标位移向量的长度ty:代表纵向坐标位移向量的长度:tz:代表Z轴位移向量的长度。该值不能是一个百分比值如果取值为百分比值将被认为是无效值。 4.4 3D旋转- rotate(x,y,z,a) 在三维变形中可以让元素在任何轴上旋转。CSS3新增4个旋转函数: rotateX0、rotateXO函数允许rotateYO和rotateZ0。一个元素围绕X轴旋转:rotateY0函数允许一个元素围绕Y轴旋转;rotatez()函数允许一个元素围绕Z轴旋转 rotateX(a)\rotateY(a)、rotateZ(a)Rotate3d(x,y,z,a) - rotate(1,0,0,3) rotateX(30deg) - rotate(0,1,0,30deg)rotateY(30deg) - rotate(0,0,1,30deg)rotateZ(30deg) 4.5 3D缩放 ·CSS3中3D缩放处理主要通过scalez0和scale3d(两个函数来实现。当scale3d0中X轴和Y轴同时为1即scale3d1,1,sz)其效果等同于scaleZ(sz)。通过使用3D缩放函数可以让元素在Z轴上按比例缩放。默认值为1当值大于1时元素放大反之小于 1且大于0.01时元素缩小。 scale3d0函数的使用语法如下: scale3d(sx,sy,sz)其中各参数作用如下。 - SX横向缩放比例; - SY纵向缩放比例: - SZZ轴缩放比例; 4.6 多重变形 不管是2D变形还是3D变形都可以使用多重变形它们之间使用在CSS3中空格分隔具体语法如下: transform: transform-function transform-function 其中transfrom-function是指CSS3中的任何变形函数。
