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+》。