CSS- 4.6 radiu、shadow、animation動畫

本系列可作為前端學習系列的筆記,代碼的運行環境是在HBuilder中,小編會將代碼復制下來,大家復制下來就可以練習了,方便大家學習。

HTML系列文章?已經收錄在前端專欄,有需要的寶寶們可以點擊前端專欄查看!

點贊關注不迷路!您的點贊、關注和收藏是對小編最大的支持和鼓勵!

系列文章目錄

CSS- 1.1 css選擇器

CSS- 2.1 實戰之圖文混排、表格、表單、學校官網一級導航欄

CSS- 3.1 盒子模型-塊級元素、行內元素、行內塊級元素和display屬性

CSS- 4.1 浮動(Float)

CSS- 4.2 相對定位(position: relative)

CSS- 4.3 絕對定位(position: absolute)&學校官網導航欄實例

CSS- 4.4 固定定位(fixed)& 咖啡售賣官網實例

CSS- 4.5 css + div 布局 & 簡易網易云音樂 官網布置實例?

CSS- 4.6 radiu、shadow、animation動畫

CSS-5.1 Transition 過渡?


目錄

系列文章目錄

前言

一、CSS 高級特性:圓角、陰影與動畫

1.圓角 (border-radius)

基本語法

特殊值

示例

2.陰影 (box-shadow & text-shadow)

盒子陰影 (box-shadow)

文本陰影 (text-shadow)

示例

3.動畫 (animation)

關鍵概念

基本語法

簡寫屬性

常用動畫屬性值

示例

結合使用示例

二、代碼實例

1.? radiu+shadow代碼實例如下:

2. animation動畫 代碼如下:

總結


前言

小編作為新晉碼農一枚,會定期整理一些寫的比較好的代碼,作為自己的學習筆記,會試著做一下批注和補充,如轉載或者參考他人文獻會標明出處,非商用,如有侵權會刪改!歡迎大家斧正和討論!

一、CSS 高級特性:圓角、陰影與動畫

1.圓角 (border-radius)

border-radius?屬性用于為元素添加圓角效果,可以創建從輕微圓角到完全圓形的各種效果。

基本語法

css

.element {border-radius: 10px; /* 四個角相同 */border-radius: 10px 20px; /* 左上右下/右上左下 */border-radius: 10px 20px 30px 40px; /* 左上 右上 右下 左下 */
}

特殊值

  • 50%:創建圓形(當元素是正方形時)
  • 100%:創建橢圓形

示例

css

.button {border-radius: 25px; /* 輕微圓角按鈕 */
}.circle {width: 100px;height: 100px;border-radius: 50%; /* 圓形 */
}

2.陰影 (box-shadow & text-shadow)

盒子陰影 (box-shadow)

為元素添加陰影效果,增強立體感。

css

.element {box-shadow: h-offset v-offset blur spread color inset;
}
  • h-offset:水平偏移(必需)
  • v-offset:垂直偏移(必需)
  • blur:模糊半徑(可選)
  • spread:陰影擴展(可選)
  • color:陰影顏色(可選)
  • inset:內部陰影(可選)

文本陰影 (text-shadow)

為文本添加陰影效果。

css

.text {text-shadow: h-offset v-offset blur color;
}

示例

css

.card {box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 輕微浮動效果 */
}.highlight {text-shadow: 2px 2px 4px #000000; /* 文字突出效果 */
}.inset-shadow {box-shadow: inset 0 0 10px rgba(0,0,0,0.2); /* 內部凹陷效果 */
}

3.動畫 (animation)

CSS 動畫允許在不使用 JavaScript 的情況下創建復雜的動畫效果。

關鍵概念

  1. @keyframes:定義動畫序列
  2. animation-name:指定 @keyframes 名稱
  3. animation-duration:動畫持續時間
  4. animation-timing-function:速度曲線
  5. animation-delay:動畫開始前的延遲
  6. animation-iteration-count:播放次數
  7. animation-direction:播放方向
  8. animation-fill-mode:動畫前后樣式
  9. animation-play-state:播放狀態

基本語法

css

