css绘制动画图标效果代码
代码语言: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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0