CSS自学框架之动画

news2024/11/18 11:40:57

这一节，自学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.coloradmin.cn/o/905836.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Typescript基础知识（类型拓宽、类型缩小）

Typescript基础知识（类型拓宽、类型缩小）

系列文章目录 引入一&#xff1a;Typescript基础引入&#xff08;基础类型、元组、枚举&#xff09; 引入二&#xff1a;Typescript面向对象引入&#xff08;接口、类、多态、重写、抽象类、访问修饰符&#xff09; 第一章&#xff1a;Typescript基础知识&#xff08;Typescri…
阅读更多...
Linux 线程同步——信号量、互斥锁、读写锁

Linux 线程同步——信号量、互斥锁、读写锁

一、线程同步的概念 这里的同步就是对程序的执行进行控制&#xff0c;因为如果不进行控制就会出现错误的问题&#xff0c;这里的控制是为了保证程序的正确性。 线程同步指的是当一个线程在对某个临界资源进行操作时&#xff0c;其他线程都不可以对这个资源进行操作&#xff0…
阅读更多...
自然语言处理: 第九章DeepSpeed的实践

自然语言处理: 第九章DeepSpeed的实践

理论基础 仓库链接: microsoft/DeepSpeed: DeepSpeed is a deep learning optimization library that makes distributed training and inference easy, efficient, and effective. DeepSpees正如它官网介绍的一样&#xff0c;它为深度学习模型提供了一站式的快速以及大规模…
阅读更多...
【SA8295P 源码分析】03 - SA8295P QNX Host上电开机流程分析

【SA8295P 源码分析】03 - SA8295P QNX Host上电开机流程分析

【SA8295P 源码分析】03 - SA8295P QNX Host上电开机流程分析 一、阶段1 固件开机自检 (SM BIST)&#xff1a;APPS PBL加载XBL后触发 INT_RESET进行Warm Reset二、阶段2 固件开机自检 (SM BIST)&#xff1a;加载TZ&#xff0c;初始Hypervisor&#xff0c;启动QNX Kernel&#x…
阅读更多...
k8编写yaml文件小工具

k8编写yaml文件小工具

在刚接触k8s的时候觉得yaml资源文件非常的难写&#xff0c;完全看不懂&#xff0c;经过一段时间的摸索学习&#xff0c;发现k8s平台中是提供了一系列的工具和技巧的&#xff0c;可以帮助我们很好的编写资源文件&#xff0c;提升编写yaml文件的能力&#xff0c;常用的命令工具是…
阅读更多...
python爬虫9：实战2

python爬虫9：实战2

python爬虫9&#xff1a;实战2 前言 ​ python实现网络爬虫非常简单&#xff0c;只需要掌握一定的基础知识和一定的库使用技巧即可。本系列目标旨在梳理相关知识点&#xff0c;方便以后复习。 申明 ​ 本系列所涉及的代码仅用于个人研究与讨论&#xff0c;并不会对网站产生不好…
阅读更多...
时序预测 | MATLAB实现SO-CNN-LSTM蛇群算法优化卷积长短期记忆神经网络时间序列预测

时序预测 | MATLAB实现SO-CNN-LSTM蛇群算法优化卷积长短期记忆神经网络时间序列预测

时序预测 | MATLAB实现SO-CNN-LSTM蛇群算法优化卷积长短期记忆神经网络时间序列预测 目录 时序预测 | MATLAB实现SO-CNN-LSTM蛇群算法优化卷积长短期记忆神经网络时间序列预测预测效果基本介绍程序设计学习总结参考资料 预测效果 基本介绍 时序预测 | MATLAB实现SO-CNN-LSTM蛇群…
阅读更多...
深入解析淘宝API，实现高效商务应用

深入解析淘宝API，实现高效商务应用

淘宝API的基本调用 1. API文档与SDK 淘宝API官方提供了详细的API文档&#xff0c;包含了API的使用说明、参数列表、示例代码等内容。开发者可以通过文档了解每个API接口的具体功能和使用方法。此外&#xff0c;淘宝API还提供了多种编程语言的SDK&#xff0c;方便开发者进行快速…
阅读更多...
桌游新篇：3.1 UserCase分析

桌游新篇：3.1 UserCase分析

距离上一次停止更新这个系列有将近9个月了。 工作这么久&#xff0c;学会了一件事&#xff0c;就是想清楚再动手。当然&#xff0c;后续工作已经渐渐展开了&#xff0c;而且当下属于天时地利人和&#xff08;既有当前MR设备带来的硬件buff&#xff0c;又有大语言模型&#xff…
阅读更多...
SOPC之NIOS Ⅱ实现电机转速PID控制

SOPC之NIOS Ⅱ实现电机转速PID控制

通过FPGA开发板上的NIOS Ⅱ搭建电机控制的硬件平台&#xff0c;包括电机正反转、编码器的读取&#xff0c;再通过软件部分实现PID算法对电机速度进行控制&#xff0c;使其能够渐近设定的编码器目标值。 一、PID算法 PID算法&#xff08;Proportional-Integral-Derivative Algo…
阅读更多...
21-注意点说明:scoped样式冲突 / data

