點香拜拜網頁設計

wenhuay
個人積分：290分
文章編號：87279644

290分

樓主

2023-04-17 23:47

因為神明很多，所以我想寫一個共用的CSS
讓HTML呼叫。想法大概是 ......

★CSS:
background-image引用一張<三支香的png>，

★HTML:
神明的照片，大小不變、固定不動在頁面靠上
做一個bottom按鈕，點下之後
<三支香的png>，重疊穿越神明的照片
由大變小，由上移動到下，
最後停在神明的照片下方的<香爐照片>

不知道有沒有大大可以建議語法？
功德無量，感激不盡！

2023-04-17 23:47 發佈

文章關鍵字網頁設計

nwcs

nwcs
個人積分：6314分
文章編號：87282945

6314分

2樓

2023-04-18 12:46

用ChatGPT直接搞定 ?

chiyenms

chiyenms
個人積分：10751分
文章編號：87283030

10751分

3樓

2023-04-18 12:58

wenhuay wrote:
因為神明很多，所以我想寫一個共用的CSS
讓HTML呼叫

那你應該要用 Oracle 或 Delphi。

up2u

up2u
個人積分：2903分
文章編號：87285663

2903分

4樓

2023-04-18 17:40

wenhuay wrote:
不知道有沒有大大可以建議語法？

SVG animate, 加油

ossian

ossian
個人積分：49分
文章編號：87290773

49分

5樓

2023-04-19 11:30

原理大概就是透過按鈕觸發一則 CSS 動畫，讓線香跑到香爐的位置
我在 codepen 放一個簡單的範例，剩下你自己優化吧

https://codepen.io/ossian/pen/jOeMLwd

wenhuay

wenhuay
個人積分：290分
文章編號：87297219

290分

樓主

2023-04-20 9:30

ossian wrote:
原理大概就是透過按鈕...(恕刪)

果然高手還是在01，非常的感謝您。(你的神明真的很華麗喔！)

能不能再請教你
因為神明非常多，不能夠寫在CSS內，做標準套用
要寫在外面HTML，這樣才能夠變化神明的照片

但如此一來就不在background範圍之內
三柱香的動畫，還可以穿越神明身體嗎？

ossian

ossian
個人積分：49分
文章編號：87299338

49分

7樓

2023-04-20 13:51

可以寫在樣式檔裡，只要把神明的圖檔獨立成一個 class，

例如：
神明一是 .god-1
神明二是 .god-2
神明三是 .god-3

需要呼叫祂時再引用就好，這樣你就可以設定無限多組神明
做法很多，下面提供一個簡單範例

https://codepen.io/ossian/pen/yLRVYjK

wenhuay

wenhuay
個人積分：290分
文章編號：87300439

290分

樓主

2023-04-20 16:03

ossian wrote:
可以寫在樣式檔裡，只...(恕刪)

好的好的！非常的感謝您再次的回答。

再請問，可否按鈕按一次，就拜一次不需要重置網頁呢？

例如有些人就想要多拜幾次。