夜间模式修改为赛博朋克风格样式 1.0

文章目录
  1. 修改方案
  2. 来一波视觉冲击
修改方案

没有更改布局,仅仅通过多重 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 屏幕。

来一波视觉冲击

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

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

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

本文稿内容来源于“风记星辰”,请您在需要时注明。
在本文末若注明“参考、扩展”等字样均为涉及到转载部分第三方内容,具体说明请查看 版权及豁免条款

发表评论

您的电子邮箱地址不会被公开。

Captcha Code

10条评论夜间模式修改为赛博朋克风格样式 1.0