修改方案
没有更改布局,仅仅通过多重 box-shadow 修改了样式。除了下述一些,其他都是很简单的 css:
- 页面标题使用类似抖音 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 屏幕。
来一波视觉冲击
模仿赛博朋克风格制作的游戏建模!
模仿赛博朋克风格制作的现实场景!
模仿赛博朋克风格制作的现实+特效场景!