@keyframes slidein {from {transform: translateX(0%);}to {transform: translateX(100%);}
}.element {animation-name: slidein;animation-duration: 3s;animation-timing-function: ease-in-out;animation-delay: 1s;animation-iteration-count: infinite;animation-direction: alternate;
}

簡寫屬性

css

.element {animation: slidein 3s ease-in-out 1s infinite alternate;
}

常用動畫屬性值

  • timing-function
    • ease(默認)
    • linear
    • ease-in
    • ease-out
    • ease-in-out
    • cubic-bezier(n,n,n,n)
  • direction
    • normal(默認)
    • reverse
    • alternate
    • alternate-reverse

示例

css

/* 淡入效果 */
@keyframes fadeIn {from { opacity: 0; }to { opacity: 1; }
}.fade-in {animation: fadeIn 1s ease-in;
}/* 旋轉動畫 */
@keyframes spin {from { transform: rotate(0deg); }to { transform: rotate(360deg); }
}.spinner {animation: spin 2s linear infinite;
}/* 彈跳球 */
@keyframes bounce {0%, 100% { transform: translateY(0); }50% { transform: translateY(-20px); }
}.ball {animation: bounce 1s ease infinite;
}

結合使用示例

css

.fancy-button {border-radius: 25px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);animation: pulse 2s infinite;
}@keyframes pulse {0% {box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.4);}70% {box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);}100% {box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);}
}

這些 CSS 特性可以單獨使用,也可以組合使用,為網頁元素添加豐富的視覺效果和交互體驗。

二、代碼實例

