css绘制动画图标效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css绘制动画图标效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*____________________________________________________________
# Variables
____________________________________________________________*/
/*____________________________________________________________
## Regular color variables
____________________________________________________________*/
/*____________________________________________________________
## Compound color variables
____________________________________________________________*/
/*____________________________________________________________
## Screen size variables
____________________________________________________________*/
/*____________________________________________________________
# Extends
____________________________________________________________*/
/*____________________________________________________________
## Position centering extends
____________________________________________________________*/
.intuitiveBaseHousing, .intuitiveNeck, .intuitiveLightBulbCircle, .sociableDisplay__buttonsWrap, .sociableDisplay__avatar, .respImac__standBase, .respImac__stand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.intuitiveIcon, .sociableLink__figure:before, .sociableLink__figure:after, .sociableIcon, .respBrowser, .responsiveIcon, .dynamicIcon, .clockFaceContainer__clockCircle, .fastClockWrap__clock, .fastIcon, .learnabilityGear__gearCircle, .learnabilityGear__gear, .learnabilityIcon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*____________________________________________________________
# Mixins
____________________________________________________________*/
/*____________________________________________________________
## Media queries mixin
____________________________________________________________*/
/*____________________________________________________________
## Animation delay mixin
____________________________________________________________*/
/*____________________________________________________________
# Auxiliary styles
____________________________________________________________*/
::-webkit-scrollbar {
  width: 0;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.__button_exit {
  background-color: #ff5f56;
}

.__button_minimize {
  background-color: #febc2e;
}

.__button_screen {
  background-color: #29c740;
}

/*____________________________________________________________
# Container
____________________________________________________________*/
.container {
  width: 100%;
}

/*____________________________________________________________
## About section
____________________________________________________________*/
.about {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #9b2d30;
}

/*____________________________________________________________
### Card wrap
____________________________________________________________*/
.cardWrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 490px;
  height: 320px;
}

.iconCard {
  float: left;
  position: relative;
  width: 150px;
  height: 150px;
  margin-bottom: 20px;
  margin-right: 20px;
  background-color: #9b2d30;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.iconCard:nth-child(3n) {
  margin-right: 0;
}

/*____________________________________________________________
#### Learnability Icon
____________________________________________________________*/
.learnabilityIcon {
  width: 81px;
  height: 61px;
}

/*____________________________________________________________
##### Learnability Editor
____________________________________________________________*/
.learnabilityEditor {
  position: absolute;
  right: 0;
  width: 41px;
  height: 100%;
}

/*____________________________________________________________
###### Learnability Editor Panel
____________________________________________________________*/
.learnabilityEditor__panel {
  position: relative;
  width: 100%;
  height: 5px;
  background-color: #2a333c;
}

.learnabilityEditor__buttonsWrap {
  position: absolute;
  top: 1px;
  left: 2px;
  height: 2px;
}

.learnabilityEditor__button {
  float: left;
  margin-right: 1px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
}

/*____________________________________________________________
###### Learnability Editor Code
____________________________________________________________*/
.learnabilityEditor__codeWrap {
  position: relative;
  padding: 6px;
  width: 100%;
  height: calc(100% - 5px);
  background-color: #ee6648;
}

