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>
相关文章:
CSS自学框架之动画
这一节,自学CSS动画。主要学习了淡入淡出、淡入缩放、缩放、移动、旋转动画效果。先看一下成果。 优雅的过渡动画,为你的页面添加另一份趣味! 在你的选择器里插入 animation 属性,并添加框架内置的 keyframes 即可实现࿰…...
RabbitMQ的5种消息队列
RabbitMQ的5种消息队列 1、七种模式介绍与应用场景 1.1 简单模式(Hello World) 一个生产者对应一个消费者,RabbitMQ 相当于一个消息代理,负责将 A 的消息转发给 B。 应用场景:将发送的电子邮件放到消息队列,然后邮件服务在队列…...
【C语言】选择排序
基本原理 先找到数组中最大的那个数,将最大的数放到数组最右端(交换a[maxid]和a[len-1]这两个数的位置),然后继续从a[0]到a[len-2]中找到最大的数,然后交换a[maxid]和a[len-2]位置,依次查找交换,…...
异步更新队列 - Vue2 响应式
前言 这篇文章分析了 Vue 更新过程中使用的异步更新队列的相关代码。通过对异步更新队列的研究和学习,加深对 Vue 更新机制的理解 什么是异步更新队列 先看看下面的例子: <div id"app"><div id"div" v-if"isShow&…...
【Unity的URP渲染管线下实现扩展后处理Volume组件_TemporalAntiAliasing(TAA)_抗锯齿(附带下载链接)】
【Unity的URP渲染管线下的TAA抗锯齿】 背景:1. Unity内置的抗锯齿只能够满足部分画面需求。展示一个锯齿示例。2. 在75寸大屏电视上跑通展示一个锯齿示例。- 在Camera上配置3. 安装了一个TAA组建,最后打包APK在安卓机上运行报错。- 经过测试排查,发现是没有将后处理的shader…...
NineData通过AWS FTR认证,打造安全可靠的数据管理平台
近日,NineData 作为新一代的云原生智能数据管理平台,成功通过了 AWS(Amazon Web Service)的 FTR 认证。NineData 在 FTR 认证过程中表现出色,成功通过了各项严格的测试和评估,在数据安全管理、技术应用、流…...
Qt应用开发(基础篇)——滚屏区域类 QScrollArea
一、前言 QScrollArea类继承于QAbstractScrollArea,QAbstractScrollArea继承于QFrame,是Qt滚动视图的常用部件。 滚屏区域基类 QAbstractScrollArea 框架类 QFrame QScrollArea类提供了对另一个小部件的滚动视图,基础功能、滚动条控制、界面策…...
安装最新版chromedriver 116,亲测可用
Version Selection...
html题库
什么是HTML? HTML的全称为 超文本标记语言 ,是一种 标记语言 。 它包括一系列标签 ,通过这些标签可以将网络上的文档格式统一,使分散的 Internet 资源连接为一个逻辑整体。 DOCTYPE 的作用是什么?标准模式与兼容模式(…...
Android11 中 LED 使用-RK3568
文章目录 前言原理图设备树驱动前言 现在我们来学习点亮LED 原理图 然后对应在核心板原理图上查找 Working_LEDEN_H_GPIO0_B7,如下图所示: 那么我们只要控制 GPIO0_B7 即可控制 led 的亮灭。 设备树 leds: leds {compatible = "gpio-leds";work_led: work {gpi…...
BC77 有序序列插入一个数
描述 有一个有序数字序列,从小到大排序,将一个新输入的数插入到序列中,保证插入新数后,序列仍然是升序。 输入描述 第一行输入一个整数(0≤N≤50)。 第二行输入N个升序排列的整数,输入用空格分隔的N个整数。 第三…...
通过脚本使用Cppcheck做静态测试并生成报告(Windows)
1.安装cppcheck 先从cppcheck官方网站下载cppcheck的安装包。 注: (1)官网地址:https://sourceforge.net/projects/cppcheck (2)截止2023年8月,官方发布的最新版本是cppcheck-2.11-x64-Setup.…...
工业安全生产信息化平台的基本架构和关键功能分享
工业安全生产信息化平台是指利用信息技术手段,将工业安全生产管理与数据采集、传输、处理相结合,实现对工业安全生产全过程的数字化、信息化、智能化管理的平台。它通过集成多种信息系统和设备,实现对重大危险源监控预警、安全风险分级管控、…...
每日一道面试题之session 和 cookie 有什么区别?
Session和Cookie是两种在Web开发中用于跟踪用户状态的机制: 它们之间的区别如下: 存储位置:Cookie是存储在用户浏览器中的小型文本文件,而Session是存储在服务器上的数据结构。 数据安全性:Cookie中的数据可以被用户…...
SHELL 基础 显示字符颜色, 修改历史命令,Linux里的命令 执行顺序
echo 打印命令 : 显示字符串 : [rootserver ~]# echo this is SHELL language this is SHELL language [rootserver ~]# echo this is SHELL language this is SHELL language [rootserver ~]# echo "this is SHELL language" this is SH…...
Vue 和 JQuery 的区别在哪?为什么 JQuery 会被 Vue 取代?
在 Web 前端开发领域,我们经常会遇到一些不同的工具和框架,其中 Vue 和 JQuery, JQuery 是曾经备受欢迎的选择,而现在 Vue 是大多数人的选择。本文将探讨 Vue 和 JQuery 之间的区别,并讨论为什么越来越多的开发人员放弃 JQuery 而…...
Spring 中 Bean 注入与获取
Spring 中有哪些方式可以把 Bean 注入到 IOC 容器? 关于这个问题,我的回答入下:把 Bean 注入到 IOC 容器里面的方式有 7 种方式 1. 使用 xml 的方式来声明 Bean 的定义,Spring 容器在启动的时候会加载并解析这 个 xml,…...
STM32 中断复习
中断 打断CPU执行正常的程序,转而处理紧急程序,然后返回原暂停的程序继续运行,就叫中断。 在确定时间内对相应事件作出响应,如:温度监控(定时器中断)。故障处理,检测到故障&#x…...
Django的模型
定义模型 from django.db import models class User(models.Model):# 类属性是表示表的字段username models.CharField(max_length50,uniqueTrue)password models.CharField(max_length200)create_time models.DateTimeField(auto_now_addTrue) # auto_now_add新增数据时间…...
非计算机科班如何丝滑转码
近年来,很多人想要从其他行业跳槽转入计算机领域。非计算机科班如何丝滑转码? 方向一:如何规划才能实现转码? 对于非计算机科班的人来说,想要在计算机领域实现顺利的转码并不是一件容易的事情,但也并非不…...
PyTorch深度学习实战(12)——数据增强
PyTorch深度学习实战(12)——数据增强 0. 前言1. 图像增强1.1 仿射变换1.2 亮度修改1.3 添加噪音1.4 联合使用多个增强方法 2. 对批图像执行图像增强3. 利用数据增强训练模型小结系列链接 0. 前言 数据增强是指通过对原始数据进行一系列变换和处理&…...
SpringCloud Ribbon中的7种负载均衡策略
SpringCloud Ribbon中的7种负载均衡策略 Ribbon 介绍负载均衡设置7种负载均衡策略1.轮询策略2.权重策略3.随机策略4.最小连接数策略5.重试策略6.可用性敏感策略7.区域敏感策略 总结 负载均衡通器常有两种实现手段,一种是服务端负载均衡器,另一种是客户端…...
04 qt功能类、对话框类和文件操作
一 QT中时间和日期 时间 ---- QTime日期 ---- QDate对于Qt而言,在实际的开发过程中, 1)开发者可能知道所要使用的类 ---- >帮助手册 —>索引 -->直接输入类名进行查找 2)开发者可能不知道所要使用的类,只知道开发需求文档 ----> 帮助 手册,按下图操作: 1 …...
安装软件包
安装软件包 创建一个名为 /home/curtis/ansible/packages.yml 的 playbook : 将 php 和 mariadb 软件包安装到 dev、test 和 prod 主机组中的主机上 将 RPM Development Tools 软件包组安装到 dev 主机组中的主机上 将 dev 主机组中主机上的所有软件包更新为最新版本 vim packa…...
玩转单元测试之gmock
引言 前文我们学习了gtest相关的使用,单靠gtest,有些场景仍然无法进行测试,因此就诞生了gmock。 gmock快速入门 在引入gtest时,gmock也同样引入了,因此只需要在编译时加上合适的编译选项即可,注意不同版…...
POI与EasyExcel--写Excel
简单写入 03和07版的简单写入注意事项: 1. 对象不同:03对应HSSFWorkbook,07对应XSSFWorkbook 2. 文件后缀不同:03对应xls,07对应xlsx package com.zrf;import org.apache.poi.hssf.usermodel.HSSFWorkbook; import …...
7. CSS(四)
目录 一、浮动 (一)传统网页布局的三种方式 (二)标准流(普通流/文档流) (三)为什么需要浮动? (四)什么是浮动 (五)浮…...
uni-app 集成推送
研究了几天,终于是打通了uni-app的推送,本文主要针对的是App端的推送开发过程,分为在线推送和离线推送。我们使用uni-app官方推荐的uni-push2.0。官方文档 准备工作:开通uni-push功能 勾选uniPush2.0点击"配置"填写表单…...
Spring Boot+Redis 实现消息队列实践示例
Spring BootRedis 实现一个轻量级的消息队列 文章目录 Spring BootRedis 实现一个轻量级的消息队列0.前言1.基础介绍2.步骤2.1. 引入依赖2.2. 配置文件2.3. 核心源码 4.总结答疑 5.参考文档6. Redis从入门到精通系列文章 0.前言 本文将介绍如何利用Spring Boot与Redis结合实现…...
11. 实现业务功能--获取用户信息
目录 1. 实现 Controller 2. 单体测试 3. 修复返回值存在的缺陷 3.1 用户的隐私数据:密码的密文和盐不能显示 3.2 将值为 null 的字段可以进行过滤 3.3 时间的格式需要进行处理,如 yyyy-mmmm-ddd HH:mm:ss 3.4 data 属性没有返回 4. 实现前端页…...
HTTPS
HTTPS是什么 HTTPS 属于应用层协议,其原理是通过SSL/TLS协议在HTTP和TCP之间插入一层安全机制。通过SSL/TLS握手过程,客户端和服务器协商出一个对称密钥,用于后续的数据加密和解密,从而保证数据的机密性和完整性。 为什么会需要…...
spring详解
spring是于2003年兴起的一款轻量级的,非侵入式的IOC和AOP的一站式的java开发框架,为简化企业级应用开发而生。 轻量级的:指的是spring核心功能的jar包不大。 非侵入式的:业务代码不需要继承或实现spring中任何的类或接口 IOC&…...
香港服务器备案会通过吗?
对于企业或个人来说,合规备案是网络运营的基本要求,也是保护自身权益的重要举措。以下内容围绕备案展开话题,希望为您解开疑惑。 香港服务器备案会通过吗? 目前,香港服务器无法备案,这是由于国内管理规定的限制…...
乐鑫推出 ESP ZeroCode 控制台
乐鑫科技 ESP ZeroCode 控制台是一个网页应用,用户只需点击鼠标,描述想要创建的产品类型、功能及其硬件配置,即可按照自身需求,快速生成符合 Matter 认证的固件,并在硬件上进行试用。试用过程中,如有任何不…...
从NLP到聊天机器人
一、说明 今天,当打电话给银行或其他公司时,听到电话另一端的机器人向你打招呼是很常见的:“你好,我是你的数字助理。请问你的问题。是的,机器人现在不仅可以说人类语言,还可以用人类语言与用户互动。这是由…...
相关搜索引擎常用搜索语法(Google hacking语法和FOFA语法)
一:Google Hack语法 Google Hacking原指利用Google搜索引擎搜索信息来进行入侵的技术和行为,现指利用各种搜索引擎并使用一些高级的搜索语法来搜索信息。既利用搜索引擎强大的搜索功能,在在浩瀚的互联网中搜索到我们需要的信息。 ࿰…...
Mysql查询
第三章:select 语句 SELECT employees.employee_id,employees.department_id FROM employees WHERE employees.employee_id176; DESC departments;SELECT * FROM departments;第四章:运算符使用 SELECT employees.last_name,employees.salary FROM em…...
解决http下navigator.clipboard为undefined问题
开发环境下使用navigator.clipboard进行复制操作,打包部署到服务器上后,发现该功能显示为undefined;查相关资料后,发现clipboard只有在安全域名下才可以访问(https、localhost),在http域名下只能得到undefined…...
mysql之host is blocked问题
程序上线一段时间之后,更新程序总是遇到这个问题 每次都是重启几次程序,或者执行 flush hosts; 毕竟指标不治本,抽出时间决定分析一下问题,查阅了几篇博客。(感谢这几位大佬) https://blog.51cto.com/u_…...
每日一题:2337 移动片段得到字符串
给你两个字符串 start 和 target ,长度均为 n 。每个字符串 仅 由字符 L、R 和 _ 组成,其中: 字符 L 和 R 表示片段,其中片段 L 只有在其左侧直接存在一个 空位 时才能向 左 移动,而片段 R 只有在其右侧直接存在一个 …...
嵌入式设备的 Json 库基本使用
大家好,今天给介绍一款基于 C 语言的轻量级的 Json 库 – cJson。可用于资源受限的嵌入式设备中。 cJSON 是一个超轻巧,携带方便,单文件,简单的可以作为 ANSI-C 标准的 JSON 解析器。 cJSON 是一个开源项目,github 下…...
GEEMAP 中如何拉伸图像
图像拉伸是最基础的图像增强显示处理方法,主要用来改善图像显示的对比度,地物提取流程中往往首先要对图像进行拉伸处理。图像拉伸主要有三种方式:线性拉伸、直方图均衡化拉伸和直方图归一化拉伸。 GEE 中使用 .sldStyle() 的方法来进行图像的…...
软件测试学术顶会——ISSTA 2023 论文(网络安全方向)清单、摘要与总结
总结 本次会议涵盖的安全研究主题广泛,包括源代码分析、二进制代码分析、恶意软件检测、漏洞检测、模糊测试、程序验证等。一些热门的研究方向包括:基于机器学习的漏洞检测、大型语言模型在软件安全中的应用、区块链智能合约安全分析。这些方向都在最近几年持续发展。一些较冷门…...
基于YOLOv8模型和PCB电子线路板缺陷目标检测系统(PyTorch+Pyside6+YOLOv8模型)
摘要:基于YOLOv8模型PCB电子线路板缺陷目标检测系统可用于日常生活中检测与定位PCB线路板瑕疵,利用深度学习算法可实现图片、视频、摄像头等方式的目标检测,另外本系统还支持图片、视频等格式的结果可视化与结果导出。本系统采用YOLOv8目标检…...
centos安装mysql8
检查是否有mariadb rpm -qa|grep mariadb rpm -e --nodeps mariadb-server安装mysql-8.0.31-el7-x86_64.tar.gz包 安装mysql-8.0.31-el7-x86_64.tar.gz包 cd datatar -xvf mysql-8.0.31-el7-x86_64.tar.gzmv mysql-8.0.31-el7-x86_64 mysql 依赖安装 报错解决,安…...
【Apollo】阿波罗自动驾驶技术:引领汽车行业革新
前言 Apollo (阿波罗)是一个开放的、完整的、安全的平台,将帮助汽车行业及自动驾驶领域的合作伙伴结合车辆和硬件系统,快速搭建一套属于自己的自动驾驶系统。 开放能力、共享资源、加速创新、持续共赢是 Apollo 开放平台的口号。百度把自己所拥有的强大、…...
一文看懂!数据管道和数据流在数据分析中的作用
当我们谈论数据分析时,我们通常会想到一系列的步骤,包括数据收集、数据清洗、数据分析和数据可视化等。然而,在这些步骤中,有两个非常重要的概念:数据管道和数据流。这两个概念在数据分析过程中起着至关重要的作用。本…...
Linux系统下检验Tensorflow 2.xx版本和1.xx版本是否安装成功
目录 版本问题Tensorflow 1.xx的测试代码:Tensorflow 2.xx的测试代码:Tensorflow 2.6版本实际的测验结果 总结 版本问题 查询资料发现,多数检验Tensorflow是否安装成功的方法,多数方法都是1.xx版本的,直接使用1.xx版本…...
暑期高铁站大量遗失物品,FindMy帮助寻找
近日,一女子在上海坐高铁时,将户口本、房产证遗落安检处的新闻引起网友的关注。然后业内人士表示:常事,车站什么都能捡到。 据中国铁路透露,暑运期间,上海虹桥站客流增加,日均发送旅客20多万人…...
通过安全日志读取WFP防火墙放行日志
前言 之前的文档中,描写了如何对WFP防火墙进行操作以及如何在防火墙日志中读取被防火墙拦截网络通讯的日志。这边文档,着重描述如何读取操作系统中所有被放行的网络通信行为。 读取系统中放行的网络通信行为日志,在win10之后的操作系统上&am…...