首页
统计
赞助
留言
关于
更多
友链
壁纸
直播
Search
1
Joe — 一款个人类型Typecho主题
32,200 阅读
2
Joe开源目录程序系统
11,868 阅读
3
Typecho自定义后台编辑器功能
8,275 阅读
4
Joe主题实现自动更新
7,528 阅读
5
Joe主题自定义搭配色教程
4,435 阅读
WEB前端
CSS
React
Vue 2.0
Vue 3.0
JavaScript
TypeScript
Typecho
小程序
苹果CMS
其他
生活
登录
Search
https://78.al
累计撰写
76
篇文章
累计收到
3,727
条评论
首页
栏目
WEB前端
CSS
React
Vue 2.0
Vue 3.0
JavaScript
TypeScript
Typecho
小程序
苹果CMS
其他
生活
页面
统计
赞助
留言
关于
友链
壁纸
直播
搜索到
5
篇与
CSS
的结果
2021-05-12
一行代码为你的博客添加灰色默哀色
html { filter: grayscale(1); } 今天是2021-05-12 星期三,汶川地震13周年,为了纪念在灾难中不幸去世的人,网站也可以变成哀悼色通过一行代码实现全站变灰教程在任意css文件、style标签内加上以下属性,即可实现html { filter: grayscale(1); }Joe主题添加教程外观设置 - 全局设置 - 自定义css,填写以下内容{callout color="#f0ad4e"}html { filter: grayscale(1); }{/callout}
2021年05月12日
878 阅读
9 评论
10 点赞
2021-03-08
CSS面试题,实现固定的布局
简单记录个css面试题,要求实现以下需求:有间隔,间隔相等,为15px无论删除增加 div.item 都不会影响排版实现方式随意开始认为这个问题应该挺简单,写了下发下有点摸不到头脑,最后想了下可以通过以下方式去实现:第一种:<style> * { box-sizing: border-box; } .box { display: grid; gap: 15px; grid-template-columns: repeat(2, 1fr); width: 30%; margin: 0 auto; border: 1px solid #ff6800; padding: 15px; } .item { height: 150px; background: coral; } .item:nth-child(3n) { grid-column: 1 / 3; } </style> <div class="box"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>第二种:<style> * { box-sizing: border-box; } .box { width: 30%; margin: 0 auto; display: flex; flex-wrap: wrap; border: 1px solid #ff6800; padding: 7.5px; } .item { background-color: #ff6800; height: 150px; width: 50%; border: 7.5px solid #ffff } .item:nth-child(3n) { width: 100%; } </style> <div class="box"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>如果你有其他种实现方案,欢迎在下方留言
2021年03月08日
678 阅读
3 评论
13 点赞
2021-02-20
为你的网站添加点击散开特效
将以下代码复制到你网站最底部即可实现<canvas id="fireworks" style="position: fixed; left: 0px; top: 0px; pointer-events: none; z-index: 2147483647; width: 1920px; height: 151px;" width="3840" height="302"></canvas> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js"></script> <script type="text/javascript"> function updateCoords(e) { pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left, pointerY = e.clientY || e.touches[0].clientY - canvasEl.getBoundingClientRect().top } function setParticuleDirection(e) { var t = anime.random(0, 360) * Math.PI / 180, a = anime.random(50, 180), n = [-1, 1][anime.random(0, 1)] * a; return { x: e.x + n * Math.cos(t), y: e.y + n * Math.sin(t) } } function createParticule(e, t) { var a = {}; return a.x = e, a.y = t, a.color = colors[anime.random(0, colors.length - 1)], a.radius = anime.random(16, 32), a.endPos = setParticuleDirection(a), a.draw = function() { ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.fillStyle = a.color, ctx.fill() }, a } function createCircle(e, t) { var a = {}; return a.x = e, a.y = t, a.color = "#F00", a.radius = .1, a.alpha = .5, a.lineWidth = 6, a.draw = function() { ctx.globalAlpha = a.alpha, ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.lineWidth = a.lineWidth, ctx.strokeStyle = a.color, ctx.stroke(), ctx.globalAlpha = 1 }, a } function renderParticule(e) { for (var t = 0; t < e.animatables.length; t++) e.animatables[t].target.draw() } function animateParticules(e, t) { for (var a = createCircle(e, t), n = [], i = 0; i < numberOfParticules; i++) n.push(createParticule(e, t)); anime.timeline().add({ targets: n, x: function(e) { return e.endPos.x }, y: function(e) { return e.endPos.y }, radius: .1, duration: anime.random(1200, 1800), easing: "easeOutExpo", update: renderParticule }).add({ targets: a, radius: anime.random(80, 160), lineWidth: 0, alpha: { value: 0, easing: "linear", duration: anime.random(600, 800) }, duration: anime.random(1200, 1800), easing: "easeOutExpo", update: renderParticule, offset: 0 }) } function debounce(fn, delay) { var timer return function() { var context = this var args = arguments clearTimeout(timer) timer = setTimeout(function() { fn.apply(context, args) }, delay) } } var canvasEl = document.querySelector("#fireworks"); if (canvasEl) { var ctx = canvasEl.getContext("2d"), numberOfParticules = 30, pointerX = 0, pointerY = 0, tap = "mousedown", colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"], setCanvasSize = debounce(function() { canvasEl.width = 2 * window.innerWidth, canvasEl.height = 2 * window.innerHeight, canvasEl.style.width = window.innerWidth + "px", canvasEl.style.height = window.innerHeight + "px", canvasEl.getContext("2d").scale(2, 2) }, 500), render = anime({ duration: 1 / 0, update: function() { ctx.clearRect(0, 0, canvasEl.width, canvasEl.height) } }); document.addEventListener(tap, function(e) { "sidebar" !== e.target.id && "toggle-sidebar" !== e.target.id && "A" !== e.target.nodeName && "IMG" !== e.target.nodeName && (render.play(), updateCoords(e), animateParticules(pointerX, pointerY)) }, !1), setCanvasSize(), window.addEventListener("resize", setCanvasSize, !1) } </script>
2021年02月20日
1,273 阅读
7 评论
22 点赞
2021-02-20
-webkit-box-orient属性编译时被删除时的解决办法
例如打包编译如下scss代码时,会将-webkit-box-orient属性删除掉display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;解决办法,在该属性的前后加上防编译注释display: -webkit-box; -webkit-line-clamp: 3; /*! autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */ overflow: hidden; text-overflow: ellipsis;
2021年02月20日
416 阅读
0 评论
2 点赞
2021-01-01
Css设置单行文本多行文本溢出隐藏并以省略号显示
单行文本溢出white-space: nowrap; text-overflow: ellipsis; overflow: hidden;两行溢出display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
2021年01月01日
591 阅读
2 评论
3 点赞