Wallpaper Engine

Wallpaper Engine

2,151 ratings
3D Digital Clock (3D数字时钟) 鼠标移动交互
   
Award
Favorite
Favorited
Unfavorite
Type: Web
Age Rating: Everyone
Genre: Unspecified
Resolution: Dynamic resolution
Category: Wallpaper
File Size
Posted
Updated
350.444 KB
26 Dec, 2016 @ 11:06pm
11 May, 2017 @ 9:34am
5 Change Notes ( view )

Subscribe to download
3D Digital Clock (3D数字时钟) 鼠标移动交互

Description
显示当前时间,并且可移动鼠标进行交互。

如果不需要鼠标交互,可以订阅这个:
点此传送至无交互版本

你想修改一些东西?
该壁纸订阅下载路径一般为:[Steam\steamapps\workshop\content\431960\827078322]
修改请自行保存为新项目,以免创意工坊自动将该订阅恢复。
------------------
1.时钟颜色
打开css文件夹中style.css,推荐使用notepad++来编辑。
--------------------------------------------------
706行 " .line:before, .line:after " 中
" background " 决定数字灯管主要颜色(使用16进制),如红色为 " background: #FF0000; "
" box-shadow " 两个值为数字灯管边缘泛光,如红色为 " box-shadow: 0 0 1rem #FF0000, inset 0 0 0.125vmin #FF0000; "
" color " 无明显效果,可以不管。
--------------------------------------------------
53行 " .digit:nth-child " 中
" background " 决定两个冒号主要颜色(使用16进制),如红色为 " background: #FF0000; ",默认白色就可以,因为冒号有呼吸灯效果,中心白色与其他颜色的泛光配合比较好看。
" box-shadow " 两个值为冒号边缘泛光,如红色为 " box-shadow: 0 0 1rem #FF0000, inset 0 0 0.25vmax #FF0000; "
" text-shadow " 无明显效果,可以不管。
--------------------------------------------------
2.鼠标交互
打开js文件夹中index.js,推荐使用notepad++来编辑。
--------------------------------------------------
46与47行
// x: (clientWidth / 2 - clientX) / clientWidth,
y: (clientHeight / 2 - clientY) / clientHeight
x 轴为左右翻转,y 轴为上下翻转。
如果不需要翻转,可以在前面加双斜杠注释这一句。

更新
------------------
【2017-5-11】
1.鼠标交互由3D改为垂直翻转(为了更容易看清时间)。
2.在Wallpaper Engine该壁纸的选项中可以自行导入本地壁纸 (感谢 ChaosAlphard 提供)。
如果有前端大触,欢迎大改这个坑。

Created by David Khourshid (http://codepen.io/davidkpiano)
Source: (http://codepen.io/davidkpiano/pen/Vmyyzd)
45 Comments
Armin 15 Nov, 2020 @ 10:35pm 
vbnvn
meng 7 Apr, 2020 @ 4:00am 
TQL SDL
QQQLAMX 12 Feb, 2017 @ 9:45pm 
还有就是 @Artria (c:\xxx)是可以的
QQQLAMX 12 Feb, 2017 @ 9:42pm 
我是上面两个方法一起用了才成功的,然后 background-repeat:round这行是在style.css里图片地址下面另起一行才有用。(写代码什么的根本不会,硬是试出来)
Helsing 4 Feb, 2017 @ 1:42am 
加上 background-repeat:round; 就 自动拉伸啦
画师_叁 1 Feb, 2017 @ 2:16am 
为什么我的 只有 403行 和你说的 完全不一样 也是尴尬
GGbond 31 Jan, 2017 @ 9:13pm 
@Arrtria 能留个QQ 教我?
WyvernLang 30 Jan, 2017 @ 10:38pm 
@Artria 改完后如何让图片居中?
zwy 21 Jan, 2017 @ 9:40pm 
1.可以通过修改目录下的css/style.css文件来修改背景图片
2.找到第796行,原本为 background: #121212;
这个#121212就是背景颜色,可以改成#000000,这样更黑一点
3.将这一行修改为 background:#000000 url(URL);
URL是你的图片的目录,举例:
background:#000000 url(C:/Users/Myself/OneDrive/Pictures/72855-105.jpg);
这里要注意一下,是c:/xxx不是c:\xxx
4.保存
zwy 21 Jan, 2017 @ 9:06pm 
我按照你所说的修改,但背景颜色还是黑的,不信你自己试试