商店页面
Wallpaper Engine：壁纸引擎
全部 讨论 截图 艺术作品 实况直播 视频 创意工坊 新闻 指南 评测

Wallpaper Engine：壁纸引擎

商店页面
Wallpaper Engine >  创意工坊 > Coffeecat 的创意工坊
2,154 个评价
3D Digital Clock (3D数字时钟) 鼠标移动交互
描述 讨论0 留言45 改动说明
   
奖励
收藏
已收藏
取消收藏
Type: Web
Age Rating: Everyone
Genre: Unspecified
Resolution: Dynamic resolution
Category: Wallpaper
文件大小
发表于
更新日期
350.444 KB
2016 年 12 月 26 日 下午 11:06
2017 年 5 月 11 日 上午 9:34
5 项改动说明 （ 查看 ）
创建者
Coffeecat
离线
查看所有 412 个合集（也许有些被隐藏了）
39,004 不重复访客数
85,078 当前订阅者
3,197 当前收藏人数

订阅以下载
3D Digital Clock (3D数字时钟) 鼠标移动交互

描述
显示当前时间，并且可移动鼠标进行交互。

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

你想修改一些东西？
该壁纸订阅下载路径一般为：[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 条留言
< >
Armin 2020 年 11 月 15 日 下午 10:35 
vbnvn
meng 2020 年 4 月 7 日 上午 4:00 
TQL SDL
QQQLAMX 2017 年 2 月 12 日 下午 9:45 
还有就是 @Artria (c:\xxx)是可以的
QQQLAMX 2017 年 2 月 12 日 下午 9:42 
我是上面两个方法一起用了才成功的，然后 background-repeat:round这行是在style.css里图片地址下面另起一行才有用。（写代码什么的根本不会，硬是试出来）
Helsing 2017 年 2 月 4 日 上午 1:42 
加上 background-repeat:round; 就 自动拉伸啦
画师_叁 2017 年 2 月 1 日 上午 2:16 
为什么我的 只有 403行 和你说的 完全不一样 也是尴尬
GGbond 2017 年 1 月 31 日 下午 9:13 
@Arrtria 能留个QQ 教我？
WyvernLang 2017 年 1 月 30 日 下午 10:38 
@Artria 改完后如何让图片居中?
zwy 2017 年 1 月 21 日 下午 9:40 
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 2017 年 1 月 21 日 下午 9:06 
我按照你所说的修改，但背景颜色还是黑的，不信你自己试试