前段时间用的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:
上一次逛自行车职业车队官网时,发现两个车队的页面部份效果很酷炫,上次扒了以色列创业国度车队的PC端MENU效果,酷炫的想用又觉得太刺激了,这次扒的是UAE车队的移动端Menu效果,挺有意思的,搞了挺长时间终于给弄下来了,不过也发现点小BUG,可能人家用界面的一些其它的方式解决了这BUG呢,肯定有方法解决,我还是原汁原味的给弄下来,剩下的,愿意弄的我提供一下思路。1、默认用深色的Header或者默认也用白色是没问题的。2、弹出的菜单一定是背景色为白色,因为原版也是有个白圈。3、用一个全屏的loading效果,先让这个动画自己走完,loading结束后,就平静了。4、用JS控制默认不执行动画,点击后再加载呢。这个问题可以通过更改body的background深浅色来看具体怎么回事。UAE车队官网我拆出来的Demo
数据大屏这个东西近几年貌似挺火的,自从去年年初重回正行后,做过几个了,每一次做都有更新的想法,数据大屏这东西是对设计要求挺高的,科技感强,越花里胡哨越看着正经,flex布局真是好啊,弹的丝滑。最近找了一个模板,简单改改就过稿了,头部很刺激,原本一张图片就搞定的东西,我又贱贱的用CSS写出来了,自从看了张鑫旭大神的linear-gradient等渐变的教程,从此一发不可收拾,只要能用这个画什么图形,绝对不切图🤣项目都是保密的,就只拆出来头部的一个小效果记录分享一下。这代码写的有点肿就不上代码了,实接狠狠的点击下面的Demo预览一个纯CSS渐变画出来的数据大屏头部效果(部份拆解)
因为喜欢骑行,就闲着没事看看国外车队的官网,因为喜欢写CSS,能看到歪果仁网站总会学习一下,这一看一学不要紧,发现了好多新鲜的东西,看完他们写的CSS,就觉得自己还差太多,有些东西基础手册都没有,还需要百度去搜索相关的单词,看完理论一头雾水😒,看看这效果,太炫酷了,就尝试着偷出来了,越看越懵啊,已经超出我知道的理论了😢这种效果,在国内可能不太适用吧,十年能有一个甲方愿意用就不错了,要不给我自己的改了?😁之前看老外专业的CSS站,发现:hover的两次或多次动画就觉得很神奇了,再看张鑫旭大神对于linear-gradient画图形,再举一反三自己用的很爽,觉得已经够用了!哎,差得远呐!😒理论我整不明白,但扒出来拿来用就行了吧,其实我觉得慢慢分析这个动画效果,用linear-gradient、animate、background-clip,mask等等,CSS最基础的方式也能写出来吧.menu{ display:flex; align-items:center; justify-content:center; } a{text-decoration:none;} a.nav-link {
博客从Wordpress改成Typecho的第一篇文章,就决定写这个最新创作,突发灵感想像出来的移动端Menu效果。说来惭愧,没改成Typecho之前就一篇文章,也是一个Menu,因为懒,所以只有一篇,还是几年前写的,效果倒是还不错,就是照比现在实在是有点拿不出手了,具体效果可以看www.024ylmy.com的移动端风格,那也肯定比最早的www.aen-valve.com好多了,每一次做,都会思考这个怎么更炫酷,怎么更合理,直到前不久给朋友做站的时候,突然灵感蹦出来,就耐着性子做出来了,www.ioit.cn上可以看到最初想法的效果。更换Typecho后,一眼相中了现在用的这个主题,我实在是懒得折腾从默认的Typecho改风格,遇到一个觉得不错的,主要是作者人不错,免费提供。再次感谢作者,页面底部有作者博客链接,从他那儿能看到原主题原汁原味的效果。昨晚看国外网站时,特意留意了Menu效果,大多数还是从三道杠改成红叉,然后弹出菜单,也有特别有创意的,过阵子我会把那个效果扒下来,最初给朋友做站的时候,也是传统想法,我大多数灵感都来源于离开电脑前,吃饭时,蹲WC时,我就想这三道杠分离着离开