![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
嘉轩哥
这个作者很懒,什么都没留下…
展开
-
如何实现菜单栏鼠标悬浮动态效果?(CSS菜单栏美化Sprite+transition)
CSS实现菜单栏hover事件动态切换图标状态(Sprite+transition)Sprite特性:CSS雪碧也叫做CSS精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。好处可以减少图片的质量,网页的图片加载速度快减少图片的请求的次数,加快网页的打开Sprite使用示范(通过对图片区域(x,y)定位):方法一(-596px):#box1{ width:20px; height:21px; background:url(./sprite_ico原创 2020-08-24 19:32:59 · 744 阅读 · 0 评论 -
CSS如何改变背景色透明度?
方法一:opacity属性,值区间0-1;透明为0,不透明为1,半透明为0.5,以此类推。(缺点,元素透明度会随着透明度改变)方法二:rgba属性,rgba(0, 0, 0, x),前三位为颜色值,最后一位x表示透明度(0-1,透明为0,不透明为1,半透明为0.5,以此类推)(此方法不会改变元素透明度)案例:(注意观察字体透明度)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-原创 2020-08-17 20:59:43 · 1043 阅读 · 0 评论 -
CSS实现单行或多行文本溢出显示省略号
个人学习笔记,欢迎评论,虚心接受批评和建议。效果图:代码块单行文本溢出省略:#content1{ width: 500px;height: 20px; margin: 0px 50px;border: 1px black solid; white-space:nowrap; overflow: hidden; text-overflow: ellipsis; } <h4>单原创 2020-08-17 17:53:18 · 198 阅读 · 0 评论 -
CSS实现鼠标悬浮时下拉菜单栏功能
个人学习笔记,欢迎评论,虚心接受批评和建议。效果图:下拉效果:实现要点:菜单内容:无序列表,居中菜单定位:relative absolute(子元素li要根据菜单实现相对定位,父元素ul必须要实现任意定位(position))菜单背景:设置白色背景下拉效果:ul设置display:none,鼠标悬浮hover设置ul{display:block},li悬浮设置背景颜色<!DOCTYPE html><html lang="en"><head>原创 2020-08-17 17:24:22 · 5621 阅读 · 0 评论