jQuery+CSS3鼠标点击按钮加载动画

新建html文档。

书写hmtl代码。

书写css代码。code[class*='language-'], pre[class*='language-'] { color: black; text-shadow: 0 1px white; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } pre[class*='language-']::-moz-selection, pre[class*='language-'] ::-moz-selection, code[class*='language-']::-moz-selection, code[class*='language-'] ::-moz-selection { text-shadow: none; background: #b3d4fc;}pre[class*='language-']::selection, pre[class*='language-'] ::selection, code[class*='language-']::selection, code[class*='language-'] ::selection { text-shadow: none; background: #b3d4fc; } @media print {code[class*='language-'],  pre[class*='language-'] { text-shadow: none; }}/* Code blocks */pre[class*='language-'] { padding: 1em; margin: .5em 0; overflow: auto; }:not(pre) > code[class*='language-'], pre[class*='language-'] { background: #f5f2f0; }/* Inline code */:not(pre) > code[class*='language-'] { padding: .1em; border-radius: .3em; }.token.comment, .token.prolog, .token.doctype, .token.cdata { color: slategray; }.token.punctuation { color: #999; }.namespace { opacity: .7; }.token.property, .token.tag, .token.boolean, .token.number { color: #905; }.token.selector, .token.attr-name, .token.string { color: #690; }.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: #a67f59; background: hsla(0,0%,100%,.5); }.token.atrule, .token.attr-value, .token.keyword { color: #07a; }.token.regex, .token.important { color: #e90; }.token.important { font-weight: bold; }.token.entity { cursor: help; }

书写并添加js代码。   

代码整体结构。

查看效果。