21-注意点说明:scoped样式冲突 / data

组件的三大组成部分 - 注意点说明 组件的样式冲突 scoped 默认情况:写在组件中的样式会 全局生效 -> 因此很容易造成多个组件之间的样式冲突问题 1.全局样式: 默认组件中的样式会作用到全局 2.局部样式: 可以给组件加上 scoped 属性,可以让样式只作用于当前组件 scoped原理…
阅读更多...
《有效调节情绪，保持工作心态平和》

《有效调节情绪，保持工作心态平和》

工作中&#xff0c;我们有时会遇到各种挑战和困难&#xff0c;这些挑战和困难可能引发我们的负面情绪&#xff0c;例如焦虑、愤怒和沮丧等。然而&#xff0c;保持稳定的情绪是实现高效工作的重要因素之一。本文将分享如何在工作中保持稳定的情绪。 首先&#xff0c;让我们来谈谈…
阅读更多...
Spring Boot 如何通过jdbc+HikariDataSource 完成对Mysql 操作

Spring Boot 如何通过jdbc+HikariDataSource 完成对Mysql 操作

&#x1f600;前言 本篇博文是关于Spring Boot 如何通过jdbcHikariDataSource 完成对Mysql 操作的说明&#xff0c;希望你能够喜欢&#x1f60a; &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的…
阅读更多...
Python多组数据三维绘图系统

Python多组数据三维绘图系统

文章目录 增添和删除坐标数据更改绘图逻辑源代码 Python绘图系统&#xff1a; 基础&#xff1a;将matplotlib嵌入到tkinter &#x1f4c8;简单的绘图系统 &#x1f4c8;数据导入&#x1f4c8;三维绘图系统自定义控件&#xff1a;坐标设置控件&#x1f4c9;坐标列表控件 增添和…
阅读更多...
录屏有哪些讲究？有哪些好用的录屏软件？

录屏有哪些讲究？有哪些好用的录屏软件？

在如今数字时代&#xff0c;视频分享已经成为一种流行的传播方式。为了制作高质量的视频内容&#xff0c;录屏已经成为了一种必备的技能。但是&#xff0c;要想制作出令人满意的录屏视频&#xff0c;需要了解一些讲究和使用一些好用的录屏软件。 录屏是一种视觉传达方式&#x…
阅读更多...
【prism】发布订阅和取消订阅，进一步梳理

【prism】发布订阅和取消订阅，进一步梳理

一个对象对应一个事件订阅 一个事件是可以被重复订阅的，如果一个事件被订阅了三次，那边发布一次该事件，就会触发三次事件订阅： 通过观察Prism的事件聚合器对象，发现它此时包含了三个事件对象，其中第三个事件订阅数量达到了3！ 这样的话，如果调用一次 Publish ，那么S…
阅读更多...
Android 获取 SHA256 签名

Android 获取 SHA256 签名

在 Android Studio 中的 Terminal &#xff0c;输入命令: keytool -list -v -keystore debug.keystore 如果出现以下提示&#xff1a; keytool -genkey -v -keystore debug.keystore -alias androiddebugkey -keyalg RSA -validity 10000 按照提示输入相关信息&#xff0c;…
阅读更多...
SIP 7英寸触摸屏寻呼主机

SIP 7英寸触摸屏寻呼主机

SV-8006TP SIP7英寸触摸屏寻呼主机 一、描述 SV-8006TP是我司的一款SIP桌面式对讲广播主机&#xff0c;具有10/100M以太网接口&#xff0c;从网络接口接收网络的音频数据&#xff0c;提供立体声音频输出。 SV-8006TP寻呼话筒可以通过麦克风或者本地线路输入对终端进行分区广…
阅读更多...
Java【手撕双指针】LeetCode 283. “移动零“, 图文详解思路分析 + 代码

Java【手撕双指针】LeetCode 283. “移动零“, 图文详解思路分析 + 代码

文章目录 前言一、移动零1, 题目2, 思路分析3, 代码展示 前言 各位读者好, 我是小陈, 这是我的个人主页, 希望我的专栏能够帮助到你: &#x1f4d5; JavaSE基础: 基础语法, 类和对象, 封装继承多态, 接口, 综合小练习图书管理系统等 &#x1f4d7; Java数据结构: 顺序表, 链表,…
阅读更多...
传统图像处理之直方图均衡化

传统图像处理之直方图均衡化

重要说明&#xff1a;本文从网上资料整理而来&#xff0c;仅记录博主学习相关知识点的过程&#xff0c;侵删。 一、参考资料 直方图均衡化的原理及实现 图像处理之直方图均衡化 二、直方图 1. 直方图的概念 图像的灰度直方图&#xff0c;描述了图像中灰度分布情况&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023