![](https://img-blog.csdnimg.cn/20190927151101105.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
css项目踩坑总结
文章平均质量分 63
css项目应用
网络真危险!!
不想退休的程序猿不是好程序员
(暴富退休) 和 (暴富)来哪个都行
展开
-
使用HTML + CSS实现鼠标悬停的一些奇幻效果
使用HTML + CSS实现鼠标悬停的一些奇幻效果 背景:图一是刚开始的样子,鼠标悬停上去实现图二的效果 参考:各种鼠标悬停效果 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport原创 2022-04-07 15:19:26 · 3594 阅读 · 0 评论 -
前端css样式如何设置内边框
背景:我在写鼠标悬停样式 .topbox .menuBox > ul > li:hover { border-bottom: 4px solid #3C7CFC; font-weight: 600; color: #3C7CFC; } 这样写的话出来的效果是: 我想要的是,鼠标悬停,生成一个内边框,应该在上边,我就查了一下border这个属性,他是有两个值,是可以设置边框是向内还是向外的 如果要设置为内边框使用:box-sizing: border-box; 如果要设置为内边框使用:原创 2022-04-06 15:19:52 · 6765 阅读 · 0 评论 -
手写轮播图
在项目中需要实现一个这样的轮播图: 我把这里的功能封装成了一个组件: <template> <div class="boothBox"> <div class="item" v-if="boothList[currentIndex]"> <a :href="boothList[currentIndex].url" target="_blank"> <img :src="getPath(boothList[curr原创 2021-12-15 10:31:43 · 766 阅读 · 0 评论 -
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
https://mp.weixin.qq.com/s/kbDCSDbodGj8DmwnbNhf4Q 长列表网页相信大多数开发者都遇到过,在DOM元素过多的情况下,浏览器渲染会很慢,非常影响用户体验。 因此我们会经常采用虚拟滚动、分页、上拉加载更多等不同的方式来进行优化,这些方式的思想都是一样的,都是只渲染可见区域,等用户需要时再加载更多的内容。而以上的方式无论哪种,都需要写大量的js或者css逻辑去实现。 而现在,我们多了一种方式——content-visibility。只需要一行CSS代码,就可以实现可见转载 2021-09-16 11:01:08 · 309 阅读 · 0 评论 -
鼠标悬停图标反白filter
鼠标悬停图标反白 如果只是单纯的鼠标悬停字体跟背景颜色发生变化的话, 很简单, 用几行代码就可以实现: span:hover{ background: #00a84d; color: #fff; } 但是现在需要将图片颜色也改变, 由于UI小姐姐只给了鼠标没有悬停上去的图片, 所以鼠标悬停上去的图片就需要我们自己把这个变色之后的图整出来了. 查了百度,说是有一个简单的方法,只需要在div上添加 filter: brightness(100); 属性即可, 但是效果出来不太理想, 会有色差, 结果原创 2021-07-15 10:23:54 · 546 阅读 · 0 评论