:doodle { @grid: 12 / 100vw 100vh; perspective: 90vmin; perspective-origin: 0% -140%; } :container { transform-style: preserve-3d; animation: camera 5s ease-in-out infinite; animation-direction: alternate-reverse; } --ds: @r(1.5s, 6s, .1); --size: @r(1, 9); /* Thanks to mootari for the tip */ --z: calc(@i() * .0001px + var(--size) * .1px); animation: move var(--ds) linear infinite, opacity var(--ds) linear infinite; animation-delay: calc((@row() - @size-row()) * var(--ds) / @size-row() - @r(@size()) * .1s); :after { content: ''; @size: calc(var(--size) * 10%); background: @p(#00b8a9, #f8f3d4, #f6416c, #ffde7d); } position: absolute; left: calc(@col() * 100% / @size-row()); @size: calc(100% / @size-row()); @keyframes move { 0% { transform: translate3d(0, 0, calc(var(--z) - 15vmin)) rotateX(180deg) scaleY(.01); } 10% { transform: translate3d(0, calc(10% * @size-row()), var(--z)) rotateX(0) scaleY(.8); } 90% { transform: translate3d(0, calc(90% * @size-row()), var(--z)) scale(1); } 100% { transform: translate3d(0, calc(100% * @size-row()), calc(var(--z) + 5vmin)) scale(.5); } } @keyframes opacity { 0%, 100% { opacity: 0; } 10%, 90% { opacity: .9; } } @keyframes camera { from { transform: rotateX(-45deg) rotate(140deg) translateY(-10%); } to { transform: rotateX(-45deg) rotate(220deg) translateY(-10%); } }
在天冷的时候总会穿上秋裤
CouriourC Blog
  • 首页
  • 归档
  • 首页
  • 归档
  • 前端的B 端设计思维

    以“习惯”为本的设计 B 端产品相对于C 端产品更加注重用户交互,一般 B 端用户对于界面的要求并不高,习惯就好。那么 B 端中的以人为本又是什么意思呢? 其实对于 B 端使用很多细节其实是在抠"习惯",可以说一款适合用户习惯...
     2024-12-31  
    • 公司经历以及问题记录 
    • > 项目中问题记录 
    • > 过度思考 
    阅读全文 
  • IE11 下的各类兼容问题以及 Hack 方案

    CSS postcss-pxtorem 转换是默认浏览器font-size为 10 或者 12,于是在IE中比例过小,导致 1px 无法正常显示。 组件 实现自适应的八边形渐变背景,(无 clip-path)。 动态获取插槽元素的宽高,然后...
     2024-12-31  
    • 项目中问题记录 
    • > 开发Bug 
    阅读全文 
  • ElmentUI-Uploader-Bug

    问题描述 当拖拽文件夹上传时,实际上将文件夹当作文件上传的。换言之,并没有拿到实际的文件列表,包括在多选的时候,选上了文件夹。如果抛弃使用 element-ui 的 uploader,使用 input ,在拖拽的时候,若是没有权限允许,以久没办法拿...
     2024-12-31  
    • 公司经历以及问题记录 
    • > 项目中问题记录 
    • > 开发Bug 
    阅读全文 
  • EXCEL 预览方案及其实现

    面临的问题 实现在线表格数据预览,目前比较通用的表格格式为 xlsx 、xls 、csv 等,在本次项目中,需要预览以及编辑单元格数据。 解决方案汇总 Luckysheet 相关链接 Luckysheet文档 luckysheet(1): 在...
     2024-12-31  
    • 公司经历以及问题记录 
    • > 项目中问题记录 
    • > 开发Bug 
     
    • 实现方案 
    • | 前端开发 
    阅读全文 
  • 音视频保存方案

    前言 相关 API: MediaRecorder、Blob 原理:追踪视频流的 track,逐段保留 blob,然后组合为 File 对象,提交到后端。 代码 1234567891011121314151617181920212223242526...
     2024-12-31  
    • 项目中问题记录 
    • > 一些有的没的技术 
    阅读全文 
  • UE 与前端交互接口封装

    预置 基本介绍 利用像素流送可以在用户不可见的电脑上远程运行虚幻引擎应用程序。举例而言,这台电脑可以是机构中的一台实体电脑,也可以是云端服务提供的虚拟机。虚幻引擎将使用该电脑可用的资源(CPU、GPU、内存等)来运行游戏逻辑并渲染每一帧。它会不断...
     2024-12-31  
    • 项目中问题记录 
    • > 一些有的没的技术 
    阅读全文 
  • Monorepo介绍

    Monorepo 介绍 技术缘由 是什么? 所谓 Monorepo 就是将多个项目放置在一个项目中,并借助管理工具对项目之间的 版本进度,部署状况,依赖信息。可以达到规范团队风格,沉淀可复用的组件库,建立工具库的能力。现如今有许多公司,团队开始...
     2024-12-31  
    • 公司经历以及问题记录 
    • > 项目中问题记录 
    阅读全文 
  • 雅句

    《滚蛋吧,肿瘤君》 抓紧有限的生命,燥起来!哪怕是冲动,也就后悔一阵子。但要是活的太怂了,就会后悔一辈子。 不要害怕死亡,死亡只是结果。人不能因为害怕失去,就不去拥有。 听一场摇滚,和耳朵一起一醉方休;喝一圈烈酒,让酒腻子们闻风丧胆;开一场 co...
     2024-12-31  
    • 闲情雅致 
    阅读全文 
  • 旅游

    成都市 武侯区:武侯祠,锦里,玉林,环球中心 青羊区:杜甫草堂,宽窄巷子,金沙遗址,文殊院,人民公园 金牛区:欢乐谷,植物园,凤凰山 成华区:建设路小吃街,熊猫基地,东郊记忆,动物园,龙潭水乡,339 龙泉驿区:龙泉山,东安湖,金龙长城,洛带古镇...
     2024-12-31  
    • 闲情雅致 
     
    • 生活 
    • | 旅游 
    • | 计划 
    阅读全文 
  • computer-principle-overview

    原码:将最高位作为符号位(0表示正,1表示负),其它数字位代表数值本身的绝对值的数字表示方式。 反码:如果是正数,则表示方法和原码一样;如果是负数,符号位不变,其余各位取反,则得到这个数字的反码表示形式。 补码:如果是正数,则表示方法和原码一样;如果...
     2024-12-31  
    • 计算机基础知识 
    • > 计算机组成原理 
     
    • 计算机基础 
    • | 计算机组成原理 
    阅读全文 
下一页
© 2022 - 2025  CouriourC
访问人数   总访问量 
由 Hexo 驱动 | 主题   Keep 3.4.5