修改方案

没有更改布局,仅仅通过多重 box-shadow 修改了样式。除了下述一些,其他都是很简单的 css:

  1. 页面标题使用类似抖音 logo的动画
animation: uk-text-shadow-glitch 1s cubic-bezier(1,-2.91,0,3.79) 0s infinite normal both running;
@keyframes uk-text-shadow-glitch{
	25% {text-shadow: -0.05em 0 0.1em #12fdbd, 0.08em 0.05em 0 #fc30eb, 0 0 0.1em #4212ff;}
	50% {text-shadow: -0.06em 0 0.1em #12fdbd, 0.07em 0.05em 0 #fc30eb, 0 0 0.1em #4212ff;}
	75% {text-shadow: -0.07em 0 0.1em #12fdbd, 0.06em 0.05em 0 #fc30eb, 0 0 0.1em #4212ff;}
	100% {text-shadow: -0.08em 0 0.1em #12fdbd, 0.05em 0.05em 0 #fc30eb, 0 0 0.1em #4212ff;}
}

2. 所有方框元素增加边框效果

box-shadow: .05rem 0 0 0 #fc30eb, 
            -.05rem -.05rem 0 0 #12fdbd, 
            0 .05rem 0 0 #4212ff,
            inset .05rem 0 0 0 #fc30eb, 
            inset -.05rem -.05rem 0 0 #12fdbd, 
            inset 0 -.05rem .5rem 0 #4212ff;

右上角切换夜间模式尽可观看,目前还是很简单的设计,未来会考虑增量处理。人生不休,折腾不止。而且我发现在手机上看效果更棒,毕竟手机可是 OLCD 屏幕。

来一波视觉冲击

模仿赛博朋克风格制作的游戏建模

模仿赛博朋克风格制作的现实场景

模仿赛博朋克风格制作的现实+特效场景