那些不用js也能实现的效果
本文首发于公众号:GitWeb,欢迎关注,接收首发推文
本文列举几个不需要使用js也能实现的效果
一、页面回到顶部
回到顶部是页面开发中很常见的一个功能,一般的做法是对回到顶部组件做一个监听,当用户点击的时候,设置body的scrollTop为0。今天发现一种更加简单的方式,不需要用到js也能实现。就是通过链接的href来做
<a href="#">回到顶部</a>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
像代码中这样,当点击这个链接的时候,页面会自动回到顶部,但是这种回到顶部是瞬间完成的,我们需要一个滚动的过程。所以我们需要对整个页面做一个平滑滚动的样式。设置html的scroll-behavior为smooth
html{
scroll-behavior: smooth;
}
二、文本多行截断可(展开)收起
1.实现这个多行截断比较简单,就是借助line-clamp这个属性就可以,再配合这个webkit-box-orient属性,就可以实现这种三行截断
.clamp{
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
<p class="clamp">
庆历四年春,滕子京谪守巴陵郡。越明年,政通人和,百废具兴,乃重修岳阳楼,增其旧制,刻唐贤今人诗赋于其上,属予作文以记之。
予观夫巴陵胜状,在洞庭一湖。衔远山,吞长江,浩浩汤汤,横无际涯,朝晖夕阴,气象万千,此则岳阳楼之大观也,前人之述备矣。
然则北通巫峡,南极潇湘,迁客骚人,多会于此,览物之情,得无异乎?若夫淫雨霏霏,连月不开,阴风怒号,浊浪排空,日星隐曜,
山岳潜形,商旅不行,樯倾楫摧,薄暮冥冥,虎啸猿啼。登斯楼也,则有去国怀乡,忧谗畏讥,满目萧然,感极而悲者矣。至若春和景明,
波澜不惊,上下天光,一碧万顷,沙鸥翔集,锦鳞游泳,岸芷汀兰,郁郁青青。而或长烟一空,皓月千里,浮光跃金,静影沉璧,渔歌互答,
此乐何极!登斯楼也,则有心旷神怡,宠辱偕忘,把酒临风,其喜洋洋者矣。嗟夫!予尝求古仁人之心,或异二者之为,何哉?不以物喜,不以己悲,
居庙堂之高则忧其民,处江湖之远则忧其君。是进亦忧,退亦忧。然则何时而乐耶?其必曰“先天下之忧而忧,后天下之乐而乐”乎!噫!微斯人,
吾谁与归?时六年九月十五日。
</p>
2.借助checkbox和label来实现按钮(展开)收起
.btn::after{
content: '展开';
}
#state:checked + .btn::after{
content: '收起';
}
#state{
position: absolute;
left: -999999px;
}
#state:checked ~ p{
-webkit-line-clamp: 100;
}
<input type="checkbox" name="" id="state">
<label for="state" class="btn"></label>
三、图片对齐不变形
这种高度不同的图片很容易破坏页面的布局,这个时候如果给它一个高度,图片会被拉伸变形非常丑
这时候可以用object-fit属性,给它一个cover选项,确保图片按原始宽高比例进行缩放,超出容器的部分会被裁切掉。和它配合的还有一个object-position属性,它可以指定图片显示的位置,结合鼠标移动+过渡动画
img{
width: 200px;
height: 200px;
object-fit: cover;
object-position: left top;
transition: 1s;
}
img:hover{
object-position: right bottom;
}
被 1 篇内容引用
推荐阅读
uniapp小程序图片加载失败
之前的微信小程序项目都是使用原生组件开发,最近尝试用uniapp开发微信小程序,写了个小程序的demo。然而在浏览器下运行一切正常,但是在微信开发者工具运行却出现图片报错
Winn赞 1阅读 421
ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 设置),搜索 eslint,点击 Edit in setting.json
谭光志赞 34阅读 20.8k评论 9
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...
边城赞 32阅读 7.3k评论 5
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...
chokcoco赞 24阅读 2.3k评论 3
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...
XboxYan赞 25阅读 1.7k评论 1
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...
边城赞 17阅读 2k
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...
边城赞 18阅读 7.9k评论 3
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。