微信小程序css實現的聯系客服動畫樣式

一 、效果

二、代碼

  • wxml
<view class="customer-service"><button class="btn" open-type="contact"></button><image class="pic" src="https://ts4.cn.mm.bing.net/th?id=OIP-C.3SGSiRPuOU9uH5VNVOMPwgHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2" mode="aspectFill"></image><view class="line"></view>
</view>
  • wxss
.customer-service {width: 100rpx;height: 100rpx;background-color: var(--themeColor);position: fixed;z-index: 10;bottom: 100rpx;right: 60rpx;border-radius: 50%;box-shadow: 0 0 20rpx rgba(189, 160, 102, 0.8);
}.customer-service .btn {position: relative;z-index: 2;border-radius: 50%;width: 100%;height: 100%;opacity: 0;
}.customer-service .pic {width: 100%;height: 100%;border-radius: 50%;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;z-index: 1;
}.customer-service .line {width: 100%;height: 100%;border: 3px solid palevioletred;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;border-radius: 50%;animation: emit 1s infinite;
}@keyframes emit {0% {}100% {border-width: 1px;opacity: 0;transform: scale(1.5);}
}

animation: emit 1s infinite;//1s執行一次? 修改時間即可

動畫效果放大1.5倍

@keyframes emit {0% {}100% {border-width: 1px;opacity: 0;transform: scale(1.5);}
}

Transform屬性應用于元素的2D或3D轉換。這個屬性允許你將元素旋轉,縮放,移動,傾斜等。

Transform常用屬性

translate(位移)

translate有三個屬性值即x軸,y軸和z軸,語法:

Transform:translateX(apx) / translateY(bpx) / translateZ(cpx);

簡寫:transform:translate(apx,bpx,cpx);

scale(縮放)

用法:transform: scale(0.5) ?或者 ?transform: scale(0.5, 2);

參數表示縮放倍數;

  • 一個參數時:表示水平和垂直同時縮放該倍率
  • 兩個參數時:第一個參數指定水平方向的縮放倍率,第二個參數指定垂直方向的縮放倍率。

rotate(旋轉)

共一個參數“角度”,單位deg為度的意思,正數為順時針旋轉,負數為逆時針旋轉,上述代碼作用是順時針旋轉45度。

rotate()默認旋轉中心為圖片的中點

傾斜(傾斜)

div{transform: skewY(10deg);}? //對Y方向進行傾斜10度,意思是保留Y方向,將盒子沿著X方向進行傾斜。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/209982.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/209982.shtml
英文地址,請注明出處:http://en.pswp.cn/news/209982.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

序列的Z變換(信號的頻域分析)

1. 關于Z變換 2. 等比級數求和 3. 特殊序列的Z變換 4. 因果序列/系統收斂域的特點 5. 例題

navigationBar頂部導航欄,兼容適配所有機型(附完整案例)

