前段时间用的MIUI主题有一个桌面小组件,是一个LED滚动屏的效果,我就开始琢磨怎么用CSS写出来,经过一段时间的思考,就开始上手做了,虽然不太实用,可能终有会用到的地方吧,比如现在流行的大数据大屏,加一个这种高仿的LED滚动屏,效果肯定要比真的LED滚动屏效果好。基本的构思就是通过repeating-linear-gradient横向竖向重复的小点点,然后再将文字用相同的方法background-clip,真的是想的时候挺复杂,做出来一点不简单,要是再让我写,还真不好说就能写出来,过往很多的点子,奇思妙想,都是当时能写出来,再写就写不出来了,所以,赶紧记录下来,以后需要的时候,拿来就用,太烧脑子了😂CSS部份@font-face { font-family: aliphb; src: url(aliphb.woff); } :root { --led-font-color: #f20; /* 设置LED滚动文字颜色 */ --px-size: 2px; /* 设置LED屏点的大小 */ --text-count: 10; /* 设置LED滚动文字数量 */ --led-height:

前天分享了一个数据大屏的纯CSS写的形状加了一个小动画,今天白天上班又做了一块动画,这一次算是完全掌握了CSS动画一些技巧以及mask到底谁遮谁的问题,过几天还是会忘的,从FLASH那会开始就对于遮罩像小孩子学数学掰手指头数数一样的难,谁在上谁在下,真的是完全一片混乱,这次的动画从开始到做完,是从完全懵到逐渐清醒,从不熟练到慢慢熟悉结束。可算是又进了一小步,动画还是略显生硬,这个要调到丝滑合理,可能还需要慢慢的尝试,有可能是数学太差,有时候可能也真得是按像素去一点一点的调,正值,负值什么的,哈哈哈,数学差没办法啊😢。直接上案例,这次的动画有用到box-shadow的复制,还有background-position点击查看该效果的Demo

原创文章(未完待续) CSS 2023-06-01

博客从Wordpress改成Typecho的第一篇文章,就决定写这个最新创作,突发灵感想像出来的移动端Menu效果。说来惭愧,没改成Typecho之前就一篇文章,也是一个Menu,因为懒,所以只有一篇,还是几年前写的,效果倒是还不错,就是照比现在实在是有点拿不出手了,具体效果可以看www.024ylmy.com的移动端风格,那也肯定比最早的www.aen-valve.com好多了,每一次做,都会思考这个怎么更炫酷,怎么更合理,直到前不久给朋友做站的时候,突然灵感蹦出来,就耐着性子做出来了,www.ioit.cn上可以看到最初想法的效果。更换Typecho后,一眼相中了现在用的这个主题,我实在是懒得折腾从默认的Typecho改风格,遇到一个觉得不错的,主要是作者人不错,免费提供。再次感谢作者,页面底部有作者博客链接,从他那儿能看到原主题原汁原味的效果。昨晚看国外网站时,特意留意了Menu效果,大多数还是从三道杠改成红叉,然后弹出菜单,也有特别有创意的,过阵子我会把那个效果扒下来,最初给朋友做站的时候,也是传统想法,我大多数灵感都来源于离开电脑前,吃饭时,蹲WC时,我就想这三道杠分离着离开

原创文章 CSS 2023-05-27
2438