iHover鼠标悬停效果包推荐 水深无声 2022-08-26 14:27 204阅读 0赞 前端开发whqet,csdn,王海庆,whqet,前端开发专家 今天推荐一个鼠标悬停效果包,大家可以通过研读效果提高自己的水平,也可以直接用在自己的项目中。 ### 1.引入 ### IHover是一个纯CSS3驱动的鼠标悬停效果(hover)效果包,独立工作,并且能与BootStrap3有效兼容。如下图所示。 [项目主页][Link 1],[示例文件][Link 2],[下载文件][Link 3]。 ![SouthEast][] ### 2.特性 ### 纯CSS3驱动,独立工作,能在任意项目中使用 基于SCSS,方便修改 模块化编码,无需引入整个文件 30+效果集中呈现 文档清晰 与Bootstrap3有效兼容 ### 3.如何使用 ### iHover极易使用,你需要做的就是书写一些html代码,然后把CSS文件包含就来就行。 <link href="styles/ihover.css" rel="stylesheet"> 文档结构如下图所示, ![SouthEast 1][] 如果你想重新建立你的项目文件,请使用scss文件。 ### 自己动手,实践一下,试验了[第一个效果][Link 4],果然简单。 ### 拷贝html文件 <div class="ih-item circle effect1"> <a href="#"> <div class="spinner"></div> <div class="img"><img src="http://gx.zptc.cn/whqet/ihover/1.jpg" alt="img"></div> <div class="info"> <div class="info-back"> <h3>Heading here</h3> <p>Description goes here</p> </div> </div> </a> </div> 然后引入ihover.css就可以啦。 ### 4.效果解析 ### 第一个效果的scss文件如下,大家可以研究下。 // // -------------------------------------------------- .ih-item.circle.effect1 { .spinner { width: 230px; height: 230px; border: 10px solid #ecab18; border-right-color: #1ad280; border-bottom-color: #1ad280; border-radius: 50%; @include transition( all .8s ease-in-out ); } .img { position: absolute; top: 10px; bottom: 0; left: 10px; right: 0; width: auto; height: auto; &:before { display: none; } } &.colored { .info { background: $overlay_colored_fallback; background: $overlay_colored; } } .info { top: 10px; bottom: 0; left: 10px; right: 0; background: $overlay_dark_fallback; background: $overlay_dark; opacity: 0; @include transition( all .8s ease-in-out ); h3 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 55px 0 0 0; height: 110px; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); } p { color: #bbb; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); } } a:hover { .spinner { @include transform( rotate(180deg) ); } .info { opacity: 1; } } } 该文件里使用了 [Bourbon][]这个SassMixin集,请大家注意。 That's it. \--------------------------------------------------------------- [前端开发whqet][whqet],关注web前端开发技术,分享网页相关资源。 \--------------------------------------------------------------- [Link 1]: https://github.com/gudh/ihover [Link 2]: http://gudh.github.io/ihover/dist/index.html [Link 3]: https://github.com/gudh/ihover/archive/gh-pages.zip [SouthEast]: /images/20220824/5fe6e8c68f0f4f199b34f132034a5b3b.png [SouthEast 1]: /images/20220824/889c36e784b4482488cac558ea1966b6.png [Link 4]: http://codepen.io/whqet/pen/DGJIt/ [Bourbon]: http://bourbon.io/ [whqet]: http://blog.csdn.net/whqet
还没有评论,来说两句吧...