HTML 文字滑動(marquee)

lt;marquee></marquee>文字滑動

<marquee behavior="slide"></marquee>滑動

<marquee behavior="scroll"></marquee>預(yù)設(shè)卷動

<marquee behavior="alternate"></marquee>來回卷動

<marquee direction="down"></marquee>向下卷動

<marquee direction="up"</marquee>向上卷動

<marquee direction="right"></marquee>向右卷動

<marquee direction="left"></marquee>向左卷動

<marquee loop="2"></marquee>循環(huán)次數(shù), 默認值為：-1, 表示一直滾動下去。

<marquee width="180"></marquee>設(shè)定寬度

<marquee height="30"></marquee>設(shè)定高度

<marquee bgcolor="#FF0000"></marquee>設(shè)定背景顏色

<marquee scrollamount="30"></marquee>設(shè)定卷動距離(px)

<marquee scrolldelay="300"></marquee>設(shè)定卷動時間(毫秒)

<marquee hspace="100"></marquee> hspace 水平頁邊距

<marquee vspace="80"></marquee> vspace 垂直頁邊距

<marquee direction="left" behavior="scroll" width="300" height="400" bgcolor="#ff0" scrollAmount="50" scrollDelay="1000">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>JQ</li>
<li>BOOTSTRAP</li>
</ul>
</marquee>

以上整數(shù)涉及的單位是像素px

<marquee>
<img src="images/03.jpg" />
<img src="images/04.jpg" />
<img src="images/05.jpg" />
<img src="images/06.jpg" />
<img src="images/07.jpg" />
<img src="images/08.jpg" />
<img src="images/09.jpg" />
</marquee>

marquee常用到的兩個事件：

onmouseout="this.start()" 當(dāng)鼠標移出該區(qū)域時

onbmouseover="this.stop()" 當(dāng)鼠標移入該區(qū)域時

天主要和大家分享利用純CSS3實現(xiàn)文字向右循環(huán)閃過效果的在做法，因為兼容性的問題，常被用于移動端，實現(xiàn)的效果非常不錯，文中給出了詳細的介紹和示例代碼，需要的朋友們下面來一起看看吧。

看看效果圖：

這個白色漸變閃過效果用CSS3做很容易也很方便，唯一不好的地方應(yīng)該就是兼容問題了。所以現(xiàn)在一般都用在移動端上面了。

實現(xiàn)代碼

html代碼：

css樣式：

詳細代碼的用法都已經(jīng)寫在注釋里面了

這里是云端源想IT，幫你輕松學(xué)IT”

嗨~ 今天的你過得還好嗎？

憂慮像一把搖椅

它可以使你有事做

但不能使你前進一步

- 2024.04.10 -

在深入探討CSS變形動畫之前，讓我們先探討一下掌握它之后你可以實現(xiàn)哪些有趣的效果。

學(xué)習(xí)了CSS變形動畫之后，你將能夠為你的網(wǎng)頁添加引人注目的動態(tài)效果，例如創(chuàng)建一個立體的3D魔方，或者設(shè)計一個引人入勝的旋轉(zhuǎn)菜單。這些僅僅是眾多可能性中的一小部分，但或許可以勾起我們的學(xué)習(xí)興趣。

一、什么是CSS變形動畫？

CSS變形動畫是利用CSS3的transform屬性創(chuàng)建的動畫效果。它可以使元素旋轉(zhuǎn)、縮放、傾斜甚至翻轉(zhuǎn)，讓靜態(tài)的網(wǎng)頁元素動起來，為用戶帶來更加豐富的交互體驗。

坐標系統(tǒng)

首先我們要學(xué)習(xí)的變形動畫，想達到在上圖中出現(xiàn)的3D效果單純的X與Y兩個軸是實現(xiàn)不了的，還需要加入一條縱深軸，即Y軸的參與才有一個3D的視覺感受。

那么如何來理解X,Y,Z這三條軸的關(guān)系呢？可以看一下下面這張圖。

X軸代表水平軸
Y軸代表垂直軸
Z軸代表縱深軸

X和Y軸都非常好理解，怎么理解這個Z軸呢？

CSS的中文名稱叫做層疊樣式表，那么它肯定是一層一層的。之前學(xué)習(xí)過z-index就是用來設(shè)置層的優(yōu)先級，優(yōu)先級越高越在上面，也可以理解為離我們?nèi)庋墼浇?，它把?yōu)先級低的層給蓋住了，所以Z軸可以理解為我們觀察的視角與被觀察物體之間的一條軸。