.learnabilityEditor__scrollBox {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.learnabilityEditor__codeList {
  position: absolute;
  width: 100%;
  animation: learnabilityScrollCode 0.9s linear infinite;
}

.learnabilityEditor__codeItem {
  position: relative;
  margin-bottom: 2px;
  width: 100%;
  height: 7px;
}

.learnabilityEditor__codeLine {
  position: absolute;
  height: 1px;
  overflow: hidden;
}
.learnabilityEditor__codeLine:nth-child(1) {
  top: 0px;
  left: 0px;
  width: 7px;
}
.learnabilityEditor__codeLine:nth-child(2) {
  top: 0px;
  left: 9px;
  width: 11px;
}
.learnabilityEditor__codeLine:nth-child(3) {
  top: 3px;
  left: 4px;
  width: 21px;
}
.learnabilityEditor__codeLine:nth-child(4) {
  bottom: 0px;
  right: 7px;
  width: 14px;
}
.learnabilityEditor__codeLine:nth-child(5) {
  bottom: 0px;
  right: 0px;
  width: 5px;
}
.learnabilityEditor__codeLine:after {
  content: "";
  position: absolute;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #2a333c;
  animation: slide 3.5s ease infinite;
}
.learnabilityEditor__codeLine:nth-child(2):after {
  animation-delay: 0.2s;
}
.learnabilityEditor__codeLine:nth-child(3):after {
  animation-delay: 0.4s;
}
.learnabilityEditor__codeLine:nth-child(4):after {
  animation-delay: 0.6s;
}
.learnabilityEditor__codeLine:nth-child(5):after {
  animation-delay: 0.7s;
}
.learnabilityEditor__codeLine:nth-child(3):after, .learnabilityEditor__codeLine:nth-child(4):after, .learnabilityEditor__codeLine:nth-child(5):after {
  background-color: #fff;
}

/*____________________________________________________________
##### Learnability Keyboard
____________________________________________________________*/
.learnabilityKeyboard {
  position: absolute;
  bottom: 0;
  padding: 2px;
  width: 66px;
  height: 26px;
  background-color: #e6e5e5;
}

.learnabilityKeyboard__line {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  height: 3.4px;
  overflow: hidden;
}
.learnabilityKeyboard__line:last-child {
  margin-bottom: 0;
}
.learnabilityKeyboard__line:nth-child(1) .learnabilityKeyboard__button:nth-child(14) {
  width: 4.5px;
}
.learnabilityKeyboard__line:nth-child(2) .learnabilityKeyboard__button:nth-child(1) {
  width: 4.5px;
}
.learnabilityKeyboard__line:nth-child(3) .learnabilityKeyboard__button:nth-child(1) {
  width: 6.3px;
}
.learnabilityKeyboard__line:nth-child(3) .learnabilityKeyboard__button:nth-child(13) {
  width: 6.3px;
}
.learnabilityKeyboard__line:nth-child(4) .learnabilityKeyboard__button:nth-child(1) {
  width: 8.5px;
}
.learnabilityKeyboard__line:nth-child(4) .learnabilityKeyboard__button:nth-child(12) {
  width: 8.5px;
}
.learnabilityKeyboard__line:nth-child(5) .learnabilityKeyboard__button:nth-child(5) {
  width: 22px;
}
.learnabilityKeyboard__line:nth-child(2) .learnabilityKeyboard__button:nth-child(4) {
  animation: keyboardClick 4s linear infinite 0.4s;
}
.learnabilityKeyboard__line:nth-child(3) .learnabilityKeyboard__button:nth-child(10) {
  animation: keyboardClick 4s linear infinite 0.8s;
}
.learnabilityKeyboard__line:nth-child(2) .learnabilityKeyboard__button:nth-child(10) {
  animation: keyboardClick 4s linear infinite 1.2s;
}
.learnabilityKeyboard__line:nth-child(5) .learnabilityKeyboard__button:nth-child(5) {
  animation: keyboardClick 4s linear infinite 1.6s;
}
.learnabilityKeyboard__line:nth-child(2) .learnabilityKeyboard__button:nth-child(3) {
  animation: keyboardClick 4s linear infinite 2s;
}
.learnabilityKeyboard__line:nth-child(1) .learnabilityKeyboard__button:nth-child(11) {
  animation: keyboardClick 4s linear infinite 2.4s;
}
.learnabilityKeyboard__line:nth-child(2) .learnabilityKeyboard__button:nth-child(5) {
  animation: keyboardClick 4s linear infinite 2.8s;
}
.learnabilityKeyboard__line:nth-child(4) .learnabilityKeyboard__button:nth-child(12) {
  animation: keyboardClick 4s linear infinite 3.2s;
}
.learnabilityKeyboard__line:nth-child(3) .learnabilityKeyboard__button:nth-child(4) {
  animation: keyboardClick 4s linear infinite 3.6s;
}

.learnabilityKeyboard__button {
  position: relative;
  margin-right: 1px;
  float: left;
  width: 3.4px;
  height: 3.4px;
  background-color: #fff;
}
.learnabilityKeyboard__button:last-child {
  margin-right: 0;
}

/*____________________________________________________________
##### Learnability Gear
____________________________________________________________*/
.learnabilityGear {
  position: absolute;
  top: 4px;
  left: 5px;
  width: 30px;
  height: 26px;
}
.learnabilityGear:before, .learnabilityGear:after {
  content: "";
  position: absolute;
  border: solid #2a333c;
  width: 3px;
  height: 100%;
  box-sizing: border-box;
}
.learnabilityGear:before {
  border-width: 1px 0 1px 1px;
}
.learnabilityGear:after {
  right: 0;
  border-width: 1px 1px 1px 0;
}

.learnabilityGear__gear {
  width: 30px;
  height: 30px;
}
.learnabilityGear__gear svg {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  fill: none;
  stroke: #37404a;
  stroke-width: 24px;
  animation: rotateRays 7s linear infinite;
}
.learnabilityGear__gear .teeth {
  position: absolute;
  top: 19.32%;
  left: 19.32%;
  transform: translate(-19.32%, -19.32%);
}

.learnabilityGear__gearCircle {
  width: 17px;
  height: 17px;
  border: 4px solid #2a333c;
  background-color: #fff;
  border-radius: 50%;
}

/*____________________________________________________________
#### Fast Icon
____________________________________________________________*/
.fastIcon {
  width: 69px;
  height: 69px;
}

/*____________________________________________________________
##### Fast Browser
____________________________________________________________*/
.fastBrowser {
  position: relative;
  width: 100%;
  height: 100%;
}

/*____________________________________________________________
###### Fast Browser Panel
____________________________________________________________*/
.fastBrowser__panel {
  position: relative;
  padding: 3px 5px;
  width: 100%;
  height: 11px;
  background-color: #2a333c;
}

.fastBrowser__buttonsWrap {
  float: left;
  margin-right: 5px;
  width: 18px;
  height: 4px;
}

.fastBrowser__button {
  float: left;
  margin-right: 3px;
  width: 4px;
  height: 4px;
}
.fastBrowser__button:last-child {
  margin-right: 0;
}

.fastBrowser__input {
  position: relative;
  float: left;
  width: calc(100% - 23px);
  height: 4px;
  background-color: #fff;
}
.fastBrowser__input:after {
  content: "";
  position: absolute;
  right: 0;
  width: 7px;
  height: 100%;
  background-color: #ee6648;
}

/*____________________________________________________________
###### Fast Browser Page
____________________________________________________________*/
.fastBrowser__page {
  position: relative;
  padding: 5px;
  width: 100%;
  height: calc(100% - 11px);
  border: 4px solid #e6e5e5;
  background-color: #fff;
}

.fastBrowser__lineWrap {
  width: 100%;
  height: 100%;
}

.fastBrowser__line {
  position: relative;
  margin-bottom: 2px;
  width: 100%;
  height: 2px;
  overflow: hidden;
}
.fastBrowser__line:first-child {
  height: 20px;
}
.fastBrowser__line:last-child {
  margin-bottom: 0;
}
.fastBrowser__line:after {
  content: "";
  position: absolute;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #ee6648;
  animation: slide 3.5s ease infinite;
}
.fastBrowser__line:nth-child(2):after {
  animation-delay: 0.1s;
}
.fastBrowser__line:nth-child(3):after {
  animation-delay: 0.2s;
}
.fastBrowser__line:nth-child(4):after {
  animation-delay: 0.3s;
}
.fastBrowser__line:nth-child(5):after {
  animation-delay: 0.4s;
}
.fastBrowser__line:nth-child(6):after {
  animation-delay: 0.45s;
}

/*____________________________________________________________
##### Fast Clock Wrap
____________________________________________________________*/
.fastClockWrap {
  position: absolute;
  top: 30px;
  right: -30px;
  width: 68px;
  height: 68px;
}

/*____________________________________________________________
###### Fast Clock Gear
____________________________________________________________*/
.fastClockWrap__gear {
  position: absolute;
  width: 100%;
  height: 100%;
}
.fastClockWrap__gear svg {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  fill: none;
  stroke: #37404a;
  stroke-width: 24px;
  animation: rotateRays 7s linear infinite;
}
.fastClockWrap__gear .teeth {
  position: absolute;
  top: 19.32%;
  left: 19.32%;
  transform: translate(-19.32%, -19.32%);
}

/*____________________________________________________________
###### Fast Clock
____________________________________________________________*/
.fastClockWrap__clock {
  width: 38px;
  height: 38px;
  overflow: hidden;
  border: 4px solid #2a333c;
  border-radius: 50%;
}

.clockFaceContainer {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
}
.clockFaceContainer svg {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  fill: none;
  stroke: #2a333c;
  stroke-width: 4px;
  stroke-linecap: round;
}
.clockFaceContainer .teeth {
  position: absolute;
  top: 19.32%;
  left: 19.32%;
  transform: translate(-19.32%, -19.32%);
}

.clockFaceContainer__clockHand {
  position: absolute;
  top: calc(50% - 4px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 12px;
  transform-origin: 50% 4px;
  background-color: #2a333c;
  animation: rotateRays 12s linear infinite;
}

.clockFaceContainer__clockCircle {
  width: 5px;
  height: 5px;
  border: 1px solid #2a333c;
  border-radius: 50%;
  background-color: #fff;
}

/*____________________________________________________________
#### Dynamic Icon
____________________________________________________________*/
.dynamicIcon {
  width: 47px;
  height: 68px;
}

/*____________________________________________________________
##### Dynamic Browser
____________________________________________________________*/
.dynamicBrowser {
  position: relative;
  width: 100%;
  height: 100%;
}

/*____________________________________________________________
###### Dynamic Browser Panel
____________________________________________________________*/
.dynamicBrowser__panel {
  width: 100%;
  height: 5px;
  background-color: #2a333c;
}

.dynamicBrowser__buttonsWrap {
  position: absolute;
  top: 1px;
  left: 2px;
  height: 2px;
}

.dynamicBrowser__button {
  float: left;
  margin-right: 1px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
}

/*____________________________________________________________
###### Dynamic Browser Header
____________________________________________________________*/
.dynamicBrowser__header {
  position: relative;
  padding: 4px;
  width: 100%;
  height: 24px;
  background-color: #e6e5e5;
}

.dynamicBrowser__lineWrap {
  position: relative;
  padding-top: 2px;
  margin-bottom: 3px;
  width: 100%;
  height: 5px;
  background-c.........完整代码请登录后点击上方下载按钮下载查看