思路 隱藏原生樣式獲取膠囊按鈕、狀態欄相關數據以供后續計算根據不同機型計算出該機型的導航欄高度,進行適配編寫為導航欄公共組件使用組件1. 隱藏原生樣式 全局設置 "window": {"navigationStyle": "custom" }單個頁面設置 {"navigat…

免費的AI文案生成器有哪些?AI文案生成器排行榜

在當今數字化的時代&#xff0c;內容創作已成為許多行業不可或缺的一部分。為了滿足日益增長的創作需求&#xff0c;越來越多的人開始尋找能夠提高效率、同時保持原創性的解決方案。本文將專心分享一些優質的AI文案生成器。 AI文案生成器的需求 內容創作已經不再是傳統媒體和市…

高項備考葵花寶典-項目進度管理輸入、輸出、工具和技術(上,很詳細考試必過)

項目進度管理的目標是使項目按時完成。有效的進度管理是項目管理成功的關鍵之一&#xff0c;進度問題在項目生命周期內引起的沖突最多。 小型項目中&#xff0c;定義活動、排列活動順序、估算活動持續時間及制定進度模型形成進度計劃等過程的聯系非常密切&#xff0c;可以視為一…

C語言基礎

常量和常量表達式的區別 #define N 4;又是常量&#xff0c;又是常量表達式&#xff0c;其在編譯期預處理階段就會直接替換 const int M 5;只是常量&#xff0c;不是常量表達式 &#xff0c;其是存儲在一塊內存區域之內的&#xff0c;但是存儲的值不能改變 常量表達式&#xff…

【USB、串口、COM口、TTL、RS-232、RS-485區別詳解】

USB&#xff0c;串口&#xff0c;COM口&#xff0c;TTL&#xff0c;RS-232&#xff0c;RS-485區別詳解 1. USB&#xff0c;串口&#xff0c;COM口&#xff0c;TTL&#xff0c;RS-232&#xff0c;RS-485區別詳解2 USB轉TTL2 RS-232轉TTL3 USB4 UART5 STM32串口異步通訊需要定義的…

iOS——定位與地圖

平時在寫項目的時候可能會遇到需要使用定位服務的地方&#xff0c;比如說獲取位置和導航等。因此這里我會使用OC自帶的庫以及蘋果系統的地圖來獲取定位以及顯示在地圖上。 開始前的設置 在獲取定位前&#xff0c;需要在項目文件的info中添加兩個關鍵字&#xff0c;用于向用戶…

從零開始的C++(二十一)

C11 1.列表初始化&#xff1a; //允許以下代碼正確運行int a[]{1,2,3};//效果與int a[]{1,2,3}一致 即允許省略等于號。同時&#xff0c;允許用花括號對所有自定義類型和內置類型進行初始化&#xff0c;而非以前花括號只能對數組進行初始化。利用花括號對自定義類型初始化時…

LeetCode刷題--- 求根節點到葉節點數字之和

個人主頁&#xff1a;元清加油_【C】,【C語言】,【數據結構與算法】-CSDN博客 個人專欄&#xff1a;http://t.csdnimg.cn/ZxuNL http://t.csdnimg.cn/c9twt 前言&#xff1a;這個專欄主要講述遞歸遞歸、搜索與回溯算法&#xff0c;所以下面題目主要也是這些算法做的 我講述…

【ITK庫學習】使用itk庫進行圖像濾波ImageFilter:鄰域濾波

目錄 1、itkMeanImageFilter 均值濾波器2、itkMedianImageFilter 中值濾波器3、itkBinaryMedianImageFilter 二值中值濾波器4、擴展itkNeighborhood5、擴展itkNeighborhoodIterator6、擴展itkNeighborhoodOperator 領域濾波是一種信號處理方法&#xff0c;用于去除信號中的噪聲…

★560. 和為 K 的子數組(自己做出來了)

560. 和為 K 的子數組 前綴和的知識。 如果要求i~j下標之間的元素和&#xff0c;用前綴和的話&#xff0c;應該是b[j] - b[i-1]&#xff0c;i處的值也應該包括。 所以這個題&#xff0c;前綴和數組就要比原數組整體向后平移一個單元格&#xff0c;不然在求0~n的和的時候沒法取…

在python中安裝庫,會有conda安裝,也會有pip安裝,conda與pip的區別是什么?

文章目錄 一、Conda是什么&#xff1f;二、pip是什么&#xff1f;三、pip與conda的區別&#xff1a;總結 一、Conda是什么&#xff1f; Conda是一個開源的包管理系統&#xff0c;它是Anaconda公司為Python和其他編程語言開發的。它主要用于數據科學和機器學習領域&#xff0c;…

【Vue】日常錯誤總結(持續更新)

日常遇到的小問題匯總, 內容小篇幅少的就全放這里了, 內容多的會在Vue專欄單獨分享~ 目錄 【Q】 el-form-item值為 null 或 undefined顯示““ 【Q】dialog內組件數據刷新總是延遲慢一拍 問題背景描述 解決方案 代碼簡單模擬 JS 【Q】el-input 不能輸入的解決辦法 方法…

Educational Codeforces Round 156 (Rated for Div. 2)補題

Sum of Three 題目大意&#xff1a;將一個正整數n分成3個不同的正整數x,y,z,保證三個數都不能整除3&#xff0c;如果無法實現就輸出NO. 思路&#xff1a;這個題實際上特別簡單&#xff0c;我們可以發現當n比較大的時候&#xff0c;我們可以從中取1&#xff0c;然后第二個數也…

【Java】Java環境以及EditPlus編輯器安裝與配置流程

要安裝和配置Java環境以及EditPlus編輯器&#xff0c;請按照以下步驟操作&#xff1a; ### 安裝Java Development Kit (JDK) 1. 訪問Java官方網站下載最新版本的JDK。 2. 運行下載的JDK安裝程序&#xff0c;并按照提示完成安裝。 3. 安裝完成后&#xff0c;記下JDK的安裝路徑&a…

perf與火焰圖-性能分析工具

參考鏈接 perf性能分析工具使用分享 如何讀懂火焰圖&#xff1f;-阮一峰 perf基本用法-record,report-知乎 火焰圖抓取 準備&#xff1a; centos安裝perf工具 dnf install perf下載火焰圖解析代碼 git clone https://github.com/brendangregg/FlameGraph.git抓取指定進程…

Orcal數據庫Schema理解、表分區理解

目錄 1 Schema1.1 Orcal數據庫示例1.2 MySQL數據庫示例 2 Orcal表分區2.1 創建表分區2.2 查看表分區2.3 查看指定分區數據 此前未了解過Schema的概念&#xff0c;僅知道Orcal數據庫比較側重這個概念&#xff0c;搜遍全網都&#xff0c;都是啰哩吧嗦的搬抄定義&#xff0c;特此在…

LeetCode算法題解(單調棧)|LeetCode503. 下一個更大元素 II、LeetCode42. 接雨水

一、LeetCode503. 下一個更大元素 II 題目鏈接&#xff1a;503. 下一個更大元素 II 題目描述&#xff1a; 給定一個循環數組 nums &#xff08; nums[nums.length - 1] 的下一個元素是 nums[0] &#xff09;&#xff0c;返回 nums 中每個元素的 下一個更大元素 。 數字 x 的…

LIMoE:使用MoE學習多個模態

文章鏈接&#xff1a;Multimodal Contrastive Learning with LIMoE: the Language-Image Mixture of Experts 發表期刊&#xff08;會議&#xff09;: NeurIPS 2022 目錄 1.背景介紹稀疏模型 2.內容摘要Sparse Mixture-of-Experts ModelsContrastive LearningExperiment Analy…

Kubernetes入門筆記 ——(3)理解pod對象

為什么需要pod 最為熟知的一句話&#xff1a;pod是k8s的最小調度單位。剛開始聽到這句話時會想&#xff0c;已經有容器了&#xff0c;k8s為什么還要搞個pod出來&#xff1f;容器和pod是什么關系&#xff1f;容器的本質是進程&#xff0c;而k8s本質上類似操作系統。 熟悉Linux的…