Z軸數(shù)值越大，說明觀測距離越遠。
Z軸的數(shù)值可以無限大，所以設(shè)置的時候一定要小心。

二、變形操作

使用 transform 來控制元素變形操作，包括控制移動、旋轉(zhuǎn)、傾斜、3D轉(zhuǎn)換等。

下面我們通過一些例子來演示一下，比較常用的變形操作：

2.1 位移 translate()

translate()函數(shù)可以將元素向指定的方向移動，類似于position中的relative?；蛞院唵蔚睦斫鉃?，使用translate()函數(shù)，可以把元素從原來的位置移動，而不影響在X、Y軸上的任何Web組件。

想象一下，當(dāng)你滾動頁面時，一個元素平滑地從一個位置滑向另一個位置，這種流暢的過渡效果可以大大提升用戶體驗。

translate我們分為三種情況：

1）translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）

2）translateX(x)僅水平方向移動（X軸移動）

3）translateY(Y)僅垂直方向移動（Y軸移動）

實例演示：通過translate()函數(shù)將元素向Y軸下方移動50px,X軸右方移動100px。

HTML代碼：

<div class="wrapper">
<div>我向右向下移動</div>
</div>

CSS代碼：

.wrapper {
width: 200px;
height: 200px;
border: 2px dotted red;
margin: 20px auto;
}
.wrapper div {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background: orange;
color: #fff;
-webkit-transform: translate(50px,100px);
-moz-transform:translate(50px,100px);
transform: translate(50px,100px);
}

演示結(jié)果：

2.2 旋轉(zhuǎn) rotate()

旋轉(zhuǎn)rotate()函數(shù)通過指定的角度參數(shù)使元素相對原點進行旋轉(zhuǎn)。旋轉(zhuǎn)不僅可以是固定的度數(shù)，還可以是動態(tài)變化的，創(chuàng)造出無限的可能性。

它主要在二維空間內(nèi)進行操作，設(shè)置一個角度值，用來指定旋轉(zhuǎn)的幅度。如果這個值為正值，元素相對原點中心順時針旋轉(zhuǎn)；如果這個值為負值，元素相對原點中心逆時針旋轉(zhuǎn)。如下圖所示：

HTML代碼：

<div class="wrapper">
<div></div>
</div>

CSS代碼：

