第13天 - 16天搞定前端，CSS的動(dòng)畫效果，酷

以往，想在HTML上實(shí)現(xiàn)動(dòng)畫效果，要不就用被喬布斯恨死的了Flash 動(dòng)畫，要不就用網(wǎng)頁(yè)動(dòng)畫圖像或者JavaScript 實(shí)現(xiàn)效果。在CSS3之后，就可以用CSS在HTML上實(shí)現(xiàn)動(dòng)畫了。

要?jiǎng)?chuàng)建 CSS3 動(dòng)畫，你需要了解 @keyframes 規(guī)則。現(xiàn)在 @keyframes 創(chuàng)建動(dòng)畫時(shí)，需將其綁定到一個(gè)選擇器，否則動(dòng)畫不會(huì)有任何效果。

13.1 原生創(chuàng)建動(dòng)畫

用CSS3原生代碼創(chuàng)建動(dòng)畫，語(yǔ)法是@keyframes animationname {keyframes-selector {css-styles;}}，其中animationname ：必需，動(dòng)畫的名稱；

keyframes-selector：必需，動(dòng)畫時(shí)長(zhǎng)的百分比合法的值：0-100%， from（與 0% 相同），to（與 100% 相同）
css-styles：必需，一個(gè)或多個(gè)合法的 CSS 樣式屬性。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>動(dòng)起來(lái)</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>

輸出結(jié)果

13.2 動(dòng)畫庫(kù)創(chuàng)建

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用動(dòng)畫庫(kù)實(shí)現(xiàn)動(dòng)畫</title>
    <link rel="stylesheet" type="text/css" href="animate.min.css"/>
</head>
<body>
<main class="animate__animated animate__fadeInLeft">
    老陳說(shuō)編程，動(dòng)畫效果行
</main>
</body>
</html>

輸出結(jié)果

好了，有關(guān)CSS動(dòng)畫效果的內(nèi)容，老陳講完了，如果覺(jué)得對(duì)你有所幫助，希望老鐵能轉(zhuǎn)發(fā)點(diǎn)贊，讓更多的人看到這篇文章。你的轉(zhuǎn)發(fā)和點(diǎn)贊，就是對(duì)老陳繼續(xù)創(chuàng)作和分享最大的鼓勵(lì)。

一個(gè)當(dāng)了10年技術(shù)總監(jiān)的老家伙，分享多年的編程經(jīng)驗(yàn)。想學(xué)編程的朋友，可關(guān)注：老陳說(shuō)編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關(guān)注我，沒(méi)錯(cuò)的。

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

索 HTML 圖像的不同概念，以及如何有效地使用它們?cè)谀木W(wǎng)站上增加視覺(jué)吸引力、傳達(dá)信息和表達(dá)情感。本指南包含大量示例和實(shí)用技巧，可幫助您創(chuàng)建一個(gè)視覺(jué)效果驚人且用戶友好的網(wǎng)站。

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

首先，讓我們談?wù)劜煌愋偷?HTML 圖像。有兩種主要類型的圖像：內(nèi)嵌圖像和背景圖像。內(nèi)聯(lián)圖像直接嵌入到 HTML 代碼中，而背景圖像則應(yīng)用于元素的背景。

1 | 內(nèi)聯(lián)圖像

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

2 | 背景圖片

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

3 | 替代 (alt) 文本

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

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

4 | 調(diào)整圖像大小

另一個(gè) HTML 圖像概念是使用寬度和高度屬性調(diào)整圖像大小的能力。這些屬性允許您調(diào)整圖像大小以適合您的布局和設(shè)計(jì)。

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

結(jié)論

HTML 圖像概念是網(wǎng)頁(yè)設(shè)計(jì)和開發(fā)的重要方面。它們用于將圖像嵌入到網(wǎng)頁(yè)中，以便于顯示和共享圖片和圖形。通過(guò)了解不同類型的圖像并正確使用它們，您可以為您的網(wǎng)站增加額外的視覺(jué)吸引力，并以有力的方式傳達(dá)信息或表達(dá)情感。無(wú)論是使用內(nèi)聯(lián)圖片還是背景圖片，添加替代文本或調(diào)整大小，這些概念都是創(chuàng)建視覺(jué)效果驚人且用戶友好的網(wǎng)站的關(guān)鍵。

但不要只相信我們的話，您自己試試吧！嘗試使用 HTML 圖像，看看它們?nèi)绾卧鰪?qiáng)您網(wǎng)站的整體外觀。通過(guò)每一行代碼，您離創(chuàng)建一個(gè)您的訪問(wèn)者會(huì)喜歡的美觀且引人入勝的網(wǎng)站又近了一步。請(qǐng)記住，圖像具有喚起情感和傳達(dá)信息的力量，因此請(qǐng)明智地使用它們并將它們作為您網(wǎng)頁(yè)設(shè)計(jì)策略的重要組成部分。通過(guò)正確組合 HTML 和圖像，您將創(chuàng)建一個(gè)脫穎而出并給訪問(wèn)者留下持久印象的網(wǎng)站。

我們?cè)陂_發(fā)網(wǎng)站時(shí)，一般會(huì)在圖片上加一個(gè)過(guò)光效果，目的是為了，讓用戶明白我的鼠標(biāo)移動(dòng)到這里了，同時(shí)還能增加網(wǎng)頁(yè)上的美觀效果。下面是它的實(shí)現(xiàn)基礎(chǔ)代碼，大家可以看看了解了解。

html部分

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

創(chuàng)建一個(gè)box,包裹一個(gè)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));
/* 過(guò)度實(shí)現(xiàn)部分 */
/* transition: 0.8s; */
}
.box:hover .light{
/* 過(guò)度實(shí)現(xiàn)部分 */
/* transform: translate(200%,200%) rotate(-45deg); */
animation: cross 0.5s;
}
@keyframes cross{
from{
}
to{
top: 80%;
left: 100%;
transform: rotate(-45deg);v
}
}

想要通過(guò)過(guò)度效果實(shí)現(xiàn)的同學(xué)，將動(dòng)畫效果注釋掉，釋放過(guò)度部分的注釋就可以了。

實(shí)現(xiàn)原理

將ligth盒子設(shè)置為寬350px,高100px的長(zhǎng)方形，通過(guò)添加漸變實(shí)現(xiàn)光影效果，再將其逆時(shí)針旋轉(zhuǎn)45度定位于box盒子的左上方，然后通過(guò)“動(dòng)畫”或者“過(guò)度”效果使其向右下方移動(dòng)。（動(dòng)畫效果在鼠標(biāo)離開box的時(shí)候，會(huì)有一個(gè)光影返回去的效果。）

在線咨詢

上一篇：HTML5從入門到精通，零基礎(chǔ)學(xué)員必看
下一篇：html實(shí)現(xiàn)點(diǎn)擊圖片放大功能

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商