1.? radiu+shadow代碼實例如下:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css3-radiu+shadow</title><style type="text/css">.div1 {width: 400px;height: 100px;border: 1px solid black;/* 取一個值為四個角為30px半徑的圓 *//* 取兩個值第一個值為左上右下的半徑值 右上左下的半徑值 *//* border-radius: 30px; *//* 某一個角的時候 第一個值代表水平半徑 第二個值為垂直半徑 */border-top-left-radius: 30px 50px;}.div2 {width: 100px;height: 100px;background-color: #CCCCCC;border-radius: 50px;}.div3 {width: 400px;height: 100px;background-color: #f90;box-shadow: 5px 5px 5px #868686;}h1 {text-shadow: 2px 2px 2px lawngreen;}</style></head><body><h1>border-radius 圓角邊框或背景圓角</h1><div class="div1"></div><div class="div2"></div><h1>陰影 box-shadow text-shadow</h1><p>陰影默認為右下方,可以通過設置水平偏移為負值改變陰影的方向</p><div class="div3"></div></body>
</html>

代碼運行:

2. animation動畫 代碼如下:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css3-animation動畫</title><style type="text/css">div {position: absolute;width: 300px;height: 300px;border: 1px solid black;border-radius: 30px;text-align: center;line-height: 300px;font-size: 24px;}@keyframes donghua1 {10% {background-color: red;left: 0px;}30% {background-color: yellow;font-size: 40px;}60% {background-color: green;color: white;}90% {background-color: blue;left: 300px;}}div:hover {animation: donghua1 5s infinite;}</style></head><body><h1>動畫animation</h1><p>第一步創造一個動畫</p><p>第二步調用動畫 時間 動作</p><div>這是一個動畫</div></body>
</html>

動畫變化如下:


總結

以上就是今天要講的內容,本文簡單記錄了radiu、shadow、animation動畫,僅作為一份簡單的筆記使用,大家根據注釋理解

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

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

相關文章

排序算法之基礎排序:冒泡,選擇,插入排序詳解

排序算法之基礎排序&#xff1a;冒泡、選擇、插入排序詳解 前言一、冒泡排序&#xff08;Bubble Sort&#xff09;1.1 算法原理1.2 代碼實現&#xff08;Python&#xff09;1.3 性能分析 二、選擇排序&#xff08;Selection Sort&#xff09;2.1 算法原理2.2 代碼實現&#xff…

第十節第一部分:常見的API:Math、System、Runtime

Math類介紹及常用方法&#xff08;了解知道即可&#xff09; System類介紹及常用方法&#xff08;了解知道即可&#xff09; Runtime類介紹及常用方法&#xff08;了解知道即可&#xff09; 代碼&#xff1a; 代碼一&#xff1a;Math類 package com.itheima.d14_math;public …

智能體間協作的“巴別塔困境“如何破解?解讀Agent通信4大協議:MCP/ACP/A2A/ANP

AI 智能體的興起觸發了AI應用協作的新領域。這些智能體不再局限于被動的聊天機器人或獨立的系統&#xff0c;它們現在被設計用于推理、計劃和協作ーー跨任務、跨域甚至跨組織。但隨著這一愿景成為現實&#xff0c;一個挑戰很快浮出水面&#xff1a; 智能體如何以一種安全、可伸…

項目進度延誤,如何按時交付?

項目進度延誤可以通過加強計劃管理、優化資源分配、強化團隊溝通、設置關鍵里程碑和風險管理機制等方式來實現按時交付。加強計劃管理、優化資源分配、強化團隊溝通、設置關鍵里程碑、風險管理機制。其中&#xff0c;加強計劃管理尤為關鍵&#xff0c;因為明確而詳細的計劃能提…

詳解ip地址、子網掩碼、網關、廣播地址

1. IP 地址 定義&#xff1a;IP 地址是網絡設備在網絡中的唯一標識&#xff0c;用于標識設備的網絡位置&#xff0c;類似于現實中的門牌號。它分為 IPv4&#xff08;如 192.168.1.5&#xff09;和 IPv6&#xff08;如 240e:305:3685:8100:a00:27ff:fefb:56b8&#xff09;。 示…

為 Windows 和 Ubuntu 中設定代理服務器的詳細方法

有時下載大模型總是下載不出來&#xff0c;要配置代理才行 一、Windows代理設置 ① 系統全局代理設置 打開【設置】→【網絡和Internet】→【代理】。 在【手動設置代理】下&#xff0c;打開開關&#xff0c;輸入&#xff1a; 地址&#xff1a;10.10.10.215 端口&#xff1a;…

鴻蒙OSUniApp 實現的表單驗證與提交功能#三方框架 #Uniapp

UniApp 實現的表單驗證與提交功能 前言 在移動端應用開發中&#xff0c;表單是用戶與應用交互的重要媒介。一個好的表單不僅布局合理、使用方便&#xff0c;還應該具備完善的驗證與提交功能&#xff0c;以確保用戶輸入的數據準確無誤。本文將分享如何在 UniApp 中實現表單驗證…

前端的面試筆記——HTMLJavaScript篇(二)前端頁面性能檢測

前端頁面性能檢測和判定是優化用戶體驗的核心環節&#xff0c;需要結合實驗室數據&#xff08;Lab Data&#xff09;、現場數據&#xff08;Field Data&#xff09;和行業標準綜合評估。以下是主流方法、工具及判定標準的詳細解析&#xff1a; 一、性能檢測的核心維度與指標 …

再來1章linux系列-19 防火墻 iptables 雙網卡主機的內核 firewall-cmd firewalld的高級規則

學習目標&#xff1a; 實驗實驗需求實驗配置內容和分析 &#xff08;每一個設備的每一步操作&#xff09;實驗結果驗證其他 學習內容&#xff1a; 實驗實驗需求實驗配置內容和分析 &#xff08;每一個設備的每一步操作&#xff09;實驗結果驗證其他 1.實驗 2.實驗需求 圖…

LLM-Based Agent綜述及其框架學習(五)

文章目錄 摘要Abstract1. 引言2. 文本輸出3. 工具的使用3.1 理解工具3.2 學會使用工具3.3 制作自給自足的工具3.4 工具可以擴展LLM-Based Agent的行動空間3.5 總結 4. 具身動作5. 學習智能體框架5.1 CrewAI學習進度5.2 LangGraph學習進度5.3 MCP學習進度 參考總結 摘要 本文圍繞…

游戲引擎學習第298天:改進排序鍵 - 第1部分

關于向玩家展示多個房間層所需的兩種 Z 值 我們在前一天基本完成了為渲染系統引入分層 Z 值的工作&#xff0c;但還沒有完全完成所有細節。我們開始引入圖形渲染中的分層概念&#xff0c;即在 Z 軸方向上擁有多個獨立圖層&#xff0c;每個圖層內部再使用一個單獨的 Z 值來實現…

一些C++入門基礎

關鍵字 圖引自 C 關鍵詞 - cppreference.com 命名空間 命名空間解決了C沒辦法解決的各類命名沖突問題 C的標準命名空間&#xff1a;std 命名空間中可以定義變量、函數、類型&#xff1a; namespace CS {//變量char cs408[] "DS,OS,JW,JZ";int cs 408;//函數vo…

學習筆記:黑馬程序員JavaWeb開發教程(2025.4.6)

12.4 登錄校驗-JWT令牌-介紹 JWT&#xff08;JSON Web Token&#xff09; 簡潔是指JWT是一個簡單字符串&#xff0c;自包含指的是JWT令牌&#xff0c;看似是一個隨機字符串&#xff0c;但是可以根據需要&#xff0c;自定義存儲內容 Header是JSON數據格式&#xff0c;原始JSO…

香港科技大學物理學理學(科學計算與先進材料物理與技術)碩士招生宣講會——深圳大學

香港科技大學物理學理學&#xff08;科學計算與先進材料物理與技術&#xff09;碩士招生宣講會——深圳大學專場 &#x1f559;時間&#xff1a;2025年5月23日&#xff08;星期五&#xff09;14:30 &#x1f3eb;地點&#xff1a;深圳大學滄海校區致原樓1101 &#x1f9d1…

數據庫優化技巧:MySQL 重復數據查詢與刪除(僅保留一條)的性能優化策略

目錄 一、查詢重復數據 二、刪除重復數據 方法 1&#xff1a;創建臨時表&#xff0c;操作完成后再刪除臨時表&#xff08;安全可靠&#xff0c;適合大表&#xff09; 步驟 1&#xff1a;創建臨時表存儲需刪除的 ID 步驟 2&#xff1a;根據臨時表刪除數據 方法 2&#xff1a…

分布式ID生成器:原理、對比與WorkerID實戰

一、為什么需要分布式ID&#xff1f; 在微服務架構下&#xff0c;單機自增ID無法滿足跨服務唯一性需求&#xff0c;且存在&#xff1a; ? 單點瓶頸&#xff1a;數據庫自增ID依賴單表寫入 ? 全局唯一性&#xff1a;跨服務生成可能重復 ? 擴展性差&#xff1a;分庫分表后ID規…

Golang的代碼注釋規范與實踐

# Golang的代碼注釋規范與實踐 一、注釋的重要性 代碼注釋是程序員交流的橋梁 代碼注釋是程序員之間溝通交流的重要形式&#xff0c;良好的注釋能夠幫助其他開發者更快地理解代碼的意圖和實現方式。 代碼維護離不開注釋 在項目維護過程中&#xff0c;良好的注釋能夠幫助開發者回…

Qt讀取Excel文件的技術實現與最佳實踐

目錄 一、成果展示二、核心方法及原理1. QAxObject(基于COM接口)2. 第三方庫QXlsx3. ODBC數據庫驅動三、實現步驟詳解1. QAxObject讀取Excel(需安裝Excel/WPS)2. QXlsx讀取Excel(跨平臺方案)四、技術選型與對比五、應用場景與優化建議1. 高頻數據處理2. 跨平臺工具開發3.…

機器學習第十五講:決策樹全面講解:像玩“20個問題“游戲猜身份[特殊字符]

機器學習第十五講&#xff1a;決策樹全面講解&#xff1a;像玩"20個問題"游戲猜身份&#x1f3ae; 資料取自《零基礎學機器學習》。 查看總目錄&#xff1a;學習大綱 關于DeepSeek本地部署指南可以看下我之前寫的文章&#xff1a;DeepSeek R1本地與線上滿血版部署&…

CCpro工程編程軟件

CXpro?? 是一個軟件應用套件&#xff0c;用以完成 ABB Cylon CB 系列 BACnet 控制器的設計、工程、編程、配置、測試、調試和維護。 主要優勢 CXpro?? 提供改進的導航和頁面命名&#xff0c;使開發人員能夠輕松地圍繞大型策略進行操作。它也允許立即訪問可快速更新的點和…