• PUDN用户
    了解作者
  • HTML
    开发工具
  • 12KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • 1 积分
    下载积分
  • 0
    下载次数
  • 2019-02-18 12:58
    上传日期
一款使用纯css3制作的类似ios和android滑动按钮的动画效果
121.zip
  • readme.html
    865B
  • head-photo.jpg
    6.5KB
  • jQuery之家.url
    296B
  • prefixfree.min.js
    5.8KB
  • index.html
    5.5KB
内容介绍
<!DOCTYPE html><html class=''> <head><meta charset='UTF-8'> <script src='prefixfree.min.js'></script> <style class="cp-pen-styles"> @import url(http://fonts.googleapis.com/css?family=Dosis:600,200|Great+Vibes); @import url(http://weloveiconfonts.com/api/?family=fontawesome); *, *:after, *:before { box-sizing: border-box; -moz-box-sizing: border-box; } * {margin:0;padding:0;border: 0 none;position: relative;} [class*="fontawesome-"]:before {font-family: 'fontawesome', sans-serif;} html { background: #33485E; width: 100%; height: 100%; font-family: dosis, sans-serif; font-weight: 300; color: #fff; } section { background: #31A66C; width: 80vw; max-width: 40rem; min-width: 390px; height: 25rem; margin: 4rem auto; box-shadow: 0 0 6px rgba(0,0,0,.4); } article { position: absolute; left: 0; top: 5rem; right: 0; bottom: 0; padding: 1rem 2rem 0; overflow: auto; transition: .7s; transform: scale(0); transform-origin: center right; transition-delay: .1s; } article:before { color: rgba(0,0,0,.2); font-size: 4rem; font-weight: 100; position: absolute; bottom: 1rem; right: 1rem; } h2 { font-size: 2.5rem; font-weight: 600; text-align: center; color: rgba(0,0,0,.6); } h2 img { width: 120px; height: auto; background: #f9f9f9; border: 5px solid rgba(0,0,0,.7); border-radius: 50%; padding: 5px; display: block; margin: 0 auto; box-shadow: 0 0 7px rgba(0,0,0,.5); } h2 span { font-family: Great Vibes; font-weight: 400; display: block; margin-bottom: 1rem; } footer ul { width: 100%; color: #037B49; } footer li { list-style-type: none; float: left; width: 20%; text-align: center; font-size: 3rem; font-weight: 100; } p, dl, ol { line-height: 1.5; font-size: 1.3rem; } ol li {margin: 0 0 .5rem 1rem;} dt { font-size: 1.6rem; font-weight: 600; text-indent: 1.5rem; } nav { background: #fff; width: 100%; height: 5rem; box-shadow: 0 0 6px rgba(0,0,0,.4); } nav:after { content:''; width: 25%; height: 5rem; background: #BEE3D1; position: absolute; transition: .5s; } input { display: none; } label { width: 25%; float: left; color: #BEE3D1; text-align: center; cursor: pointer; transition: .5s; z-index: 2; } label:hover {color: #1E6743;} label:before { display: block; font-size: 3rem; line-height: 5rem; z-index: 2; } #profile:checked ~ nav [for='profile'], #settings:checked ~ nav [for='settings'], #posts:checked ~ nav [for='posts'], #books:checked ~ nav [for='books'] { color: #1E6743; font-weight: 600; } #settings:checked ~ nav [for='settings'] {} #profile:checked ~ nav [for='profile'] {} #profile:checked ~ nav:after { left: 0; } #settings:checked ~ nav:after { left:25%; border-top: 0 none; } #posts:checked ~ nav:after { left: 50%; } #books:checked ~ nav:after { left: 75%; } #profile:checked ~ .uno, #settings:checked ~ .dos, #posts:checked ~ .tres, #books:checked ~ .cuatro { display: block; transform: scale(1); transition-delay: .5s; } a {color: rgba(0,0,0,.4)} a:hover {color: rgba(0,0,0,.2)}</style></head><body> <section> <input type="radio" id="profile" value="1" name="tractor" checked='checked' /> <input type="radio" id="settings" value="2" name="tractor" /> <input type="radio" id="posts" value="3" name="tractor" /> <input type="radio" id="books" value="4" name="tractor" /> <nav> <label for="profile" class='fontawesome-camera-retro'></label> <label for="settings" class='fontawesome-film'></label> <label for="posts" class='fontawesome-calendar'></label> <label for="books" class='fontawesome-list-alt'></label> </nav> <article class='uno' rel='nofollow' onclick='return false;'> <h2> Delmarks <span>Delmarks Css blog</span></h2> <footer> <ul> <li class='fontawesome-link'></li> <li class='fontawesome-paper-clip'></li> <li class='fontawesome-sitemap'></li> <li class='fontawesome-wrench'></li> <li class='fontawesome-magic'></li> </ul> </footer> </article> <article class='dos fontawesome-wrench' rel='nofollow' onclick='return false;'> <p>Si hay algún fenómeno en la web que sea lo más parecido a las setas eso son los blogs, cursos y enseñanzas web. Todo lo relativo a la divulgación, de cualquier materia o parcela del conocimiento humano, angelical o mefistofélico, tiene su oferta, sus "maestros" y sus cocinillas visionarios.</p> </article> <article class='tres fontawesome-file-alt' rel='nofollow' onclick='return false;'> <ol> <li>Dimensionado de imágenes y objetos en CSS</li> <li>Evita pulsaciones no deseadas al hacer scroll</li> <li>¿Qué es CSS?</li> <li>CSS Style Attributes. La especificación</li> <li>Múltiples labels por cada input </li> <li>Sintaxis de Css y Glosario de términos</li> </ol> </article> <article class='cuatro fontawesome-copy' rel='nofollow' onclick='return false;'> <dl> <dt>Guía de Transiciones Css</dt> <dd>Todas y cada una de las propiedades css que componen el grupo de las transitions con demos.</dd> <dt>@Font-face y sus problemas</dt> <dd>Los problemas más comunes y sus soluciones, que suelen presentarse al utilizar la regla @font-face de Css para mostrar los textos en tipografías distintas a las safety fonts.</dd> </dl> </article> </section> <h2><a href='http://www.htmleaf.com/' rel='nofollow' onclick='return false;'>see you ver.1</a></h2> <script> </script> </body></html>
评论
    相关推荐