![](https://img-blog.csdnimg.cn/85334b99db8b4ff49321481000856995.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML&CSS
文章平均质量分 52
记录前端学习之路
不混世的大魔王
风雨里要做个大人,阳光下要像个孩子
展开
-
CSS实现轮播图指示点原地扩张效果
CSS实现轮播图指示点原地扩张效果最近在做模拟中酒网网站的练习,中酒网首页的主轮播图中有一组横向排列的指示点,在鼠标悬浮或划过时,对应圆点会呈扩张效果。因为之前没有做过类似的效果,所以特别想实现一下。下面是具体效果:遇到的难点:小圆点所在盒子位置水平居中显示边框时不会影响到周围元素(因为在设置弹性盒或者margin后,设置边框的话,周围元素会受到挤压)显示边框时,原先小圆点位置不变,有一种由内而外扩张的效果,同时背景透明对应解决办法:利用绝对定位元素水平居中方法实现小圆点所在盒子位置原创 2021-04-25 19:06:55 · 366 阅读 · 2 评论 -
CSS:利用box-shadow属性实现按钮悬浮效果
利用box-shadow属性实现按钮悬浮效果最近在写毕业设计的前台页面,里面有班级展示卡片和教练展示卡片,我一开始只是简单地设置了鼠标hover时的文字颜色变化效果,但是我发现很多商城的展示卡片都是有一种划过时抬起的3D效果,很快啊,我迅速面向百度编程,发现了一种最简单的实现方式,利用CSS的box-shadow属性来控制。先来看一下大厂的网站效果是不是高级感十足?我们来具体用CSS来实现一下首先来了解一下box-shadowbox-shadow: h-shadow v-shadow blur原创 2021-04-05 13:00:09 · 3123 阅读 · 0 评论 -
针对前端网页测试时,filter:alpha(opacity=20);在IE8及以下版本刷新无效情况
针对前端网页测试时,filter:alpha(opacity=20);在IE8及以下版本刷新无效情况解决办法最近在学习前端方面的知识,了解到了opacity这个属性,可以设置元素的透明度显示,但是这个属性在IE8及以下版本会失效,我们通常都会在这里的后面加几句适配语句,解决不同浏览器和IE8及以下版本浏览器兼容问题。比如:`opacity:0.2;/* IE 8 */filter:alpha(opacity=20);/* Firefox,Safari(WebKit),Opera */-ms-f原创 2021-02-04 11:33:48 · 449 阅读 · 0 评论