冬镜seo广州关于进一步优化

当前位置： 首页 > news >正文

冬镜seo,广州关于进一步优化,门户网站开发简历,iis 如何搭建网站这一节#xff0c;自学CSS动画。主要学习了淡入淡出、淡入缩放、缩放、移动、旋转动画效果。先看一下成果。 优雅的过渡动画#xff0c;为你的页面添加另一份趣味#xff01; 在你的选择器里插入 animation 属性#xff0c;并添加框架内置的 keyframes 即可实现#xff0…这一节自学CSS动画。主要学习了淡入淡出、淡入缩放、缩放、移动、旋转动画效果。先看一下成果。 优雅的过渡动画为你的页面添加另一份趣味 在你的选择器里插入 animation 属性并添加框架内置的 keyframes 即可实现 一、CSS代码 /* 旋转 */keyframes rotate{ from{ transform: rotate(0deg) } to{ transform: rotate(360deg) } }-webkit-keyframes rotate{ from{ transform: rotate(0deg) } to{ transform: rotate(360deg) } }/淡入淡出/keyframes fade-in{ from{ opacity: 0 } to{ opacity: 1 } }-webkit-keyframes fade-in{ from{ opacity: 0 } to{ opacity: 1 } } keyframes fade-off{ from{ opacity: 1 } to{ opacity: 0 } }-webkit-keyframes fade-off{ from{ opacity: 1 } to{ opacity: 0 } } keyframes fade-in-top{ from{ opacity: 0; transform: translateY(20px) } to{ opacity: 1; transform: translateY(0) } }-webkit-keyframes fade-in-top{ from{ opacity: 0; transform: translateY(20px) } to{ opacity: 1; transform: translateY(0) } } keyframes fade-in-bottom{ from{ opacity: 0; transform: translateY(-20px) } to{ opacity: 1; transform: translateY(0) } }-webkit-keyframes fade-in-bottom{ from{ opacity: 0; transform: translateY(-20px) } to{ opacity: 1; transform: translateY(0) } } keyframes fade-in-left{ from{ opacity: 0; transform: translateX(20px) } to{ opacity: 1; transform: translateX(0) } }-webkit-keyframes fade-in-left{ from{ opacity: 0; transform: translateX(20px) } to{ opacity: 1; transform: translateX(0) } } keyframes fade-in-right{ from{ opacity: 0; transform: translateX(-20px) } to{ opacity: 1; transform: translateX(0) } }-webkit-keyframes fade-in-right{ from{ opacity: 0; transform: translateX(-20px) } to{ opacity: 1; transform: translateX(0) } }/淡入缩放/keyframes fade-small-large{ from{ opacity: 0; transform: scale(.5, .5) } to{ opacity: 1; transform: scale(1, 1) } }-webkit-keyframes fade-small-large{ from{ opacity: 0; transform: scale(.5, .5) } to{ opacity: 1; transform: scale(1, 1) } } keyframes fade-large-small{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(.5, .5) } }-webkit-keyframes fade-large-small{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(.5, .5) } } keyframes fade-larger-small{ from{ opacity: 0; transform: scale(1.5, 1.5) } to{ opacity: 1; transform: scale(1, 1) } }-webkit-keyframes fade-larger-small{ from{ opacity: 0; transform: scale(1.5, 1.5) } to{ opacity: 1; transform: scale(1, 1) } } keyframes fade-small-larger{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(1.5, 1.5) } }-webkit-keyframes fade-small-larger{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(1.5, 1.5) } } keyframes scale-small-large{ from{ transform: scale(0, 0) } to{ transform: scale(1, 1) } }-webkit-keyframes scale-small-large{ from{ transform: scale(0, 0) } to{ transform: scale(1, 1) } } keyframes scale-large-small{ from{ transform: scale(1, 1) } to{ transform: scale(0, 0) } }-webkit-keyframes scale-large-small{ from{ transform: scale(1, 1) } to{ transform: scale(0, 0) } }/移动动画/keyframes up-and-down{ from{ transform: translateY(-20px) } to{ transform: translateY(20px) } }-webkit-keyframes up-and-down{ from{ transform: translateY(-20px) } to{ transform: translateY(20px) } } keyframes left-and-right{ from{ transform: translateX(-20px) } to{ transform: translateX(20px) } }-webkit-keyframes left-and-right{ from{ transform: translateX(-20px) } to{ transform: translateX(20px) } } 在这里插入代码片二、html div classmythBox mid优雅的过渡动画为你的页面添加另一份趣味在你的选择器里插入 animation 属性并添加框架内置的 keyframes 即可实现br/br/button classbtn yellow styleanimation:rotate linear 2s infinite; -webkit-animation: rotate linear 2s infinite旋转动画/buttonbutton classbtn yellow styleanimation: rotate 1s infinite旋转/buttonbr/br/hr/h1淡入淡出/h1button classbtn green styleanimation: fade-in 1s infinite;animation-iteration-count: 1;一般淡入/buttonbutton classbtn green styleanimation: fade-off 1s infinite一般淡出/buttonbutton classbtn green styleanimation: fade-in-top 1s infinite向上淡入/buttonbutton classbtn green styleanimation: fade-in-bottom 1s infinite向下淡入/buttonbutton classbtn green styleanimation: fade-in-left 1s infinite向左淡入/buttonbutton classbtn green styleanimation: fade-in-right 1s infinite向右淡入/buttonbr/br/hr/h1缩放动画/h1button classbtn yellow styleanimation: fade-small-large 1s infinite从小到大/buttonbutton classbtn yellow styleanimation: fade-large-small 1s infinite从大到小/buttonbutton classbtn yellow styleanimation: fade-larger-small 1s infinite从更大缩小/buttonbutton classbtn yellow styleanimation: fade-small-larger 1s infinite从正常放大/buttonbr/br/button classbtn yellow styleanimation: scale-small-large 1s infinite从小变大/buttonbutton classbtn yellow styleanimation: scale-large-small 1s infinite从大变小/buttonhr/h1移动动画/h1button classbtn yellow styleanimation: up-and-down alternate 1s infinite上下运动/buttonbutton classbtn yellow styleanimation: left-and-right alternate 1s infinite左右运动/button/div 类型名称行为淡入淡出fade-in一般淡入淡入淡出fade-off一般淡出淡入淡出fade-in-top向上淡入淡入淡出fade-in-bottom向下淡入淡入淡出fade-in-left向左淡入淡入淡出fade-in-right向右淡入淡入缩放fade-small-large从大变小的淡入淡入缩放 fade-large-small从小变大的淡入淡入缩放fade-larger-small从更大变小的淡入淡入缩放fade-small-larger从小变更大的淡出缩放scale-small-large从小变大缩放scale-small-large从大变小摆动scale-small-large上下摆动摆动scale-small-large左右摆动旋转rotate旋转 三、完整代码 !DOCTYPE html htmlheadmeta charsetutf-8title/titlestyle/* #2eb872 #a3de83 #feffe4 #fa4659 /html,body,dl,dt,dd,ol,ul,h1,h2,h3,h4,h5,h6,pre,code,form,p,fieldset,legend,figure {margin: 0;padding: 0;},:before,:after {box-sizing: border-box}/box-sizing: border-box就是将border和padding数值包含在width和height之内这样的好处就是修改border和padding数值盒子的大小不变。/:root {–red: #fa4659;–yellow: #ffb03a;–blue: #3498db;–green: #27a17e;–white: #ffffff;/* 容器 /–wrapper-width: 75em;–wrapper-padding: 1.25em;/ 边框 */–radius: .5em;–border-color: transparent;–border-width: 1px;–gray: #ccc;–padd: 2em;–primary: var(–blue);–secondly: var(–yellow);–gray: #ccc;–light-gray: #ddd;–lighter-gray: #eee;color: #353535;-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: transparent;font: 16px/1.5 Microsoft Yahei, PingFang SC, Hiragino Sans GB, sans-serif;/正常分辨率 基础字体大小 16px/line-height: 30px;}/小于 500px 时移动设备基础字体大小14px/media screen and (max-width: 500px) {html.font-auto {font-size: 14px}}/大于 1921px 时2K 屏幕基础字体大小18px/media screen and (min-width: 1921px) {html.font-auto {font-size: 18px}}/* 容器 /.mythBox {margin: 0 auto;padding: 0 var(–wrapper-padding); max-width: var(–wrapper-width);}.mythBox.min {max-width: 50em;}.mythBox.mid {max-width: 65em;}.mythBox.max {max-width: 85em;}.mythBox.full {max-width: 100%;}.mythBox.thin {padding: 0 .75em;}.mythBox.thick {padding: 0 1.5em;}.mythBox.clear {padding-left: 0;padding-right: 0;}/ 浮动 /.float-none {float: none !important;}.float-left {float: left !important;}.float-right {float: right !important;}.clearfix:after {content: ;clear: both;display: block;}/ 背景颜色 /.bg-red {background-color: var(–red);}.bg-green {background-color: var(–green);}.bg-yellow {background-color: var(–yellow);}.bg-blue {background-color: var(–blue);}/ 文字有关 */.font-s {font-size: .875em;}/小字体/.font-m {font-size: 1.125em}/正常字体/.font-l {font-size: 1.25em}/大字体/.text-left {text-align: left !important;}/左侧对齐/.text-right {text-align: right !important;}/右侧对齐/.text-center {text-align: center !important;}/居中对齐/.text-justify {text-align: justify !important;}/两端对齐/.text-break {word-break: break-all !important;}.text-nowrap {white-space: nowrap !important;}.text-ellipsis {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}/* - 分割线 /hr {border: 0;margin: 1.5em 0;border-top: var(–border-width) var(–gray) solid;}/ 标题 */h1 {font-size: 2em;}h1,h2,h3,h4,h5,h6 {margin-bottom: 1rem;}h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child,p:last-child {margin-bottom: 0}p {line-height: 1.8;margin-bottom: .3em;}a {color: var(–primary);text-decoration: none;}a:hover {color: var(–secondly);}/em呈现为被强调的文本。mark标签定义带有记号的文本。/em,mark,kbd {font-size: .875em;padding: .25em .5em;border-radius: var(–radius);}abbr[title] {cursor: help;text-decoration: none;border-bottom: 1px dotted;}/提示功能/kbd {color: #fff;background: #333;font-family: Consolas, Courier New, monospace, 微软雅黑; }/在文档中格式化文本:/em {color: var(–white);font-style: normal;background-color: var(–primary);}em.red {color: var(–white);background: var(–red);}em.yellow {color: var(–white);background: var(–yellow);}em.blue {color: var(–white);background: var(–blue);}em.green {color: var(–white);background: var(–green);}/*引用 /blockquote {margin: 0 0 1em;line-height: 1.8;font-style: oblique;background: #f5fafd;padding: 1em 1em 1em 2em;border-left: 5px #3498db solid;}/ 文章 /article {letter-spacing: .03em;}article a {word-break: break-all;}article {margin-bottom: 1em}article:last-child {margin-bottom: 0}article h1,article h2,article h3 {font-size: 1.2em;}article h4,article h5,article h6 {font-size: 1.1em;}article ul,article ol,article dl {line-height: 1.8}/ 图片 */img {max-width: 100%;vertical-align: middle;}/按钮/button {margin: 0;outline: 0;}.btn {color: inherit;cursor: pointer;background: #fff;padding: .5em 1em;display: inline-block;border-radius: var(–radius);border: var(–border-width) solid var(–border-color);}.btn:hover {color: var(–red)}/*按钮颜色 */.btn.red {color: var(–white);background-color: var(–red);}.btn.yellow {color: var(–white);background-color: var(–yellow);}.btn.blue {color: var(–white);background-color: var(–blue);}.btn.green {color: var(–white);background-color: var(–green);}.btn.transparent {background-color: transparent;}/禁用的按钮/.btn[disabled] {opacity: .5;cursor: not-allowed;}/*按钮尺寸 /.btn.small {font-size: .5em;}.btn.middle,.btn.large {padding: .75em 1.5em}.btn.large {font-size: 1.2em;}/ 浮漂提示框 /[myth-tag] {position: relative;}[myth-tag]:before,[myth-tag]:after {z-index: 1;opacity: 0;position: absolute;pointer-events: none;transition: opacity .3s;}/ 小箭头 */[myth-tag]:before {width: 0;height: 0;content: ;border: .5rem solid var(–border-color);}[myth-tag~top]:before {bottom: 100%;border-top-color: rgba(0, 0, 0, .7);}[myth-tag~bottom]:before {top: 100%;border-bottom-color: rgba(0, 0, 0, .7);}[myth-tag~top]:before,[myth-tag~bottom]:before {left: 50%;transform: translateX(-50%);}[myth-tagleft]:before {right: 100%;border-left-color: rgba(0, 0, 0, .7);}[myth-tagright]:before {left: 100%;border-right-color: rgba(0, 0, 0, .7);}[myth-tagleft]:before,[myth-tagright]:before {top: 50%;transform: translateY(-50%);}/*文字 /[myth-tag~top]:after {bottom: 100%;margin-bottom: 1rem;}[myth-tag~bottom]:after {top: 100%;margin-top: 1rem;}[myth-tagtop]:after,[myth-tagbottom]:after {left: 50%;transform: translateX(-50%);}[myth-tagleft]:after {right: 100%;margin-right: 1rem;}[myth-tagright]:after {left: 100%;margin-left: 1rem;}[myth-tagleft]:after,[myth-tagright]:after {top: 50%;transform: translateY(-50%);}/ – 组合对齐方式 /[myth-tag~left][myth-tag~top]:after,[myth-tag~left][myth-tag~bottom]:after {right: 0;min-width: 4em;}[myth-tag~right][myth-tag~top]:after,[myth-tag~right][myth-tag~bottom]:after {left: 0;min-width: 4em;}[myth-text]:hover:before,[myth-text]:hover:after {opacity: 1}[myth-text]:after {color: #fff;font-size: .85rem;white-space: nowrap;border-radius: .5rem;padding: .25rem .5rem;content: attr(myth-text);background: rgba(0, 0, 0, .7);}/ 栅格 // row-gap 的属性指定的行之间的间隙大小 /.row {display: flex;flex-wrap: wrap;row-gap: .3em;margin: 0 2em}.col-12 {flex: 0 0 100%;}.col-6 {flex: 0 0 50%;}.col-4 {flex: 0 0 33.3333%}.col-3 {flex: 0 0 25%;}.col-2 {flex: 1;} .BetweenList{display: flex;flex-wrap: wrap;}.BetweenList.col2 .item{width:49.5%;background-color: #333;height: 50px;margin-bottom: 5px;}.BetweenList.col2 .item:not(:nth-child(2n)) {margin-right: calc(1% / 1);}.BetweenList.col3 .item{width:33%;background-color: #333;height: 50px;margin-bottom: 5px;}.BetweenList.col3 .item:not(:nth-child(3n)) {margin-right: calc(1% / 2);}.BetweenList.col4 .item{width:24%;background-color: #333;height: 50px;margin-bottom: 5px;}.BetweenList.col4 .item:not(:nth-child(4n)) {margin-right: calc(4% / 3);}.BetweenList.col5 .item{width:19%;background-color: #333;height: 50px;margin-bottom: 5px;}.BetweenList.col5 .item:not(:nth-child(5n)) {margin-right: calc(5% / 4);}ul,ol{margin-left: 1.25em;} / - 表格 */.myth-table{width: 100%;overflow-x: auto;overflow-y: hidden;border-radius: var(–radius);}table{border: 0;width: 100%;max-width: 100%;caption-side: bottom;border-collapse: collapse;}th:not([align]){text-align: inherit;text-align: -webkit-match-parent;}th, td{ padding: .75em }table thead tr{border-bottom: min(2px, calc(var(–border-width) * 2)) solid var(–gray);border-bottom-color: var(–gray);}table tbody tr{border-bottom: var(–border-width) solid var(–gray);transition: border-color .3s, background-color .3s;}table tbody tr:last-child{ border-bottom: 0 } table tbody tr:hover{ background-color: var(–gray) } /* - 蓝色风格 */table.fill thead{background-color: var(–primary);border-bottom: none;}table.fill thead tr{border-bottom: none;}table.fill thead th, table.fill thead td{color: #fff;}table.fill tbody tr{border-bottom: none;}table.fill tbody tr:nth-child(even) th, table.fill tbody tr:nth-child(even){background-color: #f7f7f7;}/表单/fieldset{border: none;margin-bottom: 2em;}fieldset { margin-bottom: 1em }fieldset:last-child{ margin-bottom: 0 }fieldset legend{ margin: 0 0 1em }/ legend标签是CSS中用于定义各种列表样式的重要标签之一 /fieldset input:not([typecheckbox]):not([typeradio]), fieldset select, fieldset textarea{ width: 100% }fieldset label{display: block; user-select: none;}fieldset label span:first-child{opacity: .6;white-space: nowrap;margin-bottom: .5rem;display: inline-block;}/ :required 选择器在表单元素是必填项时设置指定样式。 */fieldset label.required span:first-child:after{color: red;content: *;margin-left: .25em;}input[disabled], textarea[disabled]{cursor: no-drop !important;}input, select, textarea{margin: 0;outline: none;font: inherit;max-width: 100%;background: none;vertical-align: middle;}input[disabled], textarea[disabled]{cursor: no-drop !important;}input[typedate], input[typeemail], input[typemonth], input[typenumber], input[typepassword], input[typesearch], input[typetel], input[typetext], input[typetime], input[typeurl], input[typeweek],select, textarea{padding: .5em;color: inherit;border-radius: var(–radius);border: var(–border-width) var(–gray) solid;}input.invalid, input:out-of-range{border-color: #c40b00;background: rgba(255, 0, 0, .1);}/ 文件选择 /input[typefile]:not([hidden]){display: flex;align-items: center;} input[typefile]::-webkit-file-upload-button{color: #fff;border: none;outline: none;padding: .5em 1em;font-size: inherit;margin-right: .5em;display: inline-block;border-radius: var(–radius);background-color: var(–primary);}/ 颜色选择器 /input[typecolor]{width: 3em !important;height: 3em !important;border: none;padding: 0;}input[typecolor]::-webkit-color-swatch-wrapper{padding: 0;}input[typecolor]::-moz-color-swatch{border: none;}input[typecolor]::-webkit-color-swatch{border: none;border-radius: var(–radius);}/ 滑动条 */input[typerange]{margin: 0;height: 100%;-webkit-appearance: none;-moz-appearance: none;cursor: ew-resize;cursor: grab;overflow: hidden;min-height: 1.5rem;} input[typerange]:focus{outline: none;box-shadow: none;} input[typerange]:active::-webkit-slider-thumb{border-color: var(–primary);background-color: var(–primary);}input[typerange]:active::-moz-range-thumb{border-color: var(–primary);background-color: var(–primary);} input[typerange]:focus::-ms-thumb{border-color: var(–primary); background-color: var(–primary);} input[typerange]::-moz-focus-outer{ border: 0 }input[typerange]::-webkit-slider-runnable-track{content: ;height: calc(var(–border-width) * 2);pointer-events: none;background-color: var(–primary);} input[typerange]::-webkit-slider-thumb{width: 1em;height: 1em;-webkit-appearance: none;appearance: none;background: #fff;border-radius: 5em;margin-top: calc(-.5em var(–border-width));border: var(–border-width) solid rgba(0, 0, 0, .15);transition: .3s border-color, .3s background-color;} input[typerange]::-moz-range-track{height: 2px;background: rgba(0, 50, 126, .12);} input[typerange]::-moz-range-thumb{width: 1em;height: 1em;background: #fff;border-radius: 5em;margin-top: calc(-.5em var(–border-width));border: var(–border-width) solid rgba(0, 0, 0, .15);transition: .3s border-color, .3s background-color;} input[typerange]::-moz-range-progress{border: 0;height: 2px;margin-top: 0;background-color: var(–primary);} /* 进度条 /progress{overflow: auto;border-radius: 50px;} progress::-webkit-progress-bar{background-color: #eee;}/ 多选框 /input[typecheckbox], input[typeradio]{float: left;width: 1.5em;height: 1.5em;cursor: pointer;position: relative;margin: 0 .5em 0 0;-moz-appearance: none;-webkit-appearance: none;} input[typecheckbox]:before, input[typeradio]:before{content: ;width: 100%;height: 100%;display: block;box-shadow: 0 0 0 var(–border-width) var(–gray) inset;transition: background-color .3s, box-shadow .3s;} input[typecheckbox]:after{top: 10%;left: 10%;width: 30%; height: 60%;content: ;position: absolute;transition: transform .3s;transform-origin: 100% 100%;border-right: .15em solid #fff;border-bottom: .15em solid #fff;transform: rotate(45deg) scale(0);}input[typeradio], input[typeradio]:before{ border-radius: 100% }input[typecheckbox], input[typecheckbox]:before{ border-radius: .2em } input[typeradio]:checked:before{background-color: var(–primary);border: var(–border-width) solid var(–primary);box-shadow: 0 0 0 .2em #fff inset;} input[typecheckbox]:checked:before{box-shadow: none;background-color: var(–primary);} input[typecheckbox]:checked:after{transform: rotate(45deg) scale(1);}/ – 开关按钮 */input[typecheckbox].switch{width: 4em;height: 2em;float: none;cursor: pointer;position: relative;box-sizing: content-box;border-radius: calc(var(–radius) * 10);border: var(–border-width) solid var(–gray);background-color: var(–lighter-gray);transition: border .3s, background-color .3s;} input[typecheckbox].switch:before{margin: 0;border: 0;width: 2em;height: 2em;content: ;display: block;box-shadow: none;background: #fff;position: absolute;transition: transform .3s;border-radius: calc(var(–radius) * 10);} input[typecheckbox].switch:after{ content: normal } input[typecheckbox].switch:checked{box-shadow: none;border-color: var(–primary);background-color: var(–primary);}input.switch:checked:before{background: #fff;transform: translateX(2em);}/* 一行表单 /form .inline label, fieldset.inline label{display: inline-block;vertical-align: bottom;margin: 0 .75em .75em 0;}/ 动画 // 旋转 */keyframes rotate{ from{ transform: rotate(0deg) } to{ transform: rotate(360deg) } }-webkit-keyframes rotate{ from{ transform: rotate(0deg) } to{ transform: rotate(360deg) } }/淡入淡出/keyframes fade-in{ from{ opacity: 0 } to{ opacity: 1 } }-webkit-keyframes fade-in{ from{ opacity: 0 } to{ opacity: 1 } } keyframes fade-off{ from{ opacity: 1 } to{ opacity: 0 } }-webkit-keyframes fade-off{ from{ opacity: 1 } to{ opacity: 0 } } keyframes fade-in-top{ from{ opacity: 0; transform: translateY(20px) } to{ opacity: 1; transform: translateY(0) } }-webkit-keyframes fade-in-top{ from{ opacity: 0; transform: translateY(20px) } to{ opacity: 1; transform: translateY(0) } } keyframes fade-in-bottom{ from{ opacity: 0; transform: translateY(-20px) } to{ opacity: 1; transform: translateY(0) } }-webkit-keyframes fade-in-bottom{ from{ opacity: 0; transform: translateY(-20px) } to{ opacity: 1; transform: translateY(0) } } keyframes fade-in-left{ from{ opacity: 0; transform: translateX(20px) } to{ opacity: 1; transform: translateX(0) } }-webkit-keyframes fade-in-left{ from{ opacity: 0; transform: translateX(20px) } to{ opacity: 1; transform: translateX(0) } } keyframes fade-in-right{ from{ opacity: 0; transform: translateX(-20px) } to{ opacity: 1; transform: translateX(0) } }-webkit-keyframes fade-in-right{ from{ opacity: 0; transform: translateX(-20px) } to{ opacity: 1; transform: translateX(0) } }/淡入缩放/keyframes fade-small-large{ from{ opacity: 0; transform: scale(.5, .5) } to{ opacity: 1; transform: scale(1, 1) } }-webkit-keyframes fade-small-large{ from{ opacity: 0; transform: scale(.5, .5) } to{ opacity: 1; transform: scale(1, 1) } } keyframes fade-large-small{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(.5, .5) } }-webkit-keyframes fade-large-small{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(.5, .5) } } keyframes fade-larger-small{ from{ opacity: 0; transform: scale(1.5, 1.5) } to{ opacity: 1; transform: scale(1, 1) } }-webkit-keyframes fade-larger-small{ from{ opacity: 0; transform: scale(1.5, 1.5) } to{ opacity: 1; transform: scale(1, 1) } } keyframes fade-small-larger{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(1.5, 1.5) } }-webkit-keyframes fade-small-larger{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(1.5, 1.5) } } keyframes scale-small-large{ from{ transform: scale(0, 0) } to{ transform: scale(1, 1) } }-webkit-keyframes scale-small-large{ from{ transform: scale(0, 0) } to{ transform: scale(1, 1) } } keyframes scale-large-small{ from{ transform: scale(1, 1) } to{ transform: scale(0, 0) } }-webkit-keyframes scale-large-small{ from{ transform: scale(1, 1) } to{ transform: scale(0, 0) } }/移动动画/keyframes up-and-down{ from{ transform: translateY(-20px) } to{ transform: translateY(20px) } }-webkit-keyframes up-and-down{ from{ transform: translateY(-20px) } to{ transform: translateY(20px) } } keyframes left-and-right{ from{ transform: translateX(-20px) } to{ transform: translateX(20px) } }-webkit-keyframes left-and-right{ from{ transform: translateX(-20px) } to{ transform: translateX(20px) } }/stylemeta nameviewport contentwidthdevice-width, maximum-scale1, initial-scale1//headbodydiv classmythBox mid优雅的过渡动画为你的页面添加另一份趣味在你的选择器里插入 animation 属性并添加框架内置的 keyframes 即可实现br/br/button classbtn yellow styleanimation:rotate linear 2s infinite; -webkit-animation: rotate linear 2s infinite旋转动画/buttonbutton classbtn yellow styleanimation: rotate 1s infinite旋转/buttonbr/br/hr/h1淡入淡出/h1button classbtn green styleanimation: fade-in 1s infinite;animation-iteration-count: 1;一般淡入/buttonbutton classbtn green styleanimation: fade-off 1s infinite一般淡出/buttonbutton classbtn green styleanimation: fade-in-top 1s infinite向上淡入/buttonbutton classbtn green styleanimation: fade-in-bottom 1s infinite向下淡入/buttonbutton classbtn green styleanimation: fade-in-left 1s infinite向左淡入/buttonbutton classbtn green styleanimation: fade-in-right 1s infinite向右淡入/buttonbr/br/hr/h1缩放动画/h1button classbtn yellow styleanimation: fade-small-large 1s infinite从小到大/buttonbutton classbtn yellow styleanimation: fade-large-small 1s infinite从大到小/buttonbutton classbtn yellow styleanimation: fade-larger-small 1s infinite从更大缩小/buttonbutton classbtn yellow styleanimation: fade-small-larger 1s infinite从正常放大/buttonbr/br/button classbtn yellow styleanimation: scale-small-large 1s infinite从小变大/buttonbutton classbtn yellow styleanimation: scale-large-small 1s infinite从大变小/buttonhr/h1移动动画/h1button classbtn yellow styleanimation: up-and-down alternate 1s infinite上下运动/buttonbutton classbtn yellow styleanimation: left-and-right alternate 1s infinite左右运动/button/div /body/body /html