| 1 |
- (window.webpackJsonp=window.webpackJsonp||[]).push([[5],{286:function(t,s,a){},324:function(t,s,a){"use strict";a(286)},367:function(t,s,a){"use strict";a.r(s);a(324);var n=a(3),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"css3之transition过渡"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#css3之transition过渡"}},[t._v("#")]),t._v(" CSS3之transition过渡")]),t._v(" "),s("p",[t._v("html结构")]),t._v(" "),s("div",{staticClass:"language-html line-numbers-mode"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("box1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" \n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("div1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("div2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("div3"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),s("div",{staticClass:"line-numbers-wrapper"},[s("span",{staticClass:"line-number"},[t._v("1")]),s("br"),s("span",{staticClass:"line-number"},[t._v("2")]),s("br"),s("span",{staticClass:"line-number"},[t._v("3")]),s("br"),s("span",{staticClass:"line-number"},[t._v("4")]),s("br"),s("span",{staticClass:"line-number"},[t._v("5")]),s("br")])]),s("p",[t._v("先给元素设置transition过渡，指定样式和时间，这里设置all全部样式都采用0.3s的过渡")]),t._v(" "),s("div",{staticClass:"language-css line-numbers-mode"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".box1>div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 给元素所有变化都添加过渡动画, 也可以指定唯一的过渡样式属性*/")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("transition")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" all .3s"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),s("div",{staticClass:"line-numbers-wrapper"},[s("span",{staticClass:"line-number"},[t._v("1")]),s("br"),s("span",{staticClass:"line-number"},[t._v("2")]),s("br"),s("span",{staticClass:"line-number"},[t._v("3")]),s("br"),s("span",{staticClass:"line-number"},[t._v("4")]),s("br")])]),s("blockquote",[s("p",[t._v("鼠标经过元素测试效果")])]),t._v(" "),s("div",{staticClass:"box1"},[s("b",[t._v("宽度过渡")]),t._v(" "),s("div",{staticClass:"div1"}),t._v(" "),s("div",{staticClass:"language-css line-numbers-mode"},[s("pre",{staticClass:"language-css"},[s("code",[s("span",{staticClass:"token selector"},[t._v(".div1:hover")]),s("span",{staticClass:"token punctuation"},[t._v("{")]),s("span",{staticClass:"token property"},[t._v("width")]),s("span",{staticClass:"token punctuation"},[t._v(":")]),t._v(" 150px"),s("span",{staticClass:"token punctuation"},[t._v(";")]),s("span",{staticClass:"token punctuation"},[t._v("}")]),t._v("\n")])]),t._v(" "),s("div",{staticClass:"line-numbers-wrapper"},[s("span",{staticClass:"line-number"},[t._v("1")]),s("br")])]),t._v(" "),s("p",[s("b",[t._v("背景色过渡")])]),s("div",{staticClass:"div2"}),t._v(" "),s("div",{staticClass:"language-css line-numbers-mode"},[s("pre",{staticClass:"language-css"},[s("code",[s("span",{staticClass:"token selector"},[t._v(".div2:hover")]),s("span",{staticClass:"token punctuation"},[t._v("{")]),s("span",{staticClass:"token property"},[t._v("background")]),s("span",{staticClass:"token punctuation"},[t._v(":")]),t._v(" #999"),s("span",{staticClass:"token punctuation"},[t._v(";")]),s("span",{staticClass:"token punctuation"},[t._v("}")]),t._v("\n")])]),t._v(" "),s("div",{staticClass:"line-numbers-wrapper"},[s("span",{staticClass:"line-number"},[t._v("1")]),s("br")])]),s("p"),t._v(" "),s("p",[s("b",[t._v("按贝塞尔曲线设置的过渡")])]),s("div",{staticClass:"div3"}),t._v(" "),s("div",{staticClass:"language-css line-numbers-mode"},[s("pre",{staticClass:"language-css"},[s("code",[s("span",{staticClass:"token comment"},[t._v("/"),s("em",[t._v("贝塞尔曲线过渡")]),t._v("/")]),t._v("\n"),s("span",{staticClass:"token selector"},[t._v(".div3")]),s("span",{staticClass:"token punctuation"},[t._v("{")]),s("span",{staticClass:"token property"},[t._v("transition-timing-function")]),s("span",{staticClass:"token punctuation"},[t._v(":")]),t._v(" "),s("span",{staticClass:"token function"},[t._v("cubic-bezier")]),s("span",{staticClass:"token punctuation"},[t._v("(")]),t._v(".39"),s("span",{staticClass:"token punctuation"},[t._v(",")]),t._v(".62"),s("span",{staticClass:"token punctuation"},[t._v(",")]),t._v(".74"),s("span",{staticClass:"token punctuation"},[t._v(",")]),t._v("1.39"),s("span",{staticClass:"token punctuation"},[t._v(")")]),s("span",{staticClass:"token punctuation"},[t._v("}")]),t._v("\n"),s("span",{staticClass:"token selector"},[t._v(".div3:hover")]),s("span",{staticClass:"token punctuation"},[t._v("{")]),s("span",{staticClass:"token property"},[t._v("transform")]),s("span",{staticClass:"token punctuation"},[t._v(":")]),t._v(" "),s("span",{staticClass:"token function"},[t._v("translate3d")]),s("span",{staticClass:"token punctuation"},[t._v("(")]),t._v("-25px"),s("span",{staticClass:"token punctuation"},[t._v(",")]),t._v(" -25px"),s("span",{staticClass:"token punctuation"},[t._v(",")]),t._v(" 0"),s("span",{staticClass:"token punctuation"},[t._v(")")]),s("span",{staticClass:"token punctuation"},[t._v("}")]),t._v("\n")])]),t._v(" "),s("div",{staticClass:"line-numbers-wrapper"},[s("span",{staticClass:"line-number"},[t._v("1")]),s("br"),s("span",{staticClass:"line-number"},[t._v("2")]),s("br"),s("span",{staticClass:"line-number"},[t._v("3")]),s("br")])]),s("p"),t._v(" "),s("h3",{attrs:{id:"贝塞尔曲线-cubic-bezier-x1-y1-x2-y2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#贝塞尔曲线-cubic-bezier-x1-y1-x2-y2"}},[t._v("#")]),t._v(" 贝塞尔曲线 cubic-bezier(x1,y1,x2,y2)")]),s("p",[t._v("通过调整贝塞尔曲线可以设置出多种动画效果，比如反弹效果等\nX轴的范围是0~1，Y轴的取值没有规定，但是也不宜过大。\n如：直线linear，即cubic-bezier(0,0,1,1)")]),s("p",[t._v("贝塞尔曲线在线工具："),s("a",{attrs:{href:"https://cubic-bezier.com/#.17,.67,.83,.67",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://cubic-bezier.com/#.17,.67,.83,.67"),s("svg",{staticClass:"icon outbound",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",x:"0px",y:"0px",viewBox:"0 0 100 100",width:"15",height:"15"}},[s("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),t._v(" "),s("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])])]),t._v(" "),s("p",[t._v("参考："),s("a",{attrs:{href:"https://www.w3school.com.cn/css3/index.asp",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://www.w3school.com.cn/css3/index.asp"),s("svg",{staticClass:"icon outbound",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",x:"0px",y:"0px",viewBox:"0 0 100 100",width:"15",height:"15"}},[s("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),t._v(" "),s("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
|
