![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css3
虞粥粥
记录学习笔记
展开
-
background的css3新属性
background-clip 指定背景绘制区域属性值:border-box绘制边框以内的区域padding-box 绘制内边距以内的区域centent-box 仅绘制内容区域background-origin 背景的起始定位属性值:border-box 从border的左上角开始定位padding-box 从padding的左上角开始定位content-box 从内容区的...原创 2019-12-12 21:43:19 · 157 阅读 · 0 评论 -
text-size-adjust用法
前提:使用前需要加上兼容写法用法:在移动端为防止字体变大,添加-text-size-adjust属性为100%可防止字体变大放在body会导致页面缩放失效可以使body继承html的样式...原创 2019-11-08 20:37:41 · 2092 阅读 · 0 评论 -
CSS3之animation动画
CSS3之animation动画animation-name属性定义动画的名字ps:光有动画名称不能是动画动起来与@keyframes合用语法:animation-name {动画名称};@keyframes 动画名称{from {开始动画}to{结束动画}}animation-duration 过渡持续的时间属性语法:animation-duration:time注:动...原创 2019-11-07 15:21:07 · 384 阅读 · 0 评论 -
CSS3新增属性之transform
transform2d平面转换属性:rotate 旋转单位为deg(正数为顺时针旋转,反之逆时针)单位和数值都紧接着在中括号内,如:transform:rotate(10deg)skew 扭曲变形 有X轴和Y轴两个方向,单位与上面一致 单独X轴为:skewX 反之为skewY,还有skew(x,y)两个方向同时translate 按一定数值进行偏移 ,以元素的的左上角为起始点有tr...原创 2019-11-07 10:59:54 · 204 阅读 · 0 评论 -
keyframes 关键帧
keyframes 会逐渐地实现过渡动画过程中每一关键帧的动画效果语法: @keyframes animationname { //必须带上动画名 keyframes-selector{ //值是一个百分数,0%、25%...(from为0%,to为100%) css-style // 执行的动画内容,可为多值 }}ps:keyframes也需...原创 2019-11-07 18:00:40 · 175 阅读 · 0 评论 -
will-change的使用
前提:为加快页面加载速度,增强页面渲染性能,有以下三种方法:position-fixed代替background-attachment将带图片的元素放在伪元素里面巧用will-changewill-change的用法前提:因CSS3的动画、渐变和变形不会自动触发CPU的加速,而使用浏览器自身进行渲染,不使用will-change 的一个小技巧:translateZ() (or tr...原创 2019-11-08 18:30:59 · 592 阅读 · 0 评论 -
如何让背景图按div自适应大小
background:url(’…/…png’) center center no-repeatbackground-size:cover原创 2019-11-10 15:26:39 · 4159 阅读 · 0 评论 -
CSS3之transition过渡
CSS3之transition过渡-property属性:参数:none、all和property(元素的属性名,如:transform)-duration 过渡(过程中的延迟)时间属性:参数:time时间语法:transition-duration:time(单位为ms毫秒/s秒)-time-function属性参数:linear 匀速运动ease 平滑过渡(默认),逐渐加快...原创 2019-11-07 11:00:26 · 186 阅读 · 0 评论 -
box-sizing:border-box
box-sizing:border-box指由原盒模型转变为:width = padding + border + 原宽度原创 2019-11-08 20:40:06 · 112 阅读 · 0 评论 -
css3新属性:pointer-events:none解决鼠标进入闪烁问题
在实现一个侧边栏的小导航,鼠标经过导航出现对应内容块,可在鼠标停留在导航里面显示层就一直闪烁,应该是在鼠标进入后移动到子级触发的事件冒泡导致的,查了很多解决方法,都看不懂…,直到看到了pointer-events。pointer-events:none解决鼠标经过闪烁问题给目标元素添加上pointer-events:none属性pointer-events:none属性 的作用:添加上该属性...原创 2019-12-06 18:04:51 · 1136 阅读 · 0 评论