BooCSS

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

上一次逛自行车职业车队官网时，发现两个车队的页面部份效果很酷炫，上次扒了以色列创业国度车队的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时，我就想这三道杠分离着离开