首页>建站相关>浮动阴影-为什么我的css浮动元素总是差那么点意思
浮动阴影-为什么我的css浮动元素总是差那么点意思
很多站点都这样的效果,鼠标移上去时对应元素上浮,然后这样的元素往往有一排。博主常见的操作是左右平移几次,然后元素就跟琴键一样依次浮动,看起来非常解压。虽然这个效果有个小小的bug,将鼠标停留在浮动起点与终点的一小块区域,会导致重复触发,视觉上的感觉是元素不停的抖动,架不住人家效果优秀,所以想用自己来实现一下这个效果。
用如下代码实现了一下这个效果,但实际使用中却感觉效果单调,仔细观察了一下包含效果的其他站点,最后发现是元素上浮后元素阴影也会有变化。
.catelist{
width:120px;
border-radius: 6px;
overflow: hidden;
box-shadow: 2px 2px 4px rgb(0 0 0 / 20%);
transform: translateY(0px);
transition: all 0.2s ease-out;
}
.catelist:hover{
transform: translateY(-8px);
}
重新修改了一下css代码,在元素上浮时,同时增加元素的阴影,很小的一个细节,但效果感觉就出来了。
.catelist{
width:120px;
border-radius: 6px;
overflow: hidden;
box-shadow: 2px 2px 4px rgb(0 0 0 / 20%);
transform: translateY(0px);
transition: all 0.2s ease-out;
}
.catelist:hover{
transform: translateY(-8px);
box-shadow: 2px 10px 16px rgb(0 0 0 / 20%);
}
标签: css
移动端可扫我直达哦~
推荐阅读
2024-10-23
之前翻阅wordpress默认主题的时候,看到主题的打印设置占了很大的篇幅,嫌太麻烦所以直接跳过了。这几天想要打印一份博客上的内容,觉得页眉侧栏以及页尾都有点多余,只需要打印博文部分的内容就可以了。于是只能重新去学习关于打印的语法,发...
建站相关
css
2023-10-14
该“:not()”伪类用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中,它也被称为反选伪类(negation pseudo-class)。描述使用 :not() 时,有几种不寻常的效果和结果需要注意:可以使用此伪类编...
建站相关
css
2023-10-08
知乎某回答CSS Reset 是革命党,CSS Reset 里最激进那一派提倡不管你小子有用没用,通通给我脱了那身衣服,凭什么你 body 出生就穿一圈 margin,凭什么你姓 h 的比别人吃得胖,凭什么你 ul 戴一胳膊珠子。于是...
建站相关
css
2023-10-04
用css实现了一个伪类的动画效果,鼠标移到li元素的时候,其伪类后从右至左移动一段距离,实装后效果不是特别好,写完又删除掉了,留个记录,用以备忘。.widget-archive li{
position: relative;
...
建站相关
css
2023-09-04
修改主题的时候发现ios下hover子菜单弹出后收不回去,虽然刷新一下页面或者点击一个其他的按钮也能正确关闭,但是始终感觉操作不便。于是安装了一个第三方浏览器(夸克)尝试了一下,第三方浏览器是没有什么问题的,纯属safari的锅。找了...
建站相关
css
2023-09-02
效果参见本博客左上角logo。 :)#site-banner{
position: relative;
overflow:hidden;
margin: 0;
}
#site-banner:before {
...
建站相关
css
2023-05-25
浏览网络的时候看见某个站点的导航条菜单图标很有意思,导航条logo一般都是3条横杠,该站点的其中一条横杠是略短的,鼠标悬停时会动态伸长。尝试着自己利用css实现了类似的效果,考虑将其放入正在修改的wordpress主题当中,先记录一下...
建站相关
css
2023-05-21
网络上有很多免费的图标库,比如fontawesome,比如typicons,利用一些小图标来代替呆板的文字描述,可以让页面显得更为简洁而生动。这类图标库也有一些美中不足之处,比如在不同分辨率下,可能产生边缘的锯齿,也可能会有部分几个图...
建站相关
css
2023-05-15
看范例站点的css代码,发现这么一条,之前没有接触过这个属性,先就text-transform做个笔记。这个属性会改变元素中的字母大小写,而不论源文档中文本的大小写。如果值为 capitalize,则要对某些字母大写,但是并没有明确定...
建站相关
css
2022-12-01
遇到举国同悲的日子,大部分站点会将原本五颜六色的画面呈现为黑白,用黑白的色调,表达对伟人的追思,为逝去的英雄送行。用css就可以很方便的实现全站变灰的效果。外部样式目前绝大多数站点都采用了引用外部css文件的方式,对于这类站点,只需要...
建站相关
css
2022-11-25
尝试自定义了一个wordpress的后台设置页面,仅仅是添加了表单,暂时没有写css效果,分页器的页面展现是这样的,想用ul+css实现图片下方这样的效果。为ul添加一个flex属性,可以很方便的让其中包含的li元素排列为一行,为li...
建站相关
css
2022-11-05
开通了一个淘宝店铺,觉得页面有点单调,想要添加一些圆角啊悬停变化之类的css效果。淘宝的店招以及导航条可以有限的使用css,而其他模块css功能是需要另行付费的,一年的使用价格是2400元。对于一个营收尚未过千的小店来说,这个价格有点...
建站相关
css