/
githubmirror
/
animate.css
Обзор
Документация
Войти
/
githubmirror
/
animate.css
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
v4.0.0
docsSource/template.html
133 строки
6 KB
Elton Mesquita
v4 release (#1050)
07 май 2020, 18:42
Не верифицирован
07 май 2020, 18:42
5a1c6b1
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="en"> <head> <title>Animate.css</title> <meta name="description" content="Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints." /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="dns-prefetch" href="//fonts.googleapis.com" /> <link href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-tomorrow.min.css" rel="stylesheet" /> <link rel="stylesheet" href="animate.min.css" /> <link rel="stylesheet" href="style.css" /> </head> <body> <article class="intro"> <section class="callout"> <h1 class="callout-title">Animate.css</h1> <h2 class="callout-subtitle">Just-add-water CSS animations</h2> <p class="callout-showList"> <button class="button button-animations">See animations</button> </p> </section> <section class="animation-list"> <button class="callout-hideList button">Close list</button> {{list}} </section> <footer class="intro-footer"> <p> Another thing from <a href="Daniel Eden" target="_blank" title="Daniel Eden">Daniel Eden</a> and <a href="#contributors" title="Contributors">friends</a> </p> </footer> </article> <main> <header class="docs-header"> <div class="container"> <h2 class="docs-mainTitle"> <a href="#documentation" title="Documentation">Documentation</a> </h2> </div> </header> <article class="docs" id="documentation"> <span class="hamburger"> <svg width="23" height="15" viewBox="0 0 23 15" fill="none" xmlns="http://www.w3.org/2000/svg" > <line y1="1.5" x2="23" y2="1.5" stroke="#351C75" stroke-width="3" /> <line y1="7.5" x2="23" y2="7.5" stroke="#351C75" stroke-width="3" /> <line y1="13.5" x2="23" y2="13.5" stroke="#351C75" stroke-width="3" /> </svg> </span> <div class="container"> <div class="content"> {{docs}} </div> <aside class="sidebar"> <div class="meta"> <a href="https://github.com/daneden/animate.css" target="_blank" class="icon-github"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18" width="18" height="18" > <path fill="#000000" d="M16.793 4.703a8.96 8.96 0 00-3.276-3.276A8.803 8.803 0 009 .22a8.804 8.804 0 00-4.518 1.207 8.96 8.96 0 00-3.275 3.276A8.803 8.803 0 000 9.22c0 1.96.572 3.724 1.717 5.29 1.144 1.567 2.623 2.651 4.435 3.252.211.04.367.012.469-.081a.458.458 0 00.152-.352l-.006-.633c-.004-.398-.006-.746-.006-1.042l-.27.046a3.434 3.434 0 01-.65.041 4.958 4.958 0 01-.814-.082 1.82 1.82 0 01-.785-.351 1.487 1.487 0 01-.516-.72l-.117-.27a2.93 2.93 0 00-.369-.598c-.168-.219-.338-.367-.51-.445l-.082-.059a.865.865 0 01-.152-.14.643.643 0 01-.105-.165c-.024-.054-.004-.1.058-.135.063-.035.176-.052.34-.052l.234.035c.157.031.35.125.58.281.23.156.42.36.569.61.18.32.396.564.65.732.254.168.51.252.768.252.257 0 .48-.02.667-.059a2.33 2.33 0 00.528-.175c.07-.524.262-.927.574-1.208a8.026 8.026 0 01-1.201-.21 4.779 4.779 0 01-1.102-.458 3.153 3.153 0 01-.943-.785c-.25-.312-.455-.723-.615-1.23-.16-.508-.24-1.094-.24-1.758 0-.946.308-1.75.925-2.414-.289-.711-.261-1.508.082-2.39.227-.071.563-.018 1.008.157.446.176.772.327.979.452.207.125.373.23.498.316A8.32 8.32 0 019 4.568c.773 0 1.523.101 2.25.304l.445-.281c.305-.188.664-.36 1.078-.516.414-.156.73-.199.95-.129.351.883.382 1.68.093 2.39.617.665.926 1.47.926 2.415 0 .664-.08 1.252-.24 1.764-.16.511-.367.921-.62 1.23-.255.309-.572.569-.95.78-.38.21-.747.362-1.102.456a8.013 8.013 0 01-1.201.212c.406.351.61.906.61 1.664v2.472c0 .14.048.258.146.351.097.094.252.121.463.082 1.812-.601 3.29-1.685 4.435-3.252C17.427 12.944 18 11.18 18 9.22a8.81 8.81 0 00-1.207-4.517z" /> </svg> </a> <span class="animate-version">v{{version}}</span> </div> </aside> </div> </article> </main> <footer class="main-footer"> <p> Animate.css is a MIT licensed library. You can use it freely, respecting the terms included in the <a href="https://github.com/daneden/animate.css/blob/master/LICENSE" title="license">license file. </p> </footer> <aside class="motionless__banner"> <p class="motionless__paragraph"> <b>Hey!</b> It seems that you have animations disabled on your OS, turning Animate.css off.<br /> Animate.css supports the <a title="prefers-reduced-motion CSS media feature on MDN" target="_blank" rel="noopener noreferrer" href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion" > prefers-reduced-motion CSS media feature</a >. You can read more about it <a title="Move Ya! Or maybe, don't, if the user prefers-reduced-motion! on Google Developers" target="_blank" rel="noopener noreferrer" href="https://developers.google.com/web/updates/2019/03/prefers-reduced-motion" > here</a >. </p> </aside> <script type="module" src="main.mjs"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/prism.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js"></script> </body> </html>