![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
亿米酒酒
本人已经离开IT行业,文章不再更新
展开
-
html水平滚动条隐藏,但需要滚动
把下面的复制到css里面就可以了::-webkit-scrollbar { background-color: transparent; display: none; }原创 2021-12-02 13:30:27 · 94 阅读 · 0 评论 -
如何使用CSS3实现3D效果
一、 设置一个立方体非常简单首先需要在最外层的div设置perspective:800px;的查看位置视图,这里建议在1000px左右,不然可能会出现拉伸变型。使用transform-style:preserve-3d;进行3D转换,立方体需要设置6个面,通过相对定位层叠在一起,最好给每一个面都设置边框和背景颜色透明以方便查看。定位立方体6个面的transform方法有trans...原创 2019-01-17 20:59:10 · 3403 阅读 · 1 评论 -
Hover伪类实用特效
一、文本伪类bug解决办法在文字下面设置鼠标移入出现下划线的时候,通常会发现下划线出现了但文字却有向上移动的现象。这是因为文字与底部之间被有厚度的下划线填充所造成的,“文字与底部的距离+下划线的厚度”文字就会向上移动。只需要设置同样厚度的上边框就可以抵消对文字的影响,同时上边框需要和背景颜色相同,这样就可以达到隐藏的效果。.twotop4 span:nth-of-type(1)...原创 2019-01-18 20:56:22 · 1201 阅读 · 3 评论 -
flex的弹性布局技巧
传统的布局横向排列不容易实现,使用弹性布局就可以更加方便地实现布局效果,只要在外层的盒子使用flex布局,就可以实现盒子的一级内容出现弹性布局样式,而对第二级内容无影响,而且屏幕的大小变化不会挤压内容样式。完全不使用定位和边距就可以实现的布局<style>.fove{ width: 300px; height: 300px; background: #6CA374;...原创 2019-01-26 20:38:55 · 179 阅读 · 0 评论 -
用css做一个小风车
直接设置一个大的正方形盒子,然后在里面放四个盒子充当叶片<div class="contenr"> <div class="bix1"></div><!--叶片1--> <div class="bix2"></div><!--叶片2--> &原创 2019-02-01 19:42:19 · 1658 阅读 · 0 评论 -
表格点击切换
把所有需要切换的表格样式设置完成后,再通过定位把所有的表格合并再一起,随后把不显示的表格隐藏。设置一个高亮类,通过js控制给点击的表格添加高亮类,同时把原本的表格去除高亮类,这里省去了HTML的布局直接展示js部分:window.function(){ var libox = document.getElementById("tab_tit").getElementsByTagName...原创 2019-02-05 20:28:48 · 955 阅读 · 2 评论 -
鼠标悬停图片360°旋转
鼠标悬停图片旋转,是可以用css3的hover伪类来实现鼠标移入元素发生变化的这么一个效果,利用这一特性巧妙地给伪类添加css3的旋转动画,这样就摒弃掉烦人且复杂的js简单的就实现<!doctype html><html><head><meta charset="utf-8"><title>鼠标悬停图片360°旋转</..原创 2019-02-10 20:25:34 · 3223 阅读 · 0 评论