随笔分类 - css3
摘要:$sff:'#FFF'; $aa:213; .swxs#{$sff}{ color:$sff; &-csd{ color:#000; width:#{$aa}px; } } scss变量写法
阅读全文
摘要:css mask 渐变动画另类写法 就是改变宽度做动画 里面渐变写死 html, body { margin: 0; padding: 0; } .rect { height: 10px; width: 100vw; background-image: linear-gradient(to righ
阅读全文
摘要:关于css3动画会不会引起重排问题 用了translate 就不会重排 因为他是用了gpu渲染了 用了合并线程 跟js线程不是互斥的 各管各互不干扰但是用了position就有问题了 会重排 可以发现他没用gpu渲染 堵塞的js线程具体可以测试下 alert()堵塞测试 看看有没有css3动画有没有
阅读全文
摘要:background-image:linear-gradient(black 90%, transparent 100%);
阅读全文
摘要:css滚动条占空间的解决方法 overflow-y: overlay; 滚动条应该是悬浮在上面了
阅读全文
摘要:css3 line-height:0的作用 方案1 给img 设置为display:block img{display:block} 第二种办法就是给外层的div添加line-height 设置为0 (none)也一样 div{line-height:0;}
阅读全文
摘要:css3 pointer-events:auto;详解 <style type="text/css"> #div_grandfather{ height : 250px; background: orange; width:300px; border:1px solid; pointer-event
阅读全文
摘要:css3 font-spider压缩自定义字体的方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>微信授权</title> <style type="text/css"> .ew { font-family: myFirst
阅读全文
摘要:css3png图片渐变动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>{$title}</title> <meta name="viewport" content="width=device-wid
阅读全文
摘要:css3图片大小自适应的方法(不采取拉伸) width: 100%; height: 100%; overflow: hidden; background-size: cover; background-position: center; 我这里说下 background-size: cover;
阅读全文
摘要:css3优先级计算公式 ps:还有个我要说明下 .body .dd 和.container .cc 不要全部class比较优先级(dd和 body .dd可以比较) 因为手机端不兼容这种优先级比较
阅读全文
摘要:css3不同文字大小底部对齐的完美解决方案 jifenshuzi { display: inline-block; height: 100%; font-size: 0.9rem; float: left; } jifenwenzi { display: inline-block; height:
阅读全文
摘要:css3 简单的玻璃扫光效果 .ss { display: block; width: 800px; height: 370px; position: absolute; background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(255, 25
阅读全文
摘要:css3 white-space: nowrap 实现横向滚动 <div style="width: 600px; height: 100px;white-space: nowrap; overflow: auto;font-size: 0;"> <div style="width: 200px;
阅读全文
摘要:<style type="text/css"> .flexcontainer{ width:100%; height: 100%; position: absolute; left:0px; top:0px; display: flex; flex-direction: column; } .fle
阅读全文
摘要:css3 用混合模式要注意的问题 .p2_2 { width: 78.133%; height: 2.795rem; background: url('/uploadpic/xiangmu/zhongyibaoming/images/2/p2_2.png') no-repeat, url(/dahu
阅读全文
摘要:css3 rem手机自适应框架 rem是按照html的字体大小来 所以 不同宽度浏览器 htmlfont-size不一样 就可以做到自适应了 此方法比百分比方便<pre><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <tit
阅读全文
摘要:CSS3 滤镜Filter亮度动画 -webkit-filter:brightness 值越高 亮度越亮<pre><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .im
阅读全文
摘要:CSS3 clip裁剪动画 下面是比较简单的例子 <pre><html><head><style type="text/css">img {position:absolute;clip:rect(0px 120px 151px 0px);animation: clipMe 5s linear inf
阅读全文
摘要:比较简单的倒影效果 <pre><div class="box-reflect"><img src="https://www.baidu.com/img/bd_logo1.png" alt="" height="200"/></div> .box-reflect { margin: 210px aut
阅读全文