網上有很多關于pos機設計網頁模板,從零制作Web網頁特效小兔子組件的知識，也有很多人為大家解答關于pos機設計網頁模板的問題，今天pos機之家(www.tonybus.com)為大家整理了關于這方面的知識，讓我們一起來看下吧!
本文目錄一覽：
pos機設計網頁模板
著意登樓瞻玉兔，何人張幕遮銀闕？又到了一年一度的網頁小掛件環節，以往我們都是集成別人開源的組件，但所謂熟讀唐詩三百首，不會做詩也會吟，熟讀了別人的東西，做幾首打油詩也是可以的，但若不能自出機抒，卻也成不了大事，所以本次我們從零開始制作屬于自己的網頁小掛件，博君一曬。
玉兔主題元素繪制成本最低的繪制方式是使用純CSS，不依賴任何圖片和三方庫，首先創建繪制容器：
<div id="rabbit_box"> </div>
由于是小掛件，我們首先將容器固定在右下角：
#rabbit_box{ position: fixed; bottom: var(--pos,5%); right: 35px; z-index: 99; border: none; outline: none; filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4)); }
這里加了一層filter濾鏡，可以讓玉兔更加立體。
考慮到復用性和可移植性，將主題元素動態添加到容器中：
function rabbit_init(){ var container = document.getElementById("rabbit_box"); container.innerHTML = '<div class="rabbit"><div class="rabbit__leg rabbit__leg--one"></div><div class="rabbit__leg rabbit__leg--two"></div><div class="rabbit__tail"></div><div class="rabbit__body"></div><div class="rabbit__leg rabbit__leg--three"></div><div class="rabbit__leg rabbit__leg--four"></div><div class="rabbit__ear rabbit__ear--right"></div><div class="rabbit__head"></div><div class="rabbit__ear rabbit__ear--left"></div></div>'; }rabbit_init()
這里玉兔元素由八個小組件構成，分別是頭部，四肢，四爪，兩只耳朵，眼睛，尾巴以及嘴。
隨后設置CSS樣式：
.rabbit .rabbit__body { width="360px",height="auto" />
border-radius: 50% 50% 50% 50%/60% 60% 40% 40%; transform: rotate(-40deg); box-shadow: inset -2.3em -2.7em 0 0 var(--theme-color,#D2DAEE); }兔子身體元素通過border-radius來獲得圓潤的曲線，同時使用transform旋轉元素得到一個適合的角度。最后通過box-shadow屬性來設置顏色，顏色可以自定義，如果沒有自定義則使用默認值#D2DAEE，注意旋轉角度需要指定單位：deg。
接著繪制頭部：
.rabbit .rabbit__head { position: absolute; width="360px",height="auto" />
這里通過::before 和 ::after 偽元素在兔子頭部元素的前面或后面插入內容，頭部前面繪制兔嘴，后面則插入兔子眼睛，之所以這樣控制，是因為可以靈活的使用box-shadow填充顏色。
接著繪制耳朵：
.rabbit .rabbit__ear { position: absolute; border-radius: 50% 50% 50% 50%/40% 40% 60% 60%; transform-origin: 50% 100%; } .rabbit .rabbit__ear--left { width="360px",height="auto" />
這里通過-webkit-animation屬性讓兔子左右耳在3秒內進行來回擺動，達到一種動態效果，注意左耳內側顏色固定為：#F3E3DE，同時動畫會影響元素的布局，需要注意元素的寬高。
最后就是四肢和尾巴：
.rabbit .rabbit__leg { position: absolute; } .rabbit .rabbit__leg--one { width="360px",height="auto" />
這里四肢和四爪的顏色應該有差異，四肢顏色可以自定義，四爪固定為白色，以達到“四蹄踏雪”的效果。
接著改造初始化函數，使其可以動態更改顏色：
function rabbit_init(color=null,pos=null){ var container = document.getElementById("rabbit_box"); container.innerHTML = '<div class="rabbit"><div class="rabbit__leg rabbit__leg--one"></div><div class="rabbit__leg rabbit__leg--two"></div><div class="rabbit__tail"></div><div class="rabbit__body"></div><div class="rabbit__leg rabbit__leg--three"></div><div class="rabbit__leg rabbit__leg--four"></div><div class="rabbit__ear rabbit__ear--right"></div><div class="rabbit__head"></div><div class="rabbit__ear rabbit__ear--left"></div></div>'; if(color != null){ document.documentElement.style.setProperty("--theme-color",color); } if(pos != null){ document.documentElement.style.setProperty("--pos",pos); }}rabbit_init("pink")
最終效果：
開源發布現在我們將這個開源特效打包上線，首先創建項目目錄：
mkdir rabbit
隨后將特效的樣式CSS代碼以及JS代碼分別抽離出來：rabbit.css:
.rabbit { position: relative; } .rabbit .rabbit__body { width="360px",height="auto" />
rabbit.js代碼：
(function (name, context, fn) { if (typeof module != 'undefined' && module.exports) { // Node 環境 module.exports = fn(); } else if (typeof context['define'] == 'function' && (context['define']['amd'] || context['define']['cmd'])) { // Require.js 或 Sea.js 環境 define(fn); } else { // client 環境 context[name] = fn(); }})('rabbit_init', this, function () { return function (color=null,pos=null) { var container = document.getElementById("rabbit_box"); container.innerHTML = '<div class="rabbit"><div class="rabbit__leg rabbit__leg--one"></div><div class="rabbit__leg rabbit__leg--two"></div><div class="rabbit__tail"></div><div class="rabbit__body"></div><div class="rabbit__leg rabbit__leg--three"></div><div class="rabbit__leg rabbit__leg--four"></div><div class="rabbit__ear rabbit__ear--right"></div><div class="rabbit__head"></div><div class="rabbit__ear rabbit__ear--left"></div></div>'; if(color != null){ document.documentElement.style.setProperty("--theme-color",color); } if(pos != null){ document.documentElement.style.setProperty("--pos",pos); } }});
保存在項目的lib目錄。
首先將項目提交到Github: https://github.com/zcxey2911/rabbit
隨后運行命令填寫NPM配置：
npm init
entry point 配置項填寫你的入口文件：
entry point: ./lib/rabbit.js
登錄NPM賬號，隨后發布：
npm loginnpm publish
登錄之前，最好將切換回默認源，否則無法登錄：
npm config set registry=https://registry.npmjs.com
發布成功后，查看發布內容：https://www.npmjs.com/package/rabbit-widget
開源庫引入和使用首先需要引入模塊，可以使用 CDN 直接引入或者通過 NPM 包的形式安裝。
直接引入：
<!-- https://cdn.jsdelivr.net/gh/zcxey2911/rabbit@v1.0.0/lib/rabbit.css --><!-- https://cdn.jsdelivr.net/gh/zcxey2911/rabbit@v1.0.0/lib/rabbit.js --><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zcxey2911/rabbit@v1.0.0/lib/rabbit.css"/><div id="rabbit_box"></div><script>function init_rabbit(){ rabbit_init("pink","20%"); // 粉色 高度20% //rabbit_init(); //默認顏色 默認位置}</script><script async onload="init_rabbit()" src="https://cdn.jsdelivr.net/gh/zcxey2911/rabbit@v1.0.0/lib/rabbit.js"></script>
NPM 包的形式安裝：
// npm install --save rabbit-widgetimport 'rabbit-widget/lib/rabbit.css';var rabbit_init = require('rabbit-widget');rabbit_init();
如果使用NPM導入模塊的形式引入，請確保頁面加載完畢之后執行再執行rabbit_init();，否則會報錯：Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')。
這里以Vue.js3.0組件為例子：
<template> <a-layout class="layout"> <a-layout-header> <div class="logo" /> <ad_header /> </a-layout-header> <a-layout-content style="padding: 0 50px"> <a-breadcrumb style="margin: 16px 0"> <a-breadcrumb-item>廣告平臺</a-breadcrumb-item> <a-breadcrumb-item>首頁</a-breadcrumb-item> </a-breadcrumb> <div :style="{ background: '#fff', padding: '24px', minHeight: '280px' }"> 這里是首頁 <div id="rabbit_box"></div> </div> </a-layout-content> <a-layout-footer style="text-align: center"> 在線廣告平臺 </a-layout-footer> </a-layout></template><script>import ad_header from './ad_header';import 'rabbit-widget/lib/rabbit.css';var rabbit_init = require('rabbit-widget');export default { data() { return { } }, //聲明子組件 components:{ 'ad_header':ad_header }, methods:{ }, created(){ this.$nextTick(() => { console.log("頁面加載完啦~") rabbit_init();}) }}</script><style>.site-layout-content { min-height: 280px; padding: 24px; background: #fff;}#components-layout-demo-top .logo { float: left; width="360px",height="auto" />
項目中引入效果：
結語奉上項目代碼，與眾親同饗:https://github.com/zcxey2911/rabbit https://www.npmjs.com/package/rabbit-widget ，最后祝各位鄉親祥瑞玉兔，人機平安，愿諸君2023年武運昌隆，前端一統。
以上就是關于pos機設計網頁模板,從零制作Web網頁特效小兔子組件的知識，后面我們會繼續為大家整理關于pos機設計網頁模板的知識，希望能夠幫助到大家！
