CSS特效017:球體漲水的效果

CSS常用示例100+專欄目錄

本專欄記錄的是經常使用的CSS示例與技巧,主要包含CSS布局,CSS特效,CSS花邊信息三部分內容。其中CSS布局主要是列出一些常用的CSS布局信息點,CSS特效主要是一些動畫示例,CSS花邊是描述了一些CSS相關的庫、知識點、理論篇章等。 因為常用所以記錄、展示、分享,希望能給您帶來幫助。

文章目錄

    • 效果圖
    • 源代碼
    • CSS基礎知識點
    • 結尾語

css實戰中,怎么繪制球體漲水的效果呢?主要利用了transform: translate()的神奇功能,hover時候,讓帶有顏色的部分飄移呈現出來。

效果圖

在這里插入圖片描述

源代碼

/*
* @Author: 大劍師蘭特(xiaozhuanlan),還是大劍師蘭特(CSDN)
* @此源代碼版權歸大劍師蘭特所有,可供學習或商業項目中借鑒,未經授權,不得重復地發表到博客、論壇,問答,git等公共空間或網站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2023-11-24
*/
<template><div class="container"><div class="top"><h3>球體漲水的效果</h3><div class="author">大劍師蘭特, 還是大劍師蘭特,gis-dajianshi</div></div><div class="dajianshi"><ul><li><span></span></li><li><span></span></li><li><span></span></li><li><span></span></li></ul></div></div>
</template><style scoped>.container {width: 1000px;height: 580px;margin: 50px auto;border: 1px solid green;position: relative;}.top {margin: 0 auto 0px;padding: 10px 0;background: deepskyblue;color: #fff;}.dajianshi{width: 100%;height: 400px;position: relative;}ul {display: flex;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}ul li {list-style: none;}ul li span {width: 120px;height:120px;background-color: #fff;text-align: center;line-height: 120px;margin: 0 10px;display: block;border-radius: 50%;position: relative;overflow: hidden;border: 3px solid #cde;z-index: 1;}ul li span:before {content: "";position: absolute;top: 100%;left: 0;width: 100%;height: 100%;transition: 0.5s;z-index: 2;}ul li span:hover:before {top: 0;}ul li:nth-child(1) span:before {background: red;}ul li:nth-child(2) span:before {background: orange;}ul li:nth-child(3) span:before {background: yellow;}ul li:nth-child(4) span:before {background: green;}
</style>

CSS基礎知識點

1.CSS樣式表
2.基礎選擇器:(1)標簽選擇器,(2)類選擇器,(3)id選擇器,(4)通配符選擇器
3.復合選擇器:(1)后代選擇器,(2)子選擇器,(3)并集選擇器,(4)交集選擇器,(5)偽類選擇器。
4.字體樣式屬性:(1)字體大小font-size,(2)字體類型font-family,(3)字體粗細font-weight,(4)字體風格font-style
5.文本外觀樣式:(1)設置文本顏色color,(2)word-spacing,(3)letter-spacing,(4)line-height,(5)text-transform,(6)text-decoration,(7)text-align,(8)text-indent,(9)white-space
6.文本外觀屬性:(1)text-shadow,(2)overflow
7.CSS層疊性、繼承性及優先級
8.邊框介紹
8.1邊框屬性:(1)border-style,(2)border-width,(3)border-color,(4)border-radius
8.2內邊距屬性
8.3外邊距屬性
8.4box-shadow
9.背景屬性
9.1背景顏色
9.2背景圖片:(1)background-repeat,(2)background-position,(3)background-attachment,(4)background-size,(5)background-origin,(6)background-clip,(7)復合寫法,(8)不透明
10.元素的類型
11.span標簽
12.display
13.表格標簽:(1)table標簽,(2)tr標簽,(3)td標簽,(4)th標簽,(5)表格邊框,(6)折疊邊框,(7)表格寬度和高度,(8)表格邊框間距border-spacing,(9)表格標題位置caption-side
14.表單
14.1創建表單:(1)標簽
14.2表單控件:(1)input控件,(2)input/標簽的type屬性,(3)textarea控件,(4)select控件
15.CSS盒子模型:(1)邊框(border),(2)內邊距(padding),(3)外邊距(margin),(4)清除內外邊距,(5)盒子模型
16.浮動布局:(1)傳統網頁布局,(2)浮動簡介,(3)浮動特性,(4)清除浮動
17.定位布局:(1)定位組成,(2)相對定位relative,(3)絕對定位absolute,(4)子絕父相,(5)固定定位fixed,(6)定位疊放次序z-index,(7)定位拓展
三.其他
1.圓角邊框:(1)圓形,(2)圓角矩形
2.盒子陰影
3.文字陰影
4.用戶界面樣式:(1)鼠標樣式 cursor,(2)輪廓線 outline,(3)防止拖拽文本域 resize,
5.過渡 transition

結尾語

CSS的應用無處不在,希望某個片段就能幫助你,歡迎學習GIS的朋友一起交流。
《 Openlayers 綜合示例200+ 》,
《 leaflet示例教程100+ 》,
《 Cesium示例教程100+》,
《MapboxGL示例教程100+》。

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

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

相關文章

前端錯誤處理與調試

** javascript錯誤處理 ** 由于javascript本身是動態語言&#xff0c;而且沒有固定的開發工具&#xff0c;因此他普遍認為是最難以調試的語言&#xff0c;在ECMAScript3新增了try-catch和throw以及一些錯誤類型&#xff0c;讓開發人員能適當的處理錯誤&#xff0c;緊接著web瀏…

多tab頁表單校驗如何做

多tab頁表單校驗如何做 在多tab頁表單中進行校驗&#xff0c;可以按照以下步驟進行&#xff1a; 創建一個表單對象&#xff0c;用于存儲表單數據和校驗規則。 分為多個tab頁&#xff0c;每個tab頁對應一個表單頁面。 定義每個tab頁中的表單字段及其相應的校驗規則。 在切換…

PHP 賦值、算數和比較運算符 學習資料

PHP 賦值、算數和比較運算符 在 PHP 中&#xff0c;賦值、算數和比較運算符用于對變量進行賦值、進行數學運算和比較操作。以下是對這些運算符的介紹和示例&#xff1a; 賦值運算符 賦值運算符用于給變量賦值。常用的賦值運算符有 、、-、*、/ 等。 示例&#xff1a; $a …

芯能轉債上市價格預測

芯能轉債-113679 基本信息 轉債名稱&#xff1a;芯能轉債&#xff0c;評級&#xff1a;AA-&#xff0c;發行規模&#xff1a;8.8億元。 正股名稱&#xff1a;芯能科技&#xff0c;今日收盤價&#xff1a;12.63元&#xff0c;轉股價格&#xff1a;13.1元。 當前轉股價值 轉債面…

基于遺傳優化的多屬性判決5G-Wifi網絡切換算法matlab仿真

目錄 1.算法運行效果圖預覽 2.算法運行軟件版本 3.部分核心程序 4.算法理論概述 5.算法完整程序工程 1.算法運行效果圖預覽 2.算法運行軟件版本 MATLAB2022a 3.部分核心程序 .......................................................................... %接收功率、網…

數字孿生智慧校園 Web 3D 可視化監測

當今&#xff0c;智慧校園發展階段亟需推動信息可視化建設與發展&#xff0c;將大數據、云計算、可視化等高新技術相融合&#xff0c;為校園師生創造科學智能的學習環境&#xff0c;并實現教學資源最大化和信息服務智能化。幫助學校更好地應用校園可視化技術&#xff0c;提升校…

原型模式 (Prototype Pattern)

定義&#xff1a; 原型模式&#xff08;Prototype Pattern&#xff09;是一種創建型設計模式&#xff0c;它用于創建重復的對象&#xff0c;同時保持性能。這種模式的核心思想是通過復制一個已存在的實例來創建新的實例&#xff0c;而不是新建實例并對其進行初始化。原型模式適…

jetson xavier NX深度學習環境配置

文章目錄 jetson xavier NX深度學習環境配置1. SD卡系統燒錄1.1 材料1.2 軟件配置1.3 格式化SD卡1.4 系統鏡像燒錄 2. 環境配置2.1 cuda環境配置2.2 安裝依賴庫2.3 安裝python及依賴環境2.4 安裝pytorch環境 jetson xavier NX深度學習環境配置 1. SD卡系統燒錄 1.1 材料 SD …

面試題 —— 前端精選(1)

文章目錄 前言 闡述 JS 的事件循環 JS 中的計時器能做到精確計時嗎&#xff1f;為什么&#xff1f; 如何理解 JS 的異步&#xff1f; 前言 本文章介紹三道圍繞 JavaScript 的精選面試題 闡述 JS 的事件循環 事件循環?叫做消息循環&#xff0c;是瀏覽器渲染主線程的?作?式…

CentOS虛擬機重置賬號密碼

虛擬機忘記密碼了 一般來說&#xff0c;虛擬機的賬號密碼&#xff0c;工作中都會有文檔記錄&#xff0c;如果忘記了可以查看文檔。但是也有特例&#xff0c;虛擬機的密碼沒有記錄到文檔中&#xff0c;嘗試了很多次依然登錄失敗&#xff0c;這時候就只能重置賬號密碼了。 1.重…

upload-labs關卡13(基于白名單的0x00截斷繞過)通關思路

文章目錄 前言一、回顧上一關知識點二、靶場第十三關通關思路1、看源代碼2、bp進行0x00截斷繞過3、蟻劍連接 總結 前言 此文章只用于學習和反思鞏固文件上傳漏洞知識&#xff0c;禁止用于做非法攻擊。注意靶場是可以練習的平臺&#xff0c;不能隨意去尚未授權的網站做滲透測試…

nginx中proxy_pass的配置

Nginx的官網將proxy_pass分為兩種類型&#xff1a; 不帶URI方式&#xff1a;只包含IP和端口號的&#xff0c;不帶uri&#xff08;單個/也算uri&#xff09;&#xff0c;比如proxy_pass http://localhost:8080&#xff1b;帶URI方式&#xff1a;在端口號之后有其他路徑的&#…

思維模型 潘多拉效應

本系列文章 主要是 分享 思維模型 &#xff0c;涉及各個領域&#xff0c;重在提升認知。越是禁止&#xff0c;越是好奇。 1 潘多拉效應的應用 1.1 潘多拉效應在管理中的應用 通用電氣公司曾經推出了一項名為“六西格瑪”的管理方法&#xff0c;該方法旨在通過優化業務流程和提…

Linux終端和命令行

文章目錄 學習Linux終端和命令行一、常用Linux命令的基本使用&#xff08;一&#xff09;放大/縮小終端窗口的字體顯示&#xff08;二&#xff09;自動補全 二、軟件安裝三、文件和目錄常用命令&#xff08;一&#xff09;ls&#xff1a;查看目錄內容1.ls命令說明2.Linux下文件…

Peter算法小課堂—前綴和數組的應用

桶 相當于計數排序&#xff0c;看一個視頻 桶排序 太戈編程1620題 算法解析 #include <bits/stdc.h> using namespace std; const int R11; int cnt[R];//cnt[t]代表第t天新增幾人 int s[R];//s[]數組是cnt[]數組的前綴和數組 int n,t; int main(){cin>>n;for(…

flutter 輸入框組件 高度問題

使用的組件名字為 TestField 組件 TestField 配置 占位文字 設置 decoration 屬性 InputDecoration 中hintText去掉輸入到 輸入框的間距 InputDecoration 中contentPadding EdgeInsets.zero去掉邊框中的間距 InputDecoration 中 使用 isDense:true設置輸入框內文字的顏色 …

Android 11.0 SystemUI 去掉狀態欄wifi流量上下行圖標功能實現

1.概述 在11.0系統定制rom開發中,在關于systemui的定制功能總,在SystemUI 狀態欄上顯示時鐘,電池電量 wifi圖標,在顯示wifi圖標時,網絡實時更新時,但是會時不時顯示上下行圖標 顯得很不美觀,客戶需求要求不顯示上下行圖標,所以需要去掉上下行圖標功能,接下來實現相關功能…

MATLAB算法實戰應用案例精講-【圖像處理】計算機視覺(基礎篇)(二)

目錄 知識儲備 opencv基礎知識 01 什么OpenCV 02 如何部署OpenCV? 03 OpenCV模塊簡介 04 OpenCV基本數據結構

Shell循環:for(一)

語法結構&#xff1a; for 變量名 [ in 取值列表] do 循環體 done 示例1&#xff1a; 1、需求&#xff1a;自動循環創建10個用戶 2、演示&#xff1a; [rootlocalhost ~]# vim for.sh #腳本編寫 #!/bin/bash for i in {1..10} do useradd "user$…

Linux進程通信之共享內存

文章目錄 共享內存原理申請共享內存函數&#xff08;shmget&#xff09;參數key生成key值示例申請共享內存 掛接到進程地址空間函數(shmat)去關聯函數(shmdt)控制共享內存(shmctl)IPC_STATIPC_RMID ipcs其余進程獲取該共享內存進程間通信 進程間通信&#xff1a;IPC&#xff0c…