以往,想在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ì)有任何效果。
用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é)果
如果每次都要自己手動(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)用于元素的背景。
在此示例中,內(nèi)聯(lián)圖像“image.jpg”直接嵌入到 HTML 代碼中并顯示給用戶。
在此示例中,背景圖像“image.jpg”應(yīng)用于 div 元素的背景并顯示給用戶。
以合乎邏輯且一致的方式使用圖像也很重要。 這意味著您應(yīng)該使用它們來(lái)傳達(dá)與網(wǎng)頁(yè)內(nèi)容相關(guān)的信息或表達(dá)情感,而不是隨意使用它們。 此外,使用 alt 屬性為圖像添加文本替代也很重要,它允許可能使用屏幕閱讀器的用戶訪問(wèn)圖像,或者以防圖像加載失敗。
在此示例中,替代文本“日落的美麗圖像”讓用戶清楚地了解圖像所代表的內(nèi)容。
另一個(gè) HTML 圖像概念是使用寬度和高度屬性調(diào)整圖像大小的能力。 這些屬性允許您調(diào)整圖像大小以適合您的布局和設(shè)計(jì)。
在此示例中,圖像的寬度設(shè)置為 300 像素,圖像的高度設(shè)置為 200 像素。
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ǔ)代碼,大家可以看看了解了解。
<div class="box">
<div class="light">
</div>
</div>
創(chuàng)建一個(gè)box,包裹一個(gè)light
*{
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ò)度部分的注釋就可以了。
將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è)光影返回去的效果。)
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。