搜尋
首頁web前端css教學教你用CSS繪製標準的圓形圖案
教你用CSS繪製標準的圓形圖案May 22, 2017 am 11:26 AM
圓形純css

我曾經跟大家分享了一個非常巧妙的用純CSS畫三角形的技巧(請見相關文章)。在過去的一年裡,我發現這種用CSS畫三角形的技術非常的有用和高效,尤其是創建提示框/提示符等類似的網頁效果。

另外一種也可以用CSS簡單的實現的形狀是圓形。使用border-radius,你可以畫出各種漂亮的圓形圖案。



CSS程式碼

只需要將你的網頁元素的每個邊的border-radius甚至成50%,你就能得到任意大小的圓:

程式碼如下:

.circle {
 border-radius: 50%;
 width: 200px;
 height: 200px; 
 /* 宽度和高度需要相等 */
}

這確實是非常的簡單,但我們無法抵擋在之上使用CSS漸層和基本旋轉動畫的誘惑::

程式碼如下:

/* 動畫定義*/

@
key
frames spin {
 from { trans
form: rotate(0deg); }
 to { transform: rotate(360deg); }
}</p>
<p>/* 旋转,渐变色 */
#advanced {
 width: 200px;
 height: 200px;</p>
<p> 
background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
 background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
 background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);</p>
<p> animation-name: spin; 
 animation-duration: 3s; /* 3 seconds */
 animation-iteration-count: infinite; 
 animation-timing-function: linear;
}


哇塞,這就是這個漂亮的CSS圓形了!

用CSS畫圓的技術初看起來不像CSS畫三角技術那麼有用,但在頁面設計中仍然不乏它的價值。你可以在頁面載入時使用動畫圓表現loading…,怎麼用,這要看你的創意了。你有好的創意嗎?

【相關推薦】

1. CSS3免費影片教學

2. CSS3完成一個方框圓角效果的程式碼教學

3. 教你怎麼去規範的書寫CSS樣式

4. 關於H5和CSS3表單驗證的使用教學

5. 透過CSS3偽元素完成逐漸發光的邊框的程式碼詳解

以上是教你用CSS繪製標準的圓形圖案的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
ppt怎么做圆形的图片和文字ppt怎么做圆形的图片和文字Mar 26, 2024 am 10:23 AM

首先,在 PPT 中绘制一个圆圈,然后插入一个文本框,输入文字内容。最后,设置文本框的填充和轮廓为无,即可完成圆形图片和文字的制作。

ppt怎么做圆形的图片ppt怎么做圆形的图片Mar 25, 2024 pm 03:54 PM

ppt做圆形的图片的方法:1、使用裁剪功能;2、使用形状工具;3、使用快捷键和控点调节。

如何通过纯CSS实现图片平滑过渡的方法和技巧如何通过纯CSS实现图片平滑过渡的方法和技巧Oct 18, 2023 am 08:15 AM

如何通过纯CSS实现图片平滑过渡的方法和技巧引言:在网页设计中,图片的使用是非常常见的,如何让图片在切换和加载过程中呈现出平滑的过渡效果,让用户体验更加流畅,是每个设计师和开发者都要考虑的问题。本文将介绍一些通过纯CSS来实现图片平滑过渡的方法和技巧,并提供具体的代码示例。一、缩放过渡效果可以使用CSS的transform属性来实现图片的缩放过渡效果。通过设

圆扇形的面积是多少?圆扇形的面积是多少?Aug 30, 2023 am 08:33 AM

圆扇形,也称为圆扇区/圆的扇区,是由两个半径之间的弧线所围成的圆的一部分。这个区域被两个半径和一个弧线所包围。为了找到内切的面积,我们需要找到两个半径之间的角度。总面积等于360度的角度。为了找到一个角度的面积,我们将面积乘以θ/360。这给出了内切部分的面积。其中θ是两个半径之间的角度(以度为单位)。圆扇形的面积=π*r*r*(θ/360)。示例半径为5,角度为60度的圆扇形的面积为13.083。面积=(3.14*5*5)*(60/360)=13.03示例代码&nbsp;演示#incl

CSS布局技巧:实现圆形网格图标布局的最佳实践CSS布局技巧:实现圆形网格图标布局的最佳实践Oct 20, 2023 am 10:46 AM

CSS布局技巧:实现圆形网格图标布局的最佳实践在现代网页设计中,网格布局是一种常见且强大的布局技术。而圆形网格图标布局则是一种更加独特和有趣的设计选择。本文将介绍一些最佳实践和具体代码示例,帮助你实现圆形网格图标布局。HTML结构首先,我们需要设置一个容器元素,在这个容器里放置图标。我们可以使用一个无序列表(&lt;ul&gt;)作为容器,列表项(&lt;l

纯CSS实现响应式导航栏的下拉选项卡菜单效果的实现步骤纯CSS实现响应式导航栏的下拉选项卡菜单效果的实现步骤Oct 28, 2023 am 09:58 AM

纯CSS实现响应式导航栏的下拉选项卡菜单效果的实现步骤导航栏是网页中常见的元素之一,而下拉选项卡菜单则是导航栏中经常使用的一种效果,能够提供更多的导航选项。本文将介绍如何使用纯CSS实现一个响应式的导航栏下拉选项卡菜单效果。步骤一:搭建基础HTML结构我们首先需要搭建一个基础的HTML结构来进行演示,并且为这个导航栏添加一些样式。下面是一个简单的HTML结构

如何通过纯CSS实现图片的放大缩小效果的方法和技巧如何通过纯CSS实现图片的放大缩小效果的方法和技巧Oct 24, 2023 am 10:13 AM

如何通过纯CSS实现图片的放大缩小效果的方法和技巧在现代的网页设计中,图片的展示和处理是非常重要的一部分。而图片的放大缩小效果可以为网站的视觉呈现增添趣味和交互性。在这篇文章中,我们将介绍如何通过纯CSS实现图片的放大缩小效果,并提供具体的代码示例。使用transition属性实现平滑的过渡效果要实现图片的放大缩小效果,我们可以使用transition属性来

如何通过纯CSS实现图片的立方体转动效果的方法和技巧如何通过纯CSS实现图片的立方体转动效果的方法和技巧Oct 21, 2023 am 09:36 AM

如何通过纯CSS实现图片的立方体转动效果的方法和技巧在现代网页设计中,添加一些炫酷的效果是非常重要的,而利用CSS实现立方体转动效果是一个非常有趣而具有挑战性的任务。本文将介绍一种通过纯CSS实现图片的立方体转动效果的方法和技巧,并提供一些具体的代码示例。首先,我们需要一个基本的HTML结构,包含一个容器元素和六个面元素,每个面元素都包含一张图片。&lt;d

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版