山东卓商网站建设公司,免费空间自助建站模板,美食杰网站的建设目的,公司外包做网站赚钱吗前言
本文主要内容#xff1a; 过渡#xff1a;transition 2D 转换 transform 3D 转换 transform 动画#xff1a;animation
过渡#xff1a;transition
transition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征#xff0c;可以实现元素不同状态间的平滑过渡…前言
本文主要内容 过渡transition 2D 转换 transform 3D 转换 transform 动画animation
过渡transition
transition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征可以实现元素不同状态间的平滑过渡补间动画经常用来制作动画效果。 补间动画自动完成从起始状态到终止状态的的过渡。不用管中间的状态。 帧动画通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。
参考链接补间动画基础
transition 包括以下属性 transition-property: all; 如果希望所有的属性都发生过渡就使用all。 transition-duration: 1s; 过渡的持续时间。 transition-timing-function: linear; 运动曲线。属性值可以是 linear 线性 ease 减速 ease-in 加速 ease-out 减速 ease-in-out 先加速后减速 transition-delay: 1s; 过渡延迟。多长时间后再执行这个过渡动画。
上面的四个属性也可以写成综合属性 transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;transition: all 3s linear 0s;
其中transition-property这个属性是尤其需要注意的不同的属性值有不同的现象。我们来示范一下。
如果设置 transition-property: width意思是只让盒子的宽度在变化时进行过渡。效果如下 如果设置 transition-property: all意思是让盒子的所有属性包括宽度、背景色等在变化时都进行过渡。效果如下 案例小米商品详情
代码 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8titleCSS 过渡/titlestylebody {margin: 0;padding: 0;background-color: #eeeeee;}.content {width: 800px;height: 320px;padding-left: 20px;margin: 80px auto;}.item {width: 230px;height: 300px;text-align: center;margin-right: 20px;background-color: #FFF;float: left;position: relative;top: 0;overflow: hidden; /* 让溢出的内容隐藏起来。意思是让下方的橙色方形先躲起来 */transition: all .5s; /* 从最初到鼠标悬停时的过渡 */}.item img {margin-top: 30px;}.item .desc {position: absolute;left: 0;bottom: -80px;width: 100%;height: 80px;background-color: #ff6700;transition: all .5s;}/* 鼠标悬停时让 item 整体往上移动5px且加一点阴影 */.item:hover {top: -5px;box-shadow: 0 0 15px #AAA;}/* 鼠标悬停时让下方的橙色方形现身 */.item:hover .desc {bottom: 0;}/style/headbodydiv classcontentdiv classitemimg src./images/1.png alt/divdiv classitemimg src./images/2.png altspan classdesc/span/divdiv classitemimg src./images/3.jpg altspan classdesc/span/div/div/body/html
效果如下 动画效果录制的比较差但真实体验还是可以的。
工程文件2018-02-08-小米商品详情过渡 2D 转换
转换是 CSS3 中具有颠覆性的一个特征可以实现元素的位移、旋转、变形、缩放甚至支持矩阵方式。
转换再配合过渡和动画可以取代大量早期只能靠 Flash 才可以实现的效果。
在 CSS3 当中通过 transform 转换来实现 2D 转换或者 3D 转换。 2D转换包括缩放、移动、旋转。
我们依次来讲解。
1、缩放scale
格式 transform: scale(x, y);transform: scale(2, 0.5);
参数解释 x表示水平方向的缩放倍数。y表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。
取值大于1表示放大小于1表示缩小。不能为百分比。
格式举例 !DOCTYPE htmlhtmlhead langenmeta charsetUTF-8title/titlestyle.box {width: 1000px;margin: 100px auto;}.box div {width: 300px;height: 150px;background-color: pink;float: left;margin-right: 15px;color: white;text-align: center;font: 400 30px/150px “宋体”;}.box .box2 {background-color: green;transition: all 1s;}.box .box2:hover {/*width: 500px;*//*height: 400px;*/background-color: yellowgreen;/* transform: css3中用于做变换的属性scale(x,y)缩放 */transform: scale(2, 0.5);}/style/headbodydiv classboxdiv classbox11/divdiv classbox22/divdiv classbox33/div/div/body/html
效果 上图可以看到给 box1 设置 2D 转换并不会把兄弟元素挤走。
2、位移translate
格式 transform: translate(水平位移, 垂直位移);transform: translate(-50%, -50%);
参数解释 参数为百分比相对于自身移动。 正值向右和向下。 负值向左和向上。如果只写一个值则表示水平移动。
格式举例 !DOCTYPE htmlhtmlhead langenmeta charsetUTF-8title/titlestyle.box {width: 1000px;margin: 100px auto;}.box div {width: 300px;height: 150px;border: 1px solid #000;background-color: red;float: left;margin-right: 30px;}div:nth-child(2) {background-color: pink;transition: all 1s;}/* translate:(水平位移垂直位移)*/div:nth-child(2):hover {transform: translate(-50%, -50%);}/style/headbodydiv classboxdiv classbox11/divdiv classbox22/divdiv classbox33/div/div/body/html
效果 上图中因为我在操作的时候鼠标悬停后立即进行了略微的移动所以产生了两次动画。正确的效果应该是下面这样的 应用让绝对定位中的盒子在父亲里居中
我们知道如果想让一个标准流中的盒子在父亲里居中水平方向看可以将其设置margin: 0 auto属性。
可如果盒子是绝对定位的此时已经脱标了如果还想让其居中位于父亲的正中间可以这样做 div {width: 600px;height: 60px;position: absolute; 绝对定位的盒子left: 50%; 首先让左边线居中top: 0;margin-left: -300px; 然后向左移动宽度600px的一半}
如上方代码所示我们先让这个宽度为600px的盒子左边线居中然后向左移动宽度600px的一半就达到效果了。 现在我们还可以利用偏移 translate 来做这也是比较推荐的写法 div {width: 600px;height: 60px;background-color: red;position: absolute; 绝对定位的盒子left: 50%; 首先让左边线居中top: 0;transform: translate(-50%); 然后利用translate往左走自己宽度的一半【推荐写法】}
3、旋转rotate
格式 transform: rotate(角度);transform: rotate(45deg);
参数解释正值 顺时针负值逆时针。
举例
!DOCTYPE html
html
head langenmeta charsetUTF-8title/titlestyle.box {width: 200px;height: 200px;background-color: red;margin: 50px auto;color: #fff;font-size: 50px;transition: all 2s; /* 过渡让盒子在进行 transform 转换的时候有个过渡期 */}/* rotate角度旋转 */.box:hover {transform: rotate(-405deg); /* 鼠标悬停时让盒子进行旋转 */}/style
/head
body
div classbox1/div/div
/body
/html
效果 注意上方代码中我们给盒子设置了 transform 中的 rotate 旋转但同时还要给盒子设置 transition 过渡。如果没有这行过渡的代码旋转会直接一步到位效果如下不是我们期望的效果 案例1小火箭
!DOCTYPE html
html
head langenmeta charsetUTF-8title/titlestylehtml,body{height:100%;}body{background-color: #DE8910;}.rocket{position: absolute;left:100px;top:600px;height: 120px;transform:translate(-200px ,200px) rotate(45deg);transition:all 1s ease-in;}body:hover .rocket{transform:translate(500px,-500px) rotate(45deg);}/style
/head
bodyimg classrocket srcimages/rocket.png alt/
/body
/html
上方代码中我们将 transform 的两个小属性合并起来写了。
小火箭图片的urlhttp://img.smyhvae.com/20180208-rocket.png
案例2扑克牌
rotate 旋转时默认是以盒子的正中心为坐标原点的。如果想改变旋转的坐标原点可以用transform-origin属性。格式如下 transform-origin: 水平坐标 垂直坐标;transform-origin: 50px 50px;transform-origin: center bottom; //旋转时以盒子底部的中心为坐标原点
我们来看一下 rotate 结合 transform-origin 的用法举例。
代码如下
!DOCTYPE html
html
head langenmeta charsetUTF-8title/titlestylebody {/*background-color: #eee;*/}.box {width: 300px;height: 440px;margin: 100px auto;position: relative;}img {width: 100%;transition: all 1.5s;position: absolute; /* 既然扑克牌是叠在一起的那就都用绝对定位 */left: 0;top: 0;transform-origin: center bottom; /*旋转时以盒子底部的中心为坐标原点*/box-shadow: 0 0 3px 0 #666;}.box:hover img:nth-child(6) {transform: rotate(-10deg);}.box:hover img:nth-child(5) {transform: rotate(-20deg);}.box:hover img:nth-child(4) {transform: rotate(-30deg);}.box:hover img:nth-child(3) {transform: rotate(-40deg);}.box:hover img:nth-child(2) {transform: rotate(-50deg);}.box:hover img:nth-child(1) {transform: rotate(-60deg);}.box:hover img:nth-child(8) {transform: rotate(10deg);}.box:hover img:nth-child(9) {transform: rotate(20deg);}.box:hover img:nth-child(10) {transform: rotate(30deg);}.box:hover img:nth-child(11) {transform: rotate(40deg);}.box:hover img:nth-child(12) {transform: rotate(50deg);}.box:hover img:nth-child(13) {transform: rotate(60deg);}/style
/head
body
div classboximg srcimages/pk1.png/img srcimages/pk2.png/img srcimages/pk1.png/img srcimages/pk2.png/img srcimages/pk1.png/img srcimages/pk2.png/img srcimages/pk1.png/img srcimages/pk2.png/img srcimages/pk1.png/img srcimages/pk2.png/img srcimages/pk1.png/img srcimages/pk2.png/img srcimages/pk1.png/
/div
/body
/html
效果如下 4、倾斜
暂略。
3D 转换
1、旋转rotateX、rotateY、rotateZ
3D坐标系左手坐标系 如上图所示伸出左手让拇指和食指成“L”形大拇指向右食指向上中指指向前方。拇指、食指和中指分别代表X、Y、Z轴的正方向这样我们就建立了一个左手坐标系。
浏览器的这个平面是X轴、Y轴垂直于浏览器的平面是Z轴。
旋转的方向左手法则
左手握住旋转轴竖起拇指指向旋转轴的正方向正向就是其余手指卷曲的方向。
从上面这句话我们也能看出所有的3d旋转对着正方向去看都是顺时针旋转。
格式 transform: rotateX(360deg); //绕 X 轴旋转360度transform: rotateY(360deg); //绕 Y 轴旋转360度transform: rotateZ(360deg); //绕 Z 轴旋转360度格式举例
1rotateX 举例
!DOCTYPE html
html
head langenmeta charsetUTF-8title/titlestyle.rotateX {width: 300px;height: 226px;margin: 200px auto;/* 透视 :加给变换的父盒子*//* 设置的是用户的眼睛距离 平面的距离*//* 透视效果只是视觉上的呈现并不是正真的3d*/perspective: 110px;}img {/* 过渡*/transition: transform 2s;}/* 所有的3d旋转对着正方向去看都是顺时针旋转*/.rotateX:hover img {transform: rotateX(360deg);}/style
/head
body
div classrotateXimg srcimages/x.jpg alt/
/div
/body
/html
效果 上方代码中我们最好加个透视的属性方能看到3D的效果没有这个属性的话图片旋转的时候像是压瘪了一样。
而且透视的是要加给图片的父元素 div方能生效。我们在后面会讲解透视属性。
2rotateY 举例
!DOCTYPE html
html
head langenmeta charsetUTF-8title/titlestyle.rotateY {width: 237px;height: 300px;margin: 100px auto;/* 透视 */perspective: 150px;}img {transition: all 2s; /* 过渡 */}.rotateY:hover img {transform: rotateY(360deg);}/style
/head
body
div classrotateYimg srcimages/y.jpg alt/
/div
/body
/html
效果 3rotateZ 举例
!DOCTYPE html
html
head langenmeta charsetUTF-8title/titlestyle.rotateZ {width: 330px;height: 227px;margin: 100px auto;/* 透视*/perspective: 200px;}img {transition: all 1s;}.rotateZ:hover img {transform: rotateZ(360deg);}/style
/head
body
div classrotateZimg srcimages/z.jpg alt/
/div
/body
/html
效果 案例百度钱包的水平翻转效果
现在有下面这张图片素材 要求做成下面这种效果 上面这张图片素材其实用的是精灵图。实现的代码如下
!DOCTYPE html
html
head langenmeta charsetUTF-8title/titlestylebody {background-color: cornflowerblue;}.box {width: 300px;height: 300px;/*border: 1px solid #000;*/margin: 50px auto;position: relative;}.box div {width: 100%;height: 100%;position: absolute;/*border: 1px solid #000;*/border-radius: 50%;transition: all 2s;backface-visibility: hidden;}.box1 {background: url(images/bg.png) left 0 no-repeat; /*默认显示图片的左半边*/}.box2 {background: url(images/bg.png) right 0 no-repeat;transform: rotateY(180deg); /*让图片的右半边默认时旋转180度就可以暂时隐藏起来*/}.box:hover .box1 {transform: rotateY(180deg); /*让图片的左半边转消失*/}.box:hover .box2 {transform: rotateY(0deg); /*让图片的左半边转出现*/}/style
/head
body
div classboxdiv classbox1/divdiv classbox2/div
/div
/body
/html
2、移动translateX、translateY、translateZ
格式 transform: translateX(100px); //沿着 X 轴移动transform: translateY(360px); //沿着 Y 轴移动transform: translateZ(360px); //沿着 Z 轴移动格式举例
1translateX 举例
!DOCTYPE html
html
head langenmeta charsetUTF-8title/titlestyle.box {width: 200px;height: 200px;background: green;transition: all 1s;}.box:hover {transform: translateX(100px);}/style
/head
body
div classbox/div
/body
/html
效果 2translateY 举例
!DOCTYPE html
html
head langenmeta charsetUTF-8title/titlestyle.box {width: 200px;height: 200px;background: green;transition: all 1s;}.box:hover {transform: translateY(100px);}/style
/head
body
div classbox/div
/body
/html
效果 3translateZ 举例
!DOCTYPE html
html
head langenmeta charsetUTF-8title/titlestylebody {/* 给box的父元素加透视效果*/perspective: 1000px;}.box {width: 250px;height: 250px;background: green;transition: all 1s;margin: 200px auto}.box:hover {/* translateZ必须配合透视来使用*/transform: translateZ(400px);}/style
/head
body
div classbox/div
/body
/html
效果 上方代码中如果不加透视属性是看不到translateZ的效果的。
3、透视perspective
电脑显示屏是一个 2D 平面图像之所以具有立体感3D效果其实只是一种视觉呈现通过透视可以实现此目的。
透视可以将一个2D平面在转换的过程当中呈现3D效果。但仅仅只是视觉呈现出 3d 效果并不是正真的3d。
格式有两种写法 作为一个属性设置给父元素作用于所有3D转换的子元素 作为 transform 属性的一个值做用于元素自身。
格式举例
perspective: 500px;
4、3D呈现transform-style
3D元素构建是指某个图形是由多个元素构成的可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。属性值可以如下 transform-style: preserve-3d; /* 让 子盒子 位于三维空间里 */transform-style: flat; /* 让子盒子位于此元素所在的平面内子盒子被扁平化 */案例立方体
!DOCTYPE html
html
head langenmeta charsetUTF-8title/titlestyle.box {width: 250px;height: 250px;border: 1px dashed red;margin: 100px auto;position: relative;border-radius: 50%;/* 让子盒子保持3d效果*/transform-style: preserve-3d;/*transform:rotateX(30deg) rotateY(-30deg);*/animation: gun 8s linear infinite;}.box div {width: 100%;height: 100%;position: absolute;text-align: center;line-height: 250px;font-size: 60px;color: #daa520;}.left {background-color: rgba(255, 0, 0, 0.3);/* 变换中心*/transform-origin: left;/* 变换*/transform: rotateY(90deg) translateX(-125px);}.right {background: rgba(0, 0, 255, 0.3);transform-origin: right;/* 变换*/transform: rotateY(90deg) translateX(125px);}.forward {background: rgba(255, 255, 0, 0.3);transform: translateZ(125px);}.back {background: rgba(0, 255, 255, 0.3);transform: translateZ(-125px);}.up {background: rgba(255, 0, 255, 0.3);transform: rotateX(90deg) translateZ(125px);}.down {background: rgba(99, 66, 33, 0.3);transform: rotateX(-90deg) translateZ(125px);}keyframes gun {0% {transform: rotateX(0deg) rotateY(0deg);}100% {transform: rotateX(360deg) rotateY(360deg);}}/style
/head
body
div classboxdiv classup上/divdiv classdown下/divdiv classleft左/divdiv classright右/divdiv classforward前/divdiv classback后/div
/div
/body
/html
动画
动画是CSS3中具有颠覆性的特征可通过设置多个节点 来精确控制一个或一组动画常用来实现复杂的动画效果。
1、定义动画的步骤
1通过keyframes定义动画
2将这段动画通过百分比分割成多个节点然后各节点中分别定义各属性
3在指定元素里通过 animation 属性调用动画。
之前,我们在 js 中定义一个函数的时候是先定义再调用 js 定义函数function fun(){ 函数体 }调用fun();
同样我们在 CSS3 中定义动画的时候也是先定义再调用 定义动画keyframes 动画名{from{ 初始状态 }to{ 结束状态 }}调用animation: 动画名称 持续时间
其中animation属性的格式如下 animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次)animation: move1 1s alternate linear 3;animation: move2 4s;
定义动画的格式举例
!DOCTYPE html
html
head langenmeta charsetUTF-8title/titlestyle.box {width: 100px;height: 100px;margin: 100px;background-color: red;/* 调用动画*//* animation: 动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。infinite 表示无限次*//*animation: move 1s alternate linear 3;*/animation: move2 4s;}/* 方式一定义一组动画*/keyframes move1 {from {transform: translateX(0px) rotate(0deg);}to {transform: translateX(500px) rotate(555deg);}}/* 方式二定义多组动画*/keyframes move2 {0% {transform: translateX(0px) translateY(0px);background-color: red;border-radius: 0;}25% {transform: translateX(500px) translateY(0px);}/*动画执行到 50% 的时候背景色变成绿色形状变成圆形*/50% {/* 虽然两个方向都有translate但其实只是Y轴上移动了200px。因为X轴的500px是相对最开始的原点来说的。可以理解成此时的 translateX 是保存了之前的位移 */transform: translateX(500px) translateY(200px);background-color: green;border-radius: 50%;}75% {transform: translateX(0px) translateY(200px);}/*动画执行到 100% 的时候背景色还原为红色形状还原为正方形*/100% {/*坐标归零表示回到原点。*/transform: translateX(0px) translateY(0px);background-color: red;border-radius: 0;}}/style
/head
body
div classbox/div
/body
/html
注意好好看代码中的注释。
效果如下 2、动画属性
我们刚刚在调用动画时animation属性的格式如下
animation属性的格式如下 animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次)animation: move1 1s alternate linear 3;animation: move2 4s;
可以看出这里的 animation 是综合属性接下来我们把这个综合属性拆分看看。
1动画名称 animation-name: move;
2执行一次动画的持续时间 animation-duration: 4s;
备注上面两个属性是必选项且顺序固定。
3动画的执行次数 animation-iteration-count: 1; //iteration的含义表示迭代
属性值infinite表示无数次。
3动画的方向 animation-direction: alternate;
属性值normal 正常alternate 反向。
4动画延迟执行 animation-delay: 1s;
5设置动画结束时盒子的状态 animation-fill-mode: forwards;
属性值 forwards保持动画结束后的状态默认 backwards动画结束后回到最初的状态。
6运动曲线 animation-timing-function: ease-in;
属性值可以是linear ease-in-out steps()等。
注意如果把属性值写成steps()则表示动画不是连续执行而是间断地分成几步执行。我们接下来专门讲一下属性值 steps()。
steps()的效果
我们还是拿上面的例子来举例如果在调用动画时我们写成 animation: move2 4s steps(2);
效果如下 有了属性值 steps()我们就可以作出很多不连续地动画效果。比如时钟再比如通过多张静态的鱼作出一张游动的鱼。
step()举例时钟的简易模型
!DOCTYPE html
html
head langenmeta charsetUTF-8title/titlestylediv {width: 3px;height: 200px;background-color: #000;margin: 100px auto;transform-origin: center bottom; /* 旋转的中心点是底部 */animation: myClock 60s steps(60) infinite;}keyframes myClock {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}/style
/head
body
div/div
/body
/html
上方代码我们通过一个黑色的长条div旋转360度耗时60s分成60步完成。即可实现。
效果如下 动画举例摆动的鱼
现在我们要做下面这种效果 PS图片的url是http://img.smyhvae.com/20180209_1245.gif图片较大如无法观看可在浏览器中单独打开。
为了作出上面这种效果要分成两步。
1第一步让鱼在原地摆动
鱼在原地摆动并不是一张 gif动图她其实是由很多张静态图间隔地播放一秒钟播放完毕就可以了 上面这张大图的尺寸是宽 509 px、高 2160 px。
我们可以理解成每一帧的尺寸是宽 509 px、高 270 px。270 * 8 2160。让上面这张大图在一秒内从 0px 的位置往上移动2160px分成8步来移动。就可以实现了。
代码是
!DOCTYPE html
html
head langenmeta charsetUTF-8title/titlestyle.shark {width: 509px;height: 270px; /*盒子的宽高是一帧的宽高*/border: 1px solid #000;margin: 100px auto;background: url(images/shark.png) left top; /* 让图片一开始位于 0 px的位置 */animation: sharkRun 1s steps(8) infinite; /* 一秒之内从顶部移动到底部分八帧 */}keyframes sharkRun {0% {}/* 270 * 8 2160 */100% {background-position: left -2160px; /* 动画结束时让图片位于最底部 */}}/style
/head
body
div classsharkBoxdiv classshark/div
/div/div
/body
/html
效果如下 我们不妨把上面的动画的持续时间从1s改成 8s就可以看到动画的慢镜头 这下你应该恍然大悟了。
2第二步让鱼所在的盒子向前移动。
实现的原理也很简单我们在上一步中已经让shark这个盒子实现了原地摇摆现在让 shark 所在的父盒子 sharkBox向前移动即可。完整版代码是
!DOCTYPE html
html
head langenmeta charsetUTF-8title/titlestyle.shark {width: 509px;height: 270px; /* 盒子的宽高是一帧的宽高 */border: 1px solid #000;margin: 100px auto;background: url(images/shark.png) left top; /* 让图片一开始位于 0 px的位置 */animation: sharkRun 1s steps(8) infinite; /* 一秒之内从顶部移动到底部分八帧 */}/* 鱼所在的父盒子 */.sharkBox {width: 509px;height: 270px;animation: sharkBoxRun 20s linear infinite;}keyframes sharkRun {0% {}/* 270 * 8 2160 */100% {background-position: left -2160px; /* 动画结束时让图片位于最底部 */}}keyframes sharkBoxRun {0% {transform: translateX(-600px);}100% {transform: translateX(3000px);}}/style
/head
body
div classsharkBoxdiv classshark/div
/div/div
/body
/html 大功告成。
