第13天 - 16天搞定前端，CSS的動畫效果，酷

以往，想在HTML上實現動畫效果，要不就用被喬布斯恨死的了Flash 動畫，要不就用網頁動畫圖像或者JavaScript 實現效果。在CSS3之后，就可以用CSS在HTML上實現動畫了。

要創建 CSS3 動畫，你需要了解 @keyframes 規則。現在 @keyframes 創建動畫時，需將其綁定到一個選擇器，否則動畫不會有任何效果。

13.1 原生創建動畫

用CSS3原生代碼創建動畫，語法是@keyframes animationname {keyframes-selector {css-styles;}}，其中animationname ：必需，動畫的名稱；

keyframes-selector：必需，動畫時長的百分比合法的值：0-100%， from（與 0% 相同），to（與 100% 相同）
css-styles：必需，一個或多個合法的 CSS 樣式屬性。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>動起來</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            animation: myfirst 5s;
            -webkit-animation: firstan 5s; /* Safari and Chrome */
        }

        @keyframes firstan {
            0% {
                background: red;
                left: 0px;
                top: 0px;
            }
            25% {
                background: yellow;
                left: 200px;
                top: 0px;
            }
            50% {
                background: blue;
                left: 200px;
                top: 200px;
            }
            75% {
                background: green;
                left: 0px;
                top: 200px;
            }
            100% {
                background: red;
                left: 0px;
                top: 0px;
            }
        }

        @-webkit-keyframes myfirst /* Safari and Chrome */
        {
            0% {
                background: red;
                left: 0px;
                top: 0px;
            }
            25% {
                background: yellow;
                left: 200px;
                top: 0px;
            }
            50% {
                background: blue;
                left: 200px;
                top: 200px;
            }
            75% {
                background: green;
                left: 0px;
                top: 200px;
            }
            100% {
                background: red;
                left: 0px;
                top: 0px;
            }
        }
    </style>
</head>
<body>
<div/>
</body>
</html>

輸出結果

13.2 動畫庫創建

如果每次都要自己手動用CSS去創建動畫，那效果太低了。為此，有人專門專門開發了CSS動畫庫animation.css。可以在線https://animate.stylek看效果，它里面的動畫效果，可以滿足大多數需求了。下載https://github.com/animate-css/animate.css里的animate.min.css文件，放到HTML文件相同目錄下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用動畫庫實現動畫</title>
    <link rel="stylesheet" type="text/css" href="animate.min.css"/>
</head>
<body>
<main class="animate__animated animate__fadeInLeft">
    老陳說編程，動畫效果行
</main>
</body>
</html>

輸出結果

好了，有關CSS動畫效果的內容，老陳講完了，如果覺得對你有所幫助，希望老鐵能轉發點贊，讓更多的人看到這篇文章。你的轉發和點贊，就是對老陳繼續創作和分享最大的鼓勵。

一個當了10年技術總監的老家伙，分享多年的編程經驗。想學編程的朋友，可關注：老陳說編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關注我，沒錯的。

#前端##HTML5##CSS##程序員##Web#

索 HTML 圖像的不同概念，以及如何有效地使用它們在您的網站上增加視覺吸引力、傳達信息和表達情感。本指南包含大量示例和實用技巧，可幫助您創建一個視覺效果驚人且用戶友好的網站。

圖像是網頁設計師和開發人員的強大工具，它們可用于傳達信息、表達情感并使網站更具視覺吸引力。 HTML 圖像概念是網頁設計和開發的重要方面。它們用于將圖像嵌入到網頁中，以便于顯示和共享圖片和圖形。在這篇博文中，我們將探討 HTML 圖像的不同概念以及如何有效地使用它們。

首先，讓我們談談不同類型的 HTML 圖像。有兩種主要類型的圖像：內嵌圖像和背景圖像。內聯圖像直接嵌入到 HTML 代碼中，而背景圖像則應用于元素的背景。

1 | 內聯圖像

在此示例中，內聯圖像“image.jpg”直接嵌入到 HTML 代碼中并顯示給用戶。

2 | 背景圖片

在此示例中，背景圖像“image.jpg”應用于 div 元素的背景并顯示給用戶。

3 | 替代 (alt) 文本

以合乎邏輯且一致的方式使用圖像也很重要。這意味著您應該使用它們來傳達與網頁內容相關的信息或表達情感，而不是隨意使用它們。此外，使用 alt 屬性為圖像添加文本替代也很重要，它允許可能使用屏幕閱讀器的用戶訪問圖像，或者以防圖像加載失敗。

在此示例中，替代文本“日落的美麗圖像”讓用戶清楚地了解圖像所代表的內容。

4 | 調整圖像大小

另一個 HTML 圖像概念是使用寬度和高度屬性調整圖像大小的能力。這些屬性允許您調整圖像大小以適合您的布局和設計。

在此示例中，圖像的寬度設置為 300 像素，圖像的高度設置為 200 像素。

結論

HTML 圖像概念是網頁設計和開發的重要方面。它們用于將圖像嵌入到網頁中，以便于顯示和共享圖片和圖形。通過了解不同類型的圖像并正確使用它們，您可以為您的網站增加額外的視覺吸引力，并以有力的方式傳達信息或表達情感。無論是使用內聯圖片還是背景圖片，添加替代文本或調整大小，這些概念都是創建視覺效果驚人且用戶友好的網站的關鍵。

但不要只相信我們的話，您自己試試吧！嘗試使用 HTML 圖像，看看它們如何增強您網站的整體外觀。通過每一行代碼，您離創建一個您的訪問者會喜歡的美觀且引人入勝的網站又近了一步。請記住，圖像具有喚起情感和傳達信息的力量，因此請明智地使用它們并將它們作為您網頁設計策略的重要組成部分。通過正確組合 HTML 和圖像，您將創建一個脫穎而出并給訪問者留下持久印象的網站。

我們在開發網站時，一般會在圖片上加一個過光效果，目的是為了，讓用戶明白我的鼠標移動到這里了，同時還能增加網頁上的美觀效果。下面是它的實現基礎代碼，大家可以看看了解了解。

html部分

<div class="box">
<div class="light">
</div>
</div>

創建一個box,包裹一個light

css部分

*{
padding: 0;
margin: 0;
}
html{
display: flex;
justify-content: center;
}
.box{
position: relative;
margin-top: 30px;
width: 300px;
height: 200px;
background-color: green;
overflow: hidden;
}
.light{
content: '';
display: block;
position: absolute;
top: -20%;
left: -100%;
width: 350px;
height: 100px;
transform: rotate(-45deg);
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0));
/* 過度實現部分 */
/* transition: 0.8s; */
}
.box:hover .light{
/* 過度實現部分 */
/* transform: translate(200%,200%) rotate(-45deg); */
animation: cross 0.5s;
}
@keyframes cross{
from{
}
to{
top: 80%;
left: 100%;
transform: rotate(-45deg);v
}
}

想要通過過度效果實現的同學，將動畫效果注釋掉，釋放過度部分的注釋就可以了。

實現原理

將ligth盒子設置為寬350px,高100px的長方形，通過添加漸變實現光影效果，再將其逆時針旋轉45度定位于box盒子的左上方，然后通過“動畫”或者“過度”效果使其向右下方移動。（動畫效果在鼠標離開box的時候，會有一個光影返回去的效果。）

在線咨詢

上一篇：HTML5從入門到精通，零基礎學員必看
下一篇：html實現點擊圖片放大功能

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商