.wrapper {
width: 200px;
height: 200px;
border: 1px dotted red;
margin: 100px auto;
}
.wrapper div {
width: 200px;
height: 200px;
background: orange;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

演示結(jié)果：

2.3 扭曲 skew()

扭曲skew()函數(shù)能夠讓元素傾斜顯示。這種效果常常用于模擬速度感或者傾斜的視覺效果。

它可以將一個對象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。這與rotate()函數(shù)的旋轉(zhuǎn)不同，rotate()函數(shù)只是旋轉(zhuǎn)，而不會改變元素的形狀。skew()函數(shù)不會旋轉(zhuǎn)，而只會改變元素的形狀。

Skew()具有三種情況：

1）skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進行扭曲變形）；

第一個參數(shù)對應(yīng)X軸，第二個參數(shù)對應(yīng)Y軸。如果第二個參數(shù)未提供，則值為0，也就是Y軸方向上無斜切。

2）skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；

3）skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）

示例演示：

通過skew（）函數(shù)將長方形變成平行四邊形。

HTML代碼：

<div class="wrapper">
<div>我變成平形四邊形</div>
</div>

CSS代碼：

.wrapper {
width: 300px;
height: 100px;
border: 2px dotted red;
margin: 30px auto;
}
.wrapper div {
width: 300px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
background: orange;
-webkit-transform: skew(45deg);
-moz-transform:skew(45deg)
transform:skew(45deg);
}

演示結(jié)果：

2.4 縮放 scale()

縮放 scale()函數(shù) 讓元素根據(jù)中心原點對對象進行縮放。這不僅可以用來模擬放大鏡效果，還可以創(chuàng)造出元素的進入和退出動畫，比如一個圖片慢慢縮小直至消失。

縮放 scale 具有三種情況：

1） scale(X,Y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）。

例如：

div:hover {
-webkit-transform: scale(1.5,0.5);
-moz-transform:scale(1.5,0.5)
transform: scale(1.5,0.5);
}

注意：Y是一個可選參數(shù)，如果沒有設(shè)置Y值，則表示X，Y兩個方向的縮放倍數(shù)是一樣的。

2）scaleX(x)元素僅水平方向縮放（X軸縮放）

3）scaleY(y)元素僅垂直方向縮放（Y軸縮放）

HTML代碼：

<div class="wrapper">
<div>我將放大1.5倍</div>
</div>

CSS代碼：

.wrapper {
width: 200px;
height: 200px;
border:2px dashed red;
margin: 100px auto;
}
.wrapper div {
width: 200px;
height: 200px;
line-height: 200px;
background: orange;
text-align: center;
color: #fff;
}
.wrapper div:hover {
opacity: .5;
-webkit-transform: scale(1.5);
-moz-transform:scale(1.5)
transform: scale(1.5);
}

演示結(jié)果：

注意：scale()的取值默認的值為1，當(dāng)值設(shè)置為0.01到0.99之間的任何值，作用使一個元素縮??；而任何大于或等于1.01的值，作用是讓元素放大。

2.5 矩陣 matrix()

matrix() 是一個含六個值的(a,b,c,d,e,f)變換矩陣，用來指定一個2D變換，相當(dāng)于直接應(yīng)用一個[a b c d e f]變換矩陣。就是基于水平方向（X軸）和垂直方向（Y軸）重新定位元素。

此屬性值使用涉及到數(shù)學(xué)中的矩陣，我在這里只是簡單的說一下CSS3中的transform有這么一個屬性值，如果需要深入了解，需要對數(shù)學(xué)矩陣有一定的知識。

示例演示：通過matrix()函數(shù)來模擬transform中translate()位移的效果。
HTML代碼：

<div class="wrapper">
<div></div>
</div>

CSS代碼：

.wrapper {
width: 300px;
height: 200px;
border: 2px dotted red;
margin: 40px auto;
}
.wrapper div {
width:300px;
height: 200px;
background: orange;
-webkit-transform: matrix(1,0,0,1,50,50);
-moz-transform:matrix(1,0,0,1,50,50);
transform: matrix(1,0,0,1,50,50);
}

演示結(jié)果：

想要快速入門前端開發(fā)嗎？推薦一個前端開發(fā)基礎(chǔ)課程，這個老師講的特別好，零基礎(chǔ)學(xué)習(xí)無壓力，知識點結(jié)合代碼，邊學(xué)邊練，可以免費試看試學(xué)，還有各種輔助工具和資料，非常適合新手！點這里前往學(xué)習(xí)哦！「鏈接」

2.6 原點 transform-origin

任何一個元素都有一個中心點，默認情況之下，其中心點是居于元素X軸和Y軸的50%處。如下圖所示：

在沒有重置transform-origin改變元素原點位置的情況下，CSS變形進行的旋轉(zhuǎn)、位移、縮放，扭曲等操作都是以元素自己中心位置進行變形。

但很多時候，我們可以通過transform-origin來對元素進行原點位置改變，使元素原點不在元素的中心位置，以達到需要的原點位置。

transform-origin取值和元素設(shè)置背景中的background-position取值類似，如下表所示：

示例演示：

通過transform-origin改變元素原點到左上角，然后進行順時旋轉(zhuǎn)45度。

HTML代碼：

<div>
<div>原點在默認位置處</div>
</div>
<div class="wrapper transform-origin">
<div>原點重置到左上角</div>
</div>

CSS代碼：

.wrapper {
width: 300px;
height: 300px;
float: left;
margin: 100px;
border: 2px dotted red;
line-height: 300px;
text-align: center;
}
.wrapper div {
background: orange;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.transform-origin div {
-webkit-transform-origin: left top;
transform-origin: left top;
}

演示結(jié)果：

以上就是css動畫中幾種基本的變形技巧了，掌握這些我們可以操控我們的網(wǎng)頁元素實現(xiàn)我們想要的一些基本動畫效果。

在這個充滿創(chuàng)造力的時代，CSS變形動畫是每個前端開發(fā)者必備的技能。它不僅能提升用戶體驗，更能激發(fā)設(shè)計師和開發(fā)者的創(chuàng)意火花。所以，不妨嘗試一下，讓你的網(wǎng)頁動起來，給用戶留下深刻的印象吧！

我們下期再見！

END

文案編輯|云端學(xué)長

文案配圖|云端學(xué)長

內(nèi)容由：云端源想分享

在線咨詢

上一篇：vue 橫向滑動拖動
下一篇：PHP的大致學(xué)習(xí)思路

您的項目需求

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

整合營銷服務(wù)商

HTML 文字滑動(marquee)

一、什么是CSS變形動畫？

二、變形操作

2.2 旋轉(zhuǎn) rotate()

2.3 扭曲 skew()

2.4 縮放 scale()

2.5 矩陣 matrix()

2.6 原點 transform-origin

您的項目需求

一、什么是CSS變形動畫？

二、變形操作