博客 / 列表

用户bPcSPjP - 微信小程序實現歷史搜索功能（h5同理）

1.實現效果 2.實現原理 將數據存在storage中。 wx.setStorageSync('search_history', JSON.stringify(this.data.list)) 取數組前15條。 if (wx.getStorageSync('search_history') ){ this.setData({ list:JSON.parse(wx.get

小程序 , localstorage , 緩存 , storage , 前端

用户bPcSPjP - css實現炫酷的圓環相交轉動動畫

1.實現效果 2.實現原理 CSS perspective 屬性：屬性定義 3D 元素距視圖的距離，以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。 perspective 屬性隻影響 3D 轉換元素。（請與 perspective-origin 屬性一同使用該屬性，這樣您就能夠改變 3

css3動畫 , 前端

用户bPcSPjP - css的rotate3d實現炫酷的圓環轉動動畫

1.實現效果 2.實現原理 2.1 rotate3d rotate3d：rotate3d() CSS 函數定義一個變換，它將元素圍繞固定軸移動而不使其變形。運動量由指定的角度定義; 如果為正，運動將為順時針，如果為負，則為逆時針。 語法： rotate3d(x, y, z, a) 含義： x number 類型，可以是 0 到 1 之間的數值，表示旋轉軸 X 座標方向的矢量。 y numb

css3動畫 , 前端

用户bPcSPjP - 用css的transform屬性實現一個翻轉字符

本文將用rotateY為大家展示一個翻轉的字符 1.實現效果 2.transform介紹 transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。 語法： transform: none|transform-functions; eg： transform:rotate(7deg); -ms-transform:rotate(7deg);

css3 , transform , hsl , HTML , 前端