随笔分类 -  css

css3 transform:scale(x)实现字体的缩放：
摘要：css3 transform:scale(x)字体的缩放： transform:scale(x),针对于整体的缩放，缩放的整体包括宽，高，背景。这自然对于内联元素就无法使用此属性，最好使用无属性的span转换成块元素或者行内块元素进行设置，这样保证外面元素不变的情况下实现自身的缩放。 CSS: HT 阅读全文
posted @ 2018-02-08 14:29 seafwg 阅读(38418) 评论(0) 推荐(1)
css3.0+html绘制六边形
摘要：```html ``` ```css .backW{background: #fff;} .posRe{position: relative;}.posAb{position: absolute;} .ass_desc{wid... 阅读全文
posted @ 2018-02-02 11:16 seafwg 阅读(686) 评论(0) 推荐(0)
css3.0滚动条的优化
摘要：```css .ass_showFriends{width: 93%;height: 8.35rem;overflow-y: auto;} .ass_showFriends::-webkit-scrollbar{width: 1px;height: 1px;background-color: #d9d9d9;} /*定义滚动条轨道 内阴影+圆角*/ .ass_showFriends::-w... 阅读全文
posted @ 2018-02-02 10:03 seafwg 阅读(177) 评论(0) 推荐(0)
css3+jq--小箭头旋转180度案例
摘要：html: css(1): css3的动画帧实现旋转 css(2): css3过渡属性加旋转属性 jQ: 用jq只是判断一下是否包含所发生动画的类 阅读全文
posted @ 2017-12-21 10:17 seafwg 阅读(4102) 评论(0) 推荐(0)
css3--根据数据加载显示的一个动画
摘要：css: html: jQuery: 基本原理：最外侧的div是背景是进度条的颜色，其中间有三个div盒子，分别是左侧，右侧，显示百分比的区域。左侧和右侧分别使用clip属性对其进行裁剪。通过js进行旋转。当值小于50的时候右侧的旋转：值*3.6+deg；当值大于50的时候左侧旋转的度数为：值-50 阅读全文
posted @ 2017-11-27 14:36 seafwg 阅读(1017) 评论(0) 推荐(0)
css3--简单的加载动画
摘要：.load-container { width: 30%; height: auto; position: relative; margin: 1rem auto; } .load { width: 2.6rem; height: 2.6rem; margin: 0 auto; border: 0. 阅读全文
posted @ 2017-11-21 17:43 seafwg 阅读(563) 评论(4) 推荐(1)
background--详解(背景图片根据屏幕的自适应)
摘要：background：有以下几种属性： eg: 一块区域的背景是红色，图片是***，不平铺，背景图像不随着页面的其余部分滚动，图片的位置在中间。 图片随着屏幕的大小自适应，图片不会失帧，会格局宽度自己缩放高度，达到图片的清晰。 阅读全文
posted @ 2017-11-17 16:09 seafwg 阅读(63210) 评论(0) 推荐(1)
css--两行显示省略号兼容火狐浏览器
摘要：css--两行显示省略号兼容火狐浏览器 正常写法： 总结下来就是：固定的宽度，强制不换行，超出隐藏，显示省略号。四个属性 但是在火狐下不兼容： 兼容做法： 阅读全文
posted @ 2017-11-15 18:37 seafwg 阅读(6963) 评论(1) 推荐(0)
flex布局：
摘要：他的布局主要有两个“二”，一个二：容器项，子项目项。另一个：有两条轴，主轴，副轴。它的使用时，必须先声明说明是flex布局：display：flex; 针对于容器项的属性6个： 它申明了利用弹性盒布局的主轴方向，行和列，或者逆秩。申明了它接下来的布局都是在他的方向上布局。 它申明了容器下的子元素是否 阅读全文
posted @ 2017-08-04 15:33 seafwg 阅读(295) 评论(0) 推荐(0)