資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用HTML和CSS建立動畫橫幅連結
概述
我們可以使用HTML和CSS建立動畫橫幅。HTML提供橫幅的佈局，CSS提供橫幅的樣式和動畫。有時，為廣告目的而製作的橫幅中會嵌入連結，因此為了突出顯示網頁使用者的連結，開發者會使連結動畫化，以便它在整個網頁內容中可見，從而增加使用者點選的興趣。
語法
在HTML中建立連結的語法為：
<a href="#"></a>
演算法
步驟1 − 在文字編輯器中建立一個HTML檔案，其中包含HTML基本結構。
步驟2 − 現在建立一個父div容器，其中包含帶有“bannerCover”類名的橫幅。
<div class="bannerCover"></div>
步驟3 − 現在建立一個子容器div，其中包含橫幅內容（例如連結和其他資料），並新增一個名為“banner”的類名。
<div class="banner"></div>
步驟4 − 現在使用HTML錨標籤將連結新增到橫幅。
<a href="https://tutorialspoint.tw">tutorialspoint</a>
步驟5 − 現在在同一個資料夾中建立一個style.css檔案，並將css檔案連結到HTML文件。
<link rel="stylesheet" href="style.css">
步驟6 − 現在定位HTML的每個元素來設定橫幅的樣式。
.bannerCover {
margin: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.banner{
box-shadow: 0 0 5px gray;
padding:2rem;
border-radius: 5px;
text-align: center;
}
步驟7 − 定位錨標籤元素，並使用animation屬性來為連結製作動畫。
a {
text-decoration: none;
font-weight: 800;
font-size: 2rem;
color: green;
padding: 0 2rem;
animation: zoomup 1s linear alternate infinite;
}
步驟8 − 使用關鍵幀來製作動畫橫幅連結。
@keyframes zoomup{
0%{
font-size: 2rem;
}
25%{
font-size: 2rem;
}
50%{
font-size: 1.8rem;
border-radius: 5px;
padding: 0.2rem 0.5rem;
color: white;
background-color: red;
}
75%{
font-size: 1.8rem;
border-radius: 5px;
padding: 0.2rem 0.5rem;
color: white;
background-color: red;
}
100%{
font-size: 1.8rem;
border-radius: 5px;
padding: 0.2rem 0.5rem;
color: white;
background-color: red;
}
}
步驟9 − 動畫連結建立成功。
示例
在上面的示例中，我們建立了一個動畫橫幅連結。為此，我們建立了兩個檔案：index.html和stye.css。
<html>
<head>
<title> animated banner links</title>
<link rel="stylesheet" href="style.css">
<style>
.bannerCover {
margin: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.banner{
box-shadow: 0 0 5px gray;
padding:2rem;
border-radius: 5px;
text-align: center;
}
a {
text-decoration: none;
font-weight: 800;
font-size: 2rem;
color: green;
padding: 0 2rem;
animation: zoomup 1s linear alternate infinite;
}
@keyframes zoomup{
0%{
font-size: 2rem;
}
25%{
font-size: 2rem;
}
50%{
font-size: 1.8rem;
border-radius: 5px;
padding: 0.2rem 0.5rem;
color: white;
background-color: red;
}
75%{
font-size: 1.8rem;
border-radius: 5px;
padding: 0.2rem 0.5rem;
color: white;
background-color: red;
}
100%{
font-size: 1.8rem;
border-radius: 5px;
padding: 0.2rem 0.5rem;
color: white;
background-color: red;
}
}
</style>
</head>
<body>
<div class="bannerCover">
<div class="banner">
<a href="https://tutorialspoint.tw">tutorialspoint</a>
<p>(Click the above text to redirect to above page.)</p>
</div>
</div>
</body>
</html>
下圖顯示了上述示例的輸出，預設情況下連結的顏色為白色。下圖中，橫幅中有一段文字“tutorialspoint”，因此當用戶將此功能載入到瀏覽器並點選紅色背景內容時，它會將使用者重定向到連結的網頁。橫幅中的連結是動畫的，會在一段時間內放大和縮小。
結論
由於我們在上面的示例中使用了動畫內容，因此CSS的animation屬性中的名稱和關鍵幀中的動畫名稱必須相同才能對特定元素執行動畫，否則動畫將不會發生。
更新於：2023年5月9日
5000+ 瀏覽量
廣告