CSS自學框架之動畫

這一節，自學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 class="mythBox mid">優雅的過渡動畫，為你的頁面添加另一份趣味！在你的選擇器里插入 animation 屬性，并添加框架內置的 @keyframes 即可實現！<br/><br/><button class="btn yellow" style="animation:rotate linear 2s infinite; -webkit-animation: rotate linear 2s infinite">旋轉動畫</button><button class="btn yellow" style="animation: rotate 1s infinite">旋轉</button><br/><br/><hr/><h1>淡入淡出</h1><button class="btn green" style="animation: fade-in 1s infinite;animation-iteration-count: 1;">一般淡入</button><button class="btn green" style="animation: fade-off 1s infinite">一般淡出</button><button class="btn green" style="animation: fade-in-top 1s infinite">向上淡入</button><button class="btn green" style="animation: fade-in-bottom 1s infinite">向下淡入</button><button class="btn green" style="animation: fade-in-left 1s infinite">向左淡入</button><button class="btn green" style="animation: fade-in-right 1s infinite">向右淡入</button><br/><br/><hr/><h1>縮放動畫</h1><button class="btn yellow" style="animation: fade-small-large 1s infinite">從小到大</button><button class="btn yellow" style="animation: fade-large-small 1s infinite">從大到小</button><button class="btn yellow" style="animation: fade-larger-small 1s infinite">從更大縮小</button><button class="btn yellow" style="animation: fade-small-larger 1s infinite">從正常放大</button><br/><br/><button class="btn yellow" style="animation: scale-small-large 1s infinite"">從小變大</button><button class="btn yellow" style="animation: scale-large-small 1s infinite">從大變小</button><hr/><h1>移動動畫</h1><button class="btn yellow" style="animation: up-and-down alternate 1s infinite">上下運動</button><button class="btn yellow" style="animation: 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>
<html><head><meta charset="utf-8"><title></title><style>/* #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-tag=left]:before {right: 100%;border-left-color: rgba(0, 0, 0, .7);}[myth-tag=right]:before {left: 100%;border-right-color: rgba(0, 0, 0, .7);}[myth-tag=left]:before,[myth-tag=right]: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-tag=top]:after,[myth-tag=bottom]:after {left: 50%;transform: translateX(-50%);}[myth-tag=left]:after {right: 100%;margin-right: 1rem;}[myth-tag=right]:after {left: 100%;margin-left: 1rem;}[myth-tag=left]:after,[myth-tag=right]: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([type="checkbox"]):not([type="radio"]), 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[type*="date"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"],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[type="file"]:not([hidden]){display: flex;align-items: center;}			input[type="file"]::-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[type="color"]{width: 3em !important;height: 3em !important;border: none;padding: 0;}input[type="color"]::-webkit-color-swatch-wrapper{padding: 0;}input[type="color"]::-moz-color-swatch{border: none;}input[type="color"]::-webkit-color-swatch{border: none;border-radius: var(--radius);}/* 滑動條 */input[type="range"]{margin: 0;height: 100%;-webkit-appearance: none;-moz-appearance: none;cursor: ew-resize;cursor: grab;overflow: hidden;min-height: 1.5rem;}			input[type="range"]:focus{outline: none;box-shadow: none;}			input[type="range"]:active::-webkit-slider-thumb{border-color: var(--primary);background-color: var(--primary);}input[type="range"]:active::-moz-range-thumb{border-color: var(--primary);background-color: var(--primary);}		input[type="range"]:focus::-ms-thumb{border-color: var(--primary); background-color: var(--primary);}			input[type="range"]::-moz-focus-outer{ border: 0 }input[type="range"]::-webkit-slider-runnable-track{content: '';height: calc(var(--border-width) * 2);pointer-events: none;background-color: var(--primary);}			input[type="range"]::-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[type="range"]::-moz-range-track{height: 2px;background: rgba(0, 50, 126, .12);}			input[type="range"]::-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[type="range"]::-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[type="checkbox"], input[type="radio"]{float: left;width: 1.5em;height: 1.5em;cursor: pointer;position: relative;margin: 0 .5em 0 0;-moz-appearance: none;-webkit-appearance: none;}			input[type="checkbox"]:before, input[type="radio"]: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[type="checkbox"]: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[type="radio"], input[type="radio"]:before{ border-radius: 100% }input[type="checkbox"], input[type="checkbox"]:before{ border-radius: .2em }			input[type="radio"]:checked:before{background-color: var(--primary);border: var(--border-width) solid var(--primary);box-shadow: 0 0 0 .2em #fff inset;}			input[type="checkbox"]:checked:before{box-shadow: none;background-color: var(--primary);}			input[type="checkbox"]:checked:after{transform: rotate(45deg) scale(1);}/* -- 開關按鈕 */input[type="checkbox"].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[type="checkbox"].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[type="checkbox"].switch:after{ content: normal }			input[type="checkbox"].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) } }</style><meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1"/></head><body><div class="mythBox mid">優雅的過渡動畫，為你的頁面添加另一份趣味！在你的選擇器里插入 animation 屬性，并添加框架內置的 @keyframes 即可實現！<br/><br/><button class="btn yellow" style="animation:rotate linear 2s infinite; -webkit-animation: rotate linear 2s infinite">旋轉動畫</button><button class="btn yellow" style="animation: rotate 1s infinite">旋轉</button><br/><br/><hr/><h1>淡入淡出</h1><button class="btn green" style="animation: fade-in 1s infinite;animation-iteration-count: 1;">一般淡入</button><button class="btn green" style="animation: fade-off 1s infinite">一般淡出</button><button class="btn green" style="animation: fade-in-top 1s infinite">向上淡入</button><button class="btn green" style="animation: fade-in-bottom 1s infinite">向下淡入</button><button class="btn green" style="animation: fade-in-left 1s infinite">向左淡入</button><button class="btn green" style="animation: fade-in-right 1s infinite">向右淡入</button><br/><br/><hr/><h1>縮放動畫</h1><button class="btn yellow" style="animation: fade-small-large 1s infinite">從小到大</button><button class="btn yellow" style="animation: fade-large-small 1s infinite">從大到小</button><button class="btn yellow" style="animation: fade-larger-small 1s infinite">從更大縮小</button><button class="btn yellow" style="animation: fade-small-larger 1s infinite">從正常放大</button><br/><br/><button class="btn yellow" style="animation: scale-small-large 1s infinite"">從小變大</button><button class="btn yellow" style="animation: scale-large-small 1s infinite">從大變小</button><hr/><h1>移動動畫</h1><button class="btn yellow" style="animation: up-and-down alternate 1s infinite">上下運動</button><button class="btn yellow" style="animation: left-and-right alternate 1s infinite">左右運動</button></div>	</body></body>
</html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/41980.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/41980.shtml
英文地址，請注明出處：http://en.pswp.cn/news/41980.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

《Kubernetes部署篇：Ubuntu20.04基于外部etcd+部署kubernetes1.24.16集群(多主多從）》

《Kubernetes部署篇：Ubuntu20.04基于外部etcd+部署kubernetes1.24.16集群(多主多從）》

一、架構圖 如下圖所示： 二、環境信息 1、部署規劃 主機名K8S版本系統版本內核版本IP地址備注k8s-master-631.24.16Ubuntu 20.04.5 LTS5.15.0-69-generic192.168.1.63master節點 + etcd節點k8s-master-641.24.16Ubuntu 20.04.5 LTS5.15.0-69-generic192.168.1.64master節點 + …
閱讀更多...
【抖音直播小玩法】介紹

【抖音直播小玩法】介紹

一、是什么 直播小玩法是基于抖音直播場景的新型實時互動內容。直播小玩法由開發者自主開發&#xff0c;接入平臺并開放給抖音主播掛載使用。開發者提供創意&#xff0c;依托平臺生態&#xff0c;獲取收益。 介入標準&#xff1a; 企業開發者&#xff0c;暫不支持個人開發者…
閱讀更多...
DAMO-YOLO：實時目標檢測設計的報告

DAMO-YOLO：實時目標檢測設計的報告

ReadPaperhttps://readpaper.com/pdf-annotate/note?pdfId4748421678288076801eId1920373270663763712 Abstract 在本報告中&#xff0c;我們提出了一種快速準確的目標檢測方法&#xff0c;稱為DAMO-YOLO&#xff0c;它比最先進的YOLO系列實現了更高的性能。DAMO-YOLO 通過…
閱讀更多...
C++ Primer Plus: 第10章(2)

C++ Primer Plus: 第10章(2)

第10章編程題&#xff1a; &#xff08;1&#xff09; Account.h: #ifndef ACCOUNT_H_ #define ACCOUNT_H_#include <string>class Account { private:std::string name ;std::string code ;double money ; public:Account() ;Account(std::string Name, std::string Co…
閱讀更多...
Vue history和hash模式

Vue history和hash模式

目錄 一、簡介 一、簡介 ~~~~~~~~ 在Vue.js中&#xff0c;路由模式是用來管理應用程序中不同頁面之間的導航的機制。Vue Router支持兩種常見的路由模式&#xff1a;history模式和hash模式。 History 模式&#xff1a; ~~~~~~~~ History模式使用瀏覽器的history.pushState API …
閱讀更多...
紅帆OA SQL注入漏洞復現

紅帆OA SQL注入漏洞復現

0x01 產品簡介 紅帆iOffice.net從最早滿足醫院行政辦公需求&#xff08;傳統OA&#xff09;&#xff0c;到目前融合了衛生主管部門的管理規范和眾多行業特色應用&#xff0c;是目前唯一定位于解決醫院綜合業務管理的軟件&#xff0c;是最符合醫院行業特點的醫院綜合業務管理平…
閱讀更多...
Lnton羚通關于如何使用nanoPC-T4 安裝OpenCV？

Lnton羚通關于如何使用nanoPC-T4 安裝OpenCV？

nanoPC-T4 安裝 OpenCV Note: OpenCV has been pre-installed in FriendlyCore/FriendlyDesktop (Version after 201905) and does not require manual installation. Please download the latest FriendlyCore/FriendlyDesktop Image file from the following URL: http://do…
閱讀更多...
springboot 自定義注解

springboot 自定義注解

1、引入maven依賴&#xff08;版本太低也會導致不生效&#xff09; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId><version>2.7.10</version></dependency…
閱讀更多...
深度分析納斯達克上市公司慧擇的競爭優勢和投資價值

深度分析納斯達克上市公司慧擇的競爭優勢和投資價值

來源&#xff1a;猛獸財經 作者&#xff1a;猛獸財經 一、保險行業的現狀、競爭與機遇 在疫情期間&#xff0c;很多行業的經營理念與經營方式&#xff0c;甚至客戶行為、客戶需求都發生了變化&#xff0c;進而催生出新的機遇。保險行業亦是如此&#xff0c;受疫情影響&#xf…
閱讀更多...
用Python編程實現百度自然語言處理接口的對接，助力你開發智能化處理程序

用Python編程實現百度自然語言處理接口的對接，助力你開發智能化處理程序

用Python編程實現百度自然語言處理接口的對接&#xff0c;助力你開發智能化處理程序 隨著人工智能的不斷進步&#xff0c;自然語言處理&#xff08;Natural Language Processing&#xff0c;NLP&#xff09;成為了解決文本處理問題的重要工具。百度自然語言處理接口提供了一系…
閱讀更多...
騰訊開啟2024校招，主要招聘5大類崗位

騰訊開啟2024校招，主要招聘5大類崗位

近日&#xff0c;騰訊的大動作一個接一個&#xff0c;前腳剛公布2023上半年財報&#xff0c;后腳就開啟了2024校招&#xff0c;不得不讓人感嘆騰訊真速度&#xff01; 此次招聘對象為畢業時間在2023年9月至2024年8月期間的2024屆應屆畢業生&#xff0c;覆蓋北上廣深等多個城市…
閱讀更多...
異步編程框架Seastar介紹

異步編程框架Seastar介紹

使用Seastar進行異步(Asynchronout)編程 介紹 我們在本文中介紹的Seastar&#xff0c;是一個用于在現代多核機器上&#xff0c;編寫高效復雜的服務器應用程序的C庫。 傳統上&#xff0c;用于編寫服務器應用程序的編程語言庫和框架已經分為兩個不同的陣營&#xff1a;那些注重…
閱讀更多...
環境與能源創新專題：地級市綠色創新、碳排放與環境規制數據

環境與能源創新專題：地級市綠色創新、碳排放與環境規制數據

數據簡介&#xff1a;推動綠色發展&#xff0c;促進人與自然和諧共生是重大戰略舉措。綠色發展強調“綠水青山就是金山銀山”&#xff0c;人與自然和諧共生重在正確處理生態環境保護與經濟發展的關系。在著力于實現綠色發展的過程中&#xff0c;綠色創新是綠色發展的重要驅動因…
閱讀更多...
關于API數據接口獲取商品的數據的說明

關于API數據接口獲取商品的數據的說明

獲取商品數據已經成為許多應用程序的重要組成部分。為了實現這一目標&#xff0c;許多公司和技術開發者使用API數據接口來獲取相關數據。本文將詳細介紹如何使用API數據接口獲取商品數據&#xff0c;并使用Python作為編程語言示例來展示相關代碼。 API數據接口是一種通信協議&…
閱讀更多...
WPF的CheckBox中的三個狀態

WPF的CheckBox中的三個狀態

WPF的CheckBox中的三個狀態 CheckBox控件和RadioButton控件是繼承自ToggleButton類&#xff0c;這意味著用戶可切換他們的開關狀態&#xff0c;其中IsChecked屬性是可空的Boolean類型&#xff0c;這意味著該屬性可以設置為true&#xff0c;false或null。 null值表示不確定狀態…
閱讀更多...
spring.HttpMessageNotReadableException: JSON parse error

spring.HttpMessageNotReadableException: JSON parse error

實體類如下&#xff1a; Value public class Search{//搜索內容String value;//是否模糊搜索boolean fuzzy true; //其實這樣寫并不是“默認”模糊搜索&#xff0c;而是“一定是”模糊搜索 }spring.HttpMessageNotReadableException: JSON parse error: Cannot construct ins…
閱讀更多...
GPU Microarch 學習筆記 [1]

GPU Microarch 學習筆記 [1]

WARP GPU的線程從thread grid 到thread block&#xff0c;一個thread block在CUDA Core上執行時&#xff0c;會分成warp執行&#xff0c;warp的顆粒度是32個線程。比如一個thread block可能有1024個線程&#xff0c;分成32個warp執行。 上圖的CTA&#xff08;cooperative thre…
閱讀更多...
10條SQL優化技巧

10條SQL優化技巧

一、一些常見的SQL實踐 &#xff08;1&#xff09;負向條件查詢不能使用索引 select * from order where status!0 and stauts!1 not in/not exists都不是好習慣 可以優化為in查詢&#xff1a; select * from order where status in(2,3) &#xff08;2&#xff09;前導模…
閱讀更多...
Codeforces Round 893 (Div. 2)B題題解

Codeforces Round 893 (Div. 2)B題題解

文章目錄 [The Walkway](https://codeforces.com/contest/1858/problem/B)問題建模問題分析1.分析所求2.如何快速計算每個商販被去除后的餅干數量代碼 The Walkway 問題建模 給定n個椅子&#xff0c;其中有m個位置存在商販&#xff0c;在商販處必須購買餅干吃&#xff0c;每隔…
閱讀更多...
Python程序設計——字符串處理的特殊方法

Python程序設計——字符串處理的特殊方法

學習目標&#xff1a; 學習如何創建字符串使用len、min和max函數獲取一個字符串的長度、串中的最大和最小的字符使用下標運算符([])訪問字符串中的元素使用截取運算符str[ start:end]從較長的字符串中得到一個子串使用運算符連接兩個字符串&#xff0c;通過*運算符復制一個字符…
閱讀更多...
最新文章

Copyright @ 2022~2023