摘要:設計思路看到這個需求的第一想法就是用畫一個懸浮球,這個倒也不難,網上挺多案例的,后面想能不能用動畫試試性能還能更好一下,畢竟在有虛擬機的頁面已經是有點卡了,任何性能的提升都是有必要的。
最近公司項目有個需求是在網頁上操作虛擬機,emmm...操作就操作吧,誰讓是領導提的,咱也不知道,咱也不敢問啊....咋辦?搞吧,爬了n多個坑才終于把虛擬機功能給引入到項目中,看著熟悉的Linux操作窗口,都別攔我,讓我裝一會*
領導看了十分滿意,然后說...我看電腦上都有那個懸浮球,我們這也得有吧
???啥玩意???去他電腦上看了一下才發現是安全軟件的那個展示電腦使用情況的懸浮球,WTF!!你見過哪個Linux有這懸浮球的?你咋不讓我再給你整一只瑞星小獅子在旁邊給你跳舞呢??算了還是別說了,說了真讓我做怎么搞....
需求
需求說起來很簡單--》小球、懸浮在頁面最上層、內部有波浪能動、波浪高度跟虛擬機使用情況有關、鼠標放上去展示詳細信息,大概就是醬嬸的
開搞
項目使用的是vue框架,所以demo都是在vue環境下,不過代碼其實沒什么環境需求的。
看到這個需求的第一想法就是用canvas畫一個懸浮球,這個倒也不難,網上挺多案例的,后面想能不能用css動畫試試?性能還能更好一下,畢竟在有虛擬機的頁面已經是有點卡了,任何性能的提升都是有必要的。
主要實現原理就是使用一個不停運動的a遮在b塊上面,然后讓a的顏色與背景顏色相同,從而造成b的邊緣在不停波動的效果。
然后我們得到了這個
然后就變成了這樣(為了看的效果更好,原諒我使用的大紅色)
.container {
overflow: hidden;
}
.wave-mask {
background-color: rgba(255, 255, 255, 0.9);
}
成品就醬嬸的了
波浪的高度完全是受wave-mask的top屬性影響的,所以要動態變更懸浮球狀態只需要計算然后相應的改變top的值就可以了,然后稍微完善一下代碼
看效果
大概就醬嬸了,第一次寫文,文筆不好多多見諒,別說我爛尾了,因為...我要下班了
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/7303.html
摘要:基于實現的移動端的可吸附懸浮按鈕預覽地址移動端源碼地址安裝使用 基于react實現的移動端的可吸附懸浮按鈕 預覽地址(移動端): https://kkfor.github.io/suspe... 源碼地址: https://github.com/kkfor/susp... 安裝 npm install suspend-button -S 使用 import React, { Compo...
摘要:基于實現的移動端的可吸附懸浮按鈕預覽地址移動端源碼地址安裝使用 基于react實現的移動端的可吸附懸浮按鈕 預覽地址(移動端): https://kkfor.github.io/suspe... 源碼地址: https://github.com/kkfor/susp... 安裝 npm install suspend-button -S 使用 import React, { Compo...
摘要:利用用和來做表單即時校驗需求讓表單檢驗變得簡單優雅,不需要寫冗長的代碼來校驗設置樣式豐富了表單元素,提供了類似等表單元素屬性。不知細葉誰裁出,二月春風似剪刀。首先,你需要先了解一下漸變的使用技巧。 之前不久,由于自己平時涉獵還算廣泛,總結了一篇博客:這些JavaScript編程黑科技,裝逼指南,高逼格代碼,讓你驚嘆不已,沒想到受到了大家的歡迎,有人希望能博主還能整理個 CSS 的一些黑...
摘要:利用用和來做表單即時校驗需求讓表單檢驗變得簡單優雅,不需要寫冗長的代碼來校驗設置樣式豐富了表單元素,提供了類似等表單元素屬性。不知細葉誰裁出,二月春風似剪刀。首先,你需要先了解一下漸變的使用技巧。 之前不久,由于自己平時涉獵還算廣泛,總結了一篇博客:這些JavaScript編程黑科技,裝逼指南,高逼格代碼,讓你驚嘆不已,沒想到受到了大家的歡迎,有人希望能博主還能整理個 CSS 的一些黑...
閱讀 2736·2021-11-11 17:21
閱讀 627·2021-09-23 11:22
閱讀 3591·2019-08-30 15:55
閱讀 1652·2019-08-29 17:15
閱讀 584·2019-08-29 16:38
閱讀 921·2019-08-26 11:54
閱讀 2518·2019-08-26 11:53
閱讀 2765·2019-08-26 10:31