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

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

上一次逛自行车职业车队官网时,发现两个车队的页面部份效果很酷炫,上次扒了以色列创业国度车队的PC端MENU效果,酷炫的想用又觉得太刺激了,这次扒的是UAE车队的移动端Menu效果,挺有意思的,搞了挺长时间终于给弄下来了,不过也发现点小BUG,可能人家用界面的一些其它的方式解决了这BUG呢,肯定有方法解决,我还是原汁原味的给弄下来,剩下的,愿意弄的我提供一下思路。1、默认用深色的Header或者默认也用白色是没问题的。2、弹出的菜单一定是背景色为白色,因为原版也是有个白圈。3、用一个全屏的loading效果,先让这个动画自己走完,loading结束后,就平静了。4、用JS控制默认不执行动画,点击后再加载呢。这个问题可以通过更改body的background深浅色来看具体怎么回事。UAE车队官网我拆出来的Demo

国外网站抄袭 CSS 2023-05-31

因为喜欢骑行,就闲着没事看看国外车队的官网,因为喜欢写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 {

国外网站抄袭 CSS 2023-05-29
2354