用move.js库实现百叶窗特效

前端之家收集整理的这篇文章主要介绍了用move.js库实现百叶窗特效前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

今天操作的是一个,百叶窗效果的一个页面特效,好,现在直接上最终效果吧。demo做的有点low,不过效果都在了

这是html和css代码:思路就是,每一个li里面div,放几个p,通过调节translatY,来控制。

*{ padding: 0; margin: 0; list-style: none; } #bai{ width: 400px; height: auto; float: left; margin-left:20px auto; } li{ text-align: center; width: 100%; height: 50px; line-height: 50px; border-bottom: 1px dashed #000; position: relative; overflow: hidden; } div.Box{ width: 100%; height: 50px; position: absolute; top: -50px; } p{ height: 50px; }
    Box a1">

    1111111111111111

    22222222222222222

  • Box a2">

    33333333333333333

    44444444444444444

  • Box a3">

    55555555555555555

    66666666666666666

  • Box a4">

    77777777777777777

    88888888888888888

关键在这里:可以来这里 

 

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

原文链接:https://www.f2er.com/js/41922.html

猜你在找的JavaScript相关文章