随笔分类 -  css3

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

点击右上角即可分享
微信分享提示