flex 弹性布局
摘要:Flex 是Flexible Box的缩写,意为‘弹性布局’,任何一个容器都可以指定为Flex布局。 .box{display:flex;} 行内元素也可以使用Flex布局: .box{display:inline-flex;} webkit 内核的浏览器,必须加上-webkit前缀 .box{di
阅读全文
posted @
2020-05-11 17:02
半夏微澜ぺ
阅读(203)
推荐(0) 编辑
css3中新增的背景属性和文本效果
摘要:css3中新增的背景属性: background-image background-size background-origin background-clip background-image css3中可以通过background-image属性添加背景图片。不同的背景图像和图像使用逗号隔开,所
阅读全文
posted @
2020-04-14 17:06
半夏微澜ぺ
阅读(366)
推荐(0) 编辑
transform rotate旋转 锯齿的解决办法
摘要:给元素添加旋转效果,: -moz-transform:rotate(5deg); -webkit-transform:rotate(5deg); -o-transform:rotate(5deg); -ms-transform:rotate(5deg); transform:rotate(5deg)
阅读全文
posted @
2020-04-14 15:00
半夏微澜ぺ
阅读(551)
推荐(0) 编辑
border-image
摘要:border-image 用图片创建一个边框 border-image属性是速写属性用于设置:border-image-source,border-image-slice,border-image-width,border-image-outset,border-iamge-repeat的值,省略的
阅读全文
posted @
2020-04-14 14:13
半夏微澜ぺ
阅读(367)
推荐(0) 编辑
元素高度变化使用动画transition
摘要:高度变化,使用transition,没有效果,可以使用max-height替换。 思路: 初始元素max-height:0; 不显示,父元素hover时,重新设置元素的max-height的值, 可以通过el.scrollHeight获取元素的真实高度。 demo: css: js
阅读全文
posted @
2019-11-21 09:31
半夏微澜ぺ
阅读(5456)
推荐(0) 编辑
aligin-items与aligin-content的区别
摘要:align-items 属性使用于所有的flex容器,它是用来设置每个flex元素在侧轴上的默认对齐方式 aligin-items 与align-content有相同的功能,不过不同点是它是用来让每一个单行元素在容器居中而不是让整个容器居中 demo:align-items:单行元素: html:
阅读全文
posted @
2019-10-24 13:59
半夏微澜ぺ
阅读(1084)
推荐(0) 编辑
css3 tranform perspective属性
摘要:perspective 属性用于规定观察点距离元素的距离, 1 观察点距离元素越近,元素变形就越大,灭点距离越近。 2 观察点距离元素越远,元素变形越小,灭点距离也就越远。 比如设置perspective属性值为1200px,那么就是观察点距离元素的距离是1200px.需要注意的是,此值是给解析器看
阅读全文
posted @
2019-05-09 11:26
半夏微澜ぺ
阅读(395)
推荐(0) 编辑
css3 利用perspective实现翻页效果和正方体 以及翻转效果
摘要:要点: 1 实现3D效果就需要使用perspective属性 1 页面旋转使用css3的rorate 2 使用backface-visibility 实现正面元素翻转之后背面不可见,显示出反面的元素 demo1 翻页效果: html <div class="demo1"> <div class="d
阅读全文
posted @
2019-05-08 20:05
半夏微澜ぺ
阅读(2340)
推荐(0) 编辑
border-radius实现圆弧阴影效果
摘要:1 原理 利用border-radius实现一个圆弧边的矩形,并添加box-shadow,然后放在目标元素的下方 demo: html css 元素的before after伪元素重贴在一起,加深阴影效果,border-radius:100px/10px;表示水平半径是100px,垂直半径是10px
阅读全文
posted @
2019-04-01 16:28
半夏微澜ぺ
阅读(1630)
推荐(0) 编辑
js css3实现钟表效果
摘要:原理: 利用transform-origin改变旋转的圆心,实现秒数和分钟数的刻度线,利用transfrom translate实现钟表小时刻度的显示 html: 1 绘制圆盘 2 绘制秒数 css js: 绘制的是60个刻度,每个刻度的角度是360/60*i 4 绘制分钟刻度,12个刻度线,原理同
阅读全文
posted @
2019-03-29 16:53
半夏微澜ぺ
阅读(370)
推荐(0) 编辑
菜单展开效果
摘要:html 原理: 子菜单定位到父元素圆的中心点,利用transform的translate来实现位移,子菜单的位置利用三角函数获取,父元素加上透明度opacity和缩放scale效果 css js
阅读全文
posted @
2019-03-29 15:22
半夏微澜ぺ
阅读(305)
推荐(0) 编辑
css3 实现运动动画 圆与椭圆
摘要:圆: html css 椭圆运动: 原理就是在圆运动的基础上给父元素添加一个y轴上的上下运动 css 钟摆运动: 这个比较简单,就是把元素的运动参考点移动到顶部中心,就是设置 transform-origin:top center; demo: html css
阅读全文
posted @
2019-03-29 15:19
半夏微澜ぺ
阅读(2312)
推荐(0) 编辑
css3 实现瀑布流
摘要:掌握点: 1、column-count 把div中的文本分为多少列 2、column-width 规定列宽 3、column-gap 规定列间隙 4、break-inside: avoid; 避免元素内部断行并产生新列 注意: Internet Explorer 9及更早 IE 版本浏览器不支持 c
阅读全文
posted @
2019-01-22 17:13
半夏微澜ぺ
阅读(1181)
推荐(0) 编辑
css3 vw -----解决页面滚动出现跳动的bug
摘要:100vw相对于浏览器的window.innerWidth,是浏览器的内部宽度,注意,滚动条宽度也计算在内!而100%是可用宽度,是不含滚动条的宽度。 demo: 如果视口的宽度是200mm,那么上述代码中h1元素的字号将为16mm,即200/100*8mm CSS3计算calc和vw单位巧妙实现滚
阅读全文
posted @
2017-02-07 11:05
半夏微澜ぺ
阅读(1587)
推荐(0) 编辑
css计数器
摘要:css 计数器是css3,只在现代浏览器中有效果counter-reset:设置某个选择器出现次数的计数器的值。默认为 0。 就是定义一个计数器,可以定义初始值,默认是0 counter-increment:设置某个选取器每次出现的计数器增量。默认增量是 1。 demo css 实现计数和 css
阅读全文
posted @
2017-02-07 10:19
半夏微澜ぺ
阅读(167)
推荐(0) 编辑
css3 混合模式mix-blend-mode background-blend-mode 以及混合模式的隔断 isolation
摘要:css 混合模式 mix-blend-mode: 让 元素内容 和 这个元素 以及 下面的元素 发生混合 background-blend-mode 背景的混合模式 可以是背景图片的混合也可以是背景图片与背景颜色之间的混合 isolation是一个CSS3属性,顾名思意是“隔离”,支持的值除了万年不
阅读全文
posted @
2017-01-13 11:26
半夏微澜ぺ
阅读(391)
推荐(0) 编辑
border-radius
摘要:1 border-radius 私有前缀 浏览器个把年前就把私有前缀给去掉了,现在完全没必要还傻傻使用-webkit-border-radius, -moz-border-radius 2 border-radius百分比值 是相对于元素占据尺寸的百分比(类似jQuery outerWidth()/
阅读全文
posted @
2017-01-10 16:29
半夏微澜ぺ
阅读(279)
推荐(0) 编辑
使用css borer实现图层蒙版效果
摘要:需要js 思路:假设目标元素是target。在外层定义元素宽高等于target,通过border设置元素铺满整个文档,设置border的透明图,实现蒙版,在元素的内部设置子元素,宽高100%;设置圆角边框50%; 设置box-shadow inset显示 代码: css js代码: 来自:http:
阅读全文
posted @
2016-12-20 09:52
半夏微澜ぺ
阅读(3653)
推荐(0) 编辑
html/html5中的download属性
摘要:兼容性不是很好, 只是了解一下: 主要表现在跨域策略的处理上,Chrome浏览器和FireFox浏览器: 如果需要下载的资源是跨域的,包括跨子域,在Chrome浏览器下,使用download属性是可以下载的,但是,并不能重置下载的文件的命名;而FireFox浏览器下,则download属性是无效的,
阅读全文
posted @
2016-12-13 11:53
半夏微澜ぺ
阅读(2155)
推荐(0) 编辑
css3 all属性
摘要:ie不支持,谷歌火狐支持,safari9+支持,移动端高版本支持 all属性实际上是所有CSS属性的缩写,表示,所有的CSS属性都怎样怎样,但是,不包括unicode-bidi和direction这两个CSS属性。 我们可能知道,有些CSS属性值基本上所有CSS属性都有,比方说继承inherit!
阅读全文
posted @
2016-12-13 11:13
半夏微澜ぺ
阅读(331)
推荐(0) 编辑