CSS世界
River_Js
热衷于前端工作,兴趣广泛,喜欢阅读技术类书籍和玩有趣儿的小的demo,对新奇好玩的技术有极大的热情!
展开
-
列表最后一项不完全显示,使用margin-bottom 无效(已解决)
最近在做项目的时候遇到一个很尴尬的问题在底部菜单固定之后,列表最后一项显示不完全,通常会使用margin-bottom来让其显示出来,打但是会遇到margin-bottom无效的情况使用padding-bottom 可以完美解决但是这不是从根本上解决问题的办法,如果有其他的办法,欢迎和大家讨论交流...原创 2020-12-14 10:39:44 · 1570 阅读 · 0 评论 -
3D翻转盒子图片展示特效(解决鼠标进入不同的边,自动判断进入的是什么方向)
3D翻转盒子图片展示特效首先展示一下完成的效果第一步:构建html结构在一个容器中,生成六个小盒子,这里我使用了 ul li 的方式 在每一个li中 有一个 pic-area 用来包裹图片和文字,我这里使用了弹性盒子布局的方式,实现了演示的布局,其他方式也都可以,然后通过把文字区域定位,与图片区重叠,为后续构建立方体做准备,为了看得清楚,我增加了一点点透明度,后期会删掉一部分html代码如下: <div class="wrapper"> <ul>原创 2020-08-28 02:39:05 · 1312 阅读 · 3 评论 -
(附带免费源码文件)炫酷缩放图片展示特效,通过90%以上css以及一点点JS实现
缩放图片展示特效首先看一下这个特效的最终效果:首先来分析一下这个效果都有哪些功能首先初始化效果为6列,分别展示了图片的一部分进入页面或者刷新页面时,每一列出现有一定时间间隔,有错落感鼠标移入每一列时,每一列会有变化鼠标点击每一列时,会展开当前图片,其余图片隐藏掉,同时图片出现一个title 和一个 close按钮关闭每一列时会收紧当前图片,并还原到初始化状态首先乍一看好像很复杂的样子,但是这个特效真的用了 99%的css3属性,仅仅是在打开关闭和类名切换的时候用到了一点点js。那么怎原创 2020-08-22 11:07:05 · 1898 阅读 · 2 评论 -
纯CSS实现图片百叶窗展示效果
纯CSS图片百叶窗首先给大家看一下完成效果主要思路:其实这个百叶窗还是利用了一种障眼法,我们看上去是鼠标移动上去之后,图片展开了,其实这些图片在原地根本没有动,只不过是我们把这些图片放在了一个列表里,相互叠加,鼠标移动的同时改变列表的宽度。第一步:构建一个百叶窗框架html代码: <div class="container"> <ul> <li></li> <li></原创 2020-08-18 18:47:25 · 6500 阅读 · 16 评论 -
CSS实现loading小动画
纯css实现loading动画相信各位上网过程中最不希望看到的就是加载中不停转圈圈的画面了那么他是怎么实现的呢?其实通过一些简单的css技巧就可以实现啦!首先双手奉上代码 <style> *{ margin: 0; padding: 0; } body{ background-color: #000000; } .container{原创 2020-07-25 10:12:04 · 3691 阅读 · 2 评论