整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
咪容器
咱們每次畫一個(gè)圖片，肯定先要確定一個(gè)容器，幾確定一下圖形的位置和大小。
<div class="mao_box">
畫喵咪的頭部和頭部的花紋
按照繪畫習(xí)慣，我們肯定是先畫最大的頭部，頭部確定了，耳朵嘴巴的位置才能確定。
<!-- 貓咪的頭部框架 -->
貓咪頭部.png
畫貓咪的耳朵部分
貓咪的耳朵分布在頭部的左右兩邊，所以肯定是由兩個(gè)div畫成，為了不顯得那么僵硬，我們可以把兩邊的耳朵稍微畫的不一樣大。
大家肯定會(huì)想：耳朵的形狀這么奇怪，到時(shí)是怎么畫的呢？其實(shí)很簡(jiǎn)單，就是通過(guò)矩形然后設(shè)置各個(gè)角度的border-radius就會(huì)形成一種尖角的效果，再旋轉(zhuǎn)相應(yīng)的角度跟頭部貼合就可以了。
最后將耳朵隱藏在臉部的后面，露出一點(diǎn)點(diǎn)耳尖就可以了。
<!--繪制耳朵的容器-->
耳朵.jpg
畫貓咪的眼睛部分
眼睛部分有點(diǎn)復(fù)雜喲，不經(jīng)過(guò)仔細(xì)的一番研究和強(qiáng)大的想象力是很難畫出來(lái)的：解剖一下就是上下兩個(gè)橢圓重疊而成，多余的部分隱藏，中間的褐色眼珠是在上面圓形中的一個(gè)黑色矩形。
<div class="yanjing">
貓咪眼睛.jpg
畫貓咪的臉部花紋
喵咪的胡須可是很重要的喲，如果不小心把它剪了可是很嚴(yán)重的，貓咪就再也無(wú)法測(cè)量自己可以鉆進(jìn)多大的洞里了，哈哈。
仔細(xì)觀察花紋其實(shí)就是由左右各5條線條組成，畫出線條再做相應(yīng)的變換就可以了。
<div class="face_huawen">
貓咪臉部花紋.jpg
畫貓咪的鼻子
感覺(jué)這是整個(gè)貓咪最好畫的地方了，簡(jiǎn)單的一個(gè)半圓就可以解決問(wèn)題啦~啦啦啦啦~
<div class="bizi">
貓咪的鼻子.png
畫貓咪的嘴巴
咦？是不是感覺(jué)畫著畫著就到了最后一部分了，哈哈哈哈哈，好開(kāi)心啊~又吃成長(zhǎng)快樂(lè)了~
嘴巴就像兩撇小胡子，用兩個(gè)矩形邊框就可以實(shí)現(xiàn)了。
<div class="zuiba_box">
貓咪嘴巴.jpg
各個(gè)部位拼接成一個(gè)完整的小貓
各個(gè)部位都畫好之后，又到了像大白一樣的拼圖時(shí)間了，哈哈~大家一起拼出一個(gè)萌萌噠小貓吧~(主要是對(duì)transition屬性的運(yùn)用，設(shè)置:hover之后的屬性，然后用transition設(shè)置屬性完成變化的過(guò)渡時(shí)間)
拼圖咯--哈哈.jpg
制作鼠標(biāo)移動(dòng)上去的動(dòng)態(tài)效果
我們家毛球可是個(gè)動(dòng)如脫兔的家伙哦，所以我們來(lái)給貓咪加點(diǎn)特效吧~(^__^)
鼠標(biāo)移動(dòng)上去之后兩耳耳朵左右擺動(dòng)
眼睛瞇瞇呈現(xiàn)笑臉的形狀
PS：眼睛瞇起來(lái)之后下面出現(xiàn)了一部分紅暈，就是兩個(gè)背景顏色半透明的小橢圓組成的，只要在鼠標(biāo)移動(dòng)上去只會(huì)把橢圓顯示出來(lái)就可以了。
眼睛下面的紅暈.png
嘴角上揚(yáng)
/*鼠標(biāo)浮動(dòng)耳朵樣式*/.mao:hover .erduo > div:first-child { left: -10px; transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); border-radius: 4% 80% 0% 60%;學(xué)習(xí)過(guò)程中遇到什么問(wèn)題或者想獲取學(xué)習(xí)資源的話，歡迎加入學(xué)習(xí)交流群
343599877，我們一起學(xué)前端！
近大家刷抖音，是否有刷到拉斯維加斯的新地標(biāo) 「Sphere」：
場(chǎng)館內(nèi)部的視覺(jué)效果非常驚人，其中一個(gè)效果讓我虎軀一震：
我的第一想法就是，這個(gè)看起來(lái)用 CSS 也可以實(shí)現(xiàn)嘛？還有 CSS 不能實(shí)現(xiàn)的？
本文，就將嘗試使用 CSS，大致還原這個(gè)效果。
其實(shí)，上述的動(dòng)畫效果，本質(zhì)就是一個(gè) 3D 立方體。
同時(shí)，3D 立方體上每個(gè)面存在顏色不一樣的文字，文字和顏色都在隨機(jī)變化。
也就是說(shuō)，我們需要實(shí)現(xiàn)一個(gè) 3D 立方體：
同時(shí)，我們還需要實(shí)現(xiàn)這樣一個(gè)動(dòng)畫效果 -- 文字和顏色都在隨機(jī)變化的平面效果：
兩者組合一下，再挪動(dòng) 3D 元素的景深距離，就能實(shí)現(xiàn)我們想要的效果！
好，下面我們一個(gè)一個(gè)實(shí)現(xiàn)。
實(shí)現(xiàn)一個(gè) 3D 立方體，相對(duì)另外一個(gè)文字和顏色都在隨機(jī)變化的平面效果而言，屬于非常非常簡(jiǎn)單的一步了。
我們?cè)诜浅６嗥恼轮幸仓v過(guò)具體的實(shí)現(xiàn)方式：
最常見(jiàn)的 3D 圖形，莫過(guò)于一個(gè) 3D 立方體。
如果沒(méi)有上下兩個(gè)面，只是一個(gè) 4 個(gè)面的圖形，大概是這樣：
這樣一個(gè)圖形，利用 CSS 3D，如何快速實(shí)現(xiàn)呢？
首先，構(gòu)造這么一個(gè)結(jié)構(gòu)：
<div class="perspective">
<div class="container">
<div class="img">3</div>
<div class="img">D</div>
<div class="img">視</div>
<div class="img">圖</div>
</div>
</div>4 個(gè)面，就是最內(nèi)層的 4 個(gè) .img，首先，需要給兩個(gè)父容器，設(shè)置 3D 的屬性：
.perspective {
perspective: 3000px;
}
.container {
width: 400px;
height: 400px;
transform-style: preserve-3d;
}簡(jiǎn)單解釋一下：
接下來(lái)，就是最為核心的，如何設(shè)置 4 個(gè) .img 元素的 3D 變換，使之形成 3D 立方體。
技巧就是：先旋轉(zhuǎn)，再位移。
這里給出一個(gè)俯視效果圖：
以上述 Demo 中的正方體為例子，class 為 .img 的 div 塊的高寬為 400px*400px。那么要利用 4 個(gè) 這樣的 div 拼接成一個(gè)正方體，需要分別將 4 個(gè) div 繞 Y 軸旋轉(zhuǎn) [90°, 180°, 270°, 360°]，再 translateY(200px) 。
值得注意的是，一定是先旋轉(zhuǎn)角度，再偏移距離，這個(gè)順序很重要。
代碼如下：
.img {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 400px;
}
@for $i from 1 through $imgCount {
.img:nth-child(#{$i}) {
transform: rotateY(($i * 90deg)) translateZ(200px);
}
}效果如下：
此時(shí)，可能會(huì)覺(jué)得圖片太太太大了，此時(shí)，我們可以通過(guò)給中間層 .container 設(shè)置一個(gè)恰當(dāng)?shù)?translateZ 進(jìn)行視覺(jué)大小上的調(diào)節(jié)。
.container {
transform: translateZ(-3000px);
}這樣，就能得到恰當(dāng)大小的立方體元素效果：
當(dāng)然，對(duì)于我們這個(gè)效果，我們 5 要五個(gè)面（前后左右與上方即可），因此，我們基于上述的基礎(chǔ)知識(shí)鋪墊，重新實(shí)現(xiàn)一個(gè)我們需要的框架結(jié)構(gòu)：
<div class="perspective">
<div class="container">
<div class="g-panel"></div>
<div class="g-panel"></div>
<div class="g-panel"></div>
<div class="g-panel"></div>
<div class="g-panel"></div>
</div>
</div>并且，我們希望我們的圖形是一個(gè)立方體，只需要稍微改造長(zhǎng)寬和 translateZ() 的即可。這樣，我們就能得到一個(gè)前后左右與上方 5 個(gè)面的立方體元素。
示意效果如下：
OK，立方體我們先放在一邊。
接下來(lái)，我們嘗試來(lái)實(shí)現(xiàn)這個(gè)效果：
這個(gè)效果如果一個(gè)文字用一個(gè) DIV 承載實(shí)現(xiàn)，那是非常容易的，但是這樣勢(shì)必會(huì)造成元素過(guò)多，再設(shè)置動(dòng)畫效果，則會(huì)導(dǎo)致頁(yè)面太為卡頓。
所以，我們需要另辟蹊徑。這里，我們可以使用多層漸變配合 background-clip: text。
首先，我們利用等寬字體，隨機(jī)實(shí)現(xiàn)一列文字：
<div>ABCDEFGHIJKLMN</div>div {
font-family: monospace;
text-align: center;
font-size: 25px;
width: 25px;
line-height: 25px;
color: #fff;
}效果大致如下：
此時(shí)，如果我們?cè)倮镁€性漸變，給每個(gè)字符的對(duì)應(yīng)空間（也就 25px x 25px），設(shè)置上不同的顏色，大概是這樣：
@function randomLinear($count) {
$value: '';
@for $i from 0 through ($count - 1) {
$value: $value + randomColor() + string.unquote(" 0 #{$i * 25}px,");
}
@return linear-gradient(string.unquote(#{$value}) randomColor() 0 100%);
}
@function randomColor() {
@return rgb(randomNum(255), randomNum(255), randomNum(255));
}
div {
// ...
background: randomLinear(14);
}其中，randomLinear(14) 是一個(gè) SASS 函數(shù)，參數(shù) 14 表示生成 14 層線性漸變，每一個(gè)文字區(qū)域的顏色都是隨機(jī)的，經(jīng)過(guò)編譯后的其中一種結(jié)果如下：
div {
// ...
background: linear-gradient(#feea96 0 25px, #edde42 0 50px, #e2344a 0 75px, #cdab7e 0 100px, #e16c8b 0 125px, #dcdc7d 0 150px, #dcb42a 0 175px, #d6a587 0 200px, #984f71 0 225px, #221e34 0 250px, #5e9a69 0 275px, #a955e4 0 300px, #4e908f 0 325px, #8d177e 0 350px);
}上面，我們按照每間隔 25px 的高度，利用線性漸變隨機(jī)設(shè)置了一種顏色，最終，能夠得到這么個(gè)效果：
此時(shí)，我們只需要再設(shè)置 background-clip: text，配合透明文字顏色 color: transparent，就可以實(shí)現(xiàn)單個(gè) div 內(nèi)，單列文字，每個(gè)字體的顏色都是不一樣的：
div {
// ...
background: randomLinear(14);
background-clip: text;
color: transparent;
}此時(shí)，效果如下：
當(dāng)然，文字顏色可以隨機(jī)，那么文字本身也應(yīng)該隨機(jī)。這個(gè)不難，我們也可以借助 SASS 函數(shù)，編寫一個(gè)隨機(jī)字符的函數(shù)，通過(guò)元素的偽元素 content 進(jìn)行設(shè)置。
那么此時(shí)，完整的代碼可能是這樣的：
<div></div>$str: 'QWERTYUIOPASDFGHJKLZXCVBNMabcdefghigklmnopqrstuvwxyz123456789';
$length: str-length($str);
@function randomLinear($count) {
$value: '';
@for $i from 0 through ($count - 1) {
$value: $value + randomColor() + string.unquote(" 0 #{$i * 25}px,");
}
@return linear-gradient(string.unquote(#{$value}) randomColor() 0 100%);
}
@function randomColor() {
@return rgb(randomNum(255), randomNum(255), randomNum(255));
}
@function randomChar() {
$r: random($length);
@return str-slice($str, $r, $r);
}
@function randomChars($number) {
$value: '';
@if $number > 0 {
@for $i from 1 through $number {
$value: $value + randomChar();
}
}
@return $value;
}
div {
position: relative;
width: 25px;
height: 350px;
&::before {
content: randomChars(14);
position: absolute;
font-family: monospace;
background: randomLinear(14);
background-clip: text;
color: transparent;
text-align: center;
font-size: 25px;
width: 25px;
line-height: 25px;
}
}這樣，每次 div 內(nèi)的文字，都是從上面 SASS 函數(shù)中 $str 變量中隨機(jī)取的：
接下來(lái)，我們需要實(shí)現(xiàn)文字的隨機(jī)跳變，也很好做，我們需要在一開(kāi)始，隨機(jī)生成多個(gè)不同的 content，然后，借助 CSS 動(dòng)畫，進(jìn)行切換。
div {
&::before {
content: randomChars(14);
--content1: "#{randomChars(14)}";
--content2: "#{randomChars(14)}";
--content3: "#{randomChars(14)}";
--content4: "#{randomChars(14)}";
animation: contentChange 1s infinite;
}
}
@keyframes contentChange {
20% {
content: var(--content1);
}
40% {
content: var(--content2);
}
60% {
content: var(--content3);
}
80% {
content: var(--content4);
}
}這里，我們一次生成了 5 個(gè) content，其中 4 個(gè)用 CSS 變量保存了起來(lái)，隨后，在 CSS 動(dòng)畫中，利用提前生成好的 content，進(jìn)行字符內(nèi)容的替換，此時(shí)，整個(gè)效果如下：
隨機(jī)內(nèi)容有了，單個(gè)字體顏色不一樣有了，就差顏色的隨機(jī)跳變動(dòng)畫了，這個(gè)也非常好做，我們?cè)诙嗥恼乱蔡峒斑^(guò)，利用 filter: hue-rotate() 可以快速實(shí)現(xiàn)內(nèi)容的顏色切換。
div {
animation: colorChange 1s steps(12) infinite;
}
@keyframes colorChange {
100% {
filter: hue-rotate(360deg);
}
}我們利用了 filter: hue-rotate() 加上了步驟動(dòng)畫（steps），成功的實(shí)現(xiàn)了顏色的跳變！效果如下：
當(dāng)然，我們最終要實(shí)現(xiàn)的是整個(gè)面隨機(jī)顏色加上隨機(jī)文字的跳變動(dòng)畫，只需要在上述的基礎(chǔ)上，利用 SASS 函數(shù)，循環(huán)重復(fù)多列操作即可。基于上述所有內(nèi)容的鋪墊，我們最終的單個(gè)面下的動(dòng)畫效果代碼如下：
<div class="g-container">
<div></div>
// ... 一個(gè) 32 個(gè)子 div
<div></div>
</div>@use "sass:string";
$str: 'QWERTYUIOPASDFGHJKLZXCVBNMabcdefghigklmnopqrstuvwxyz123456789';
$length: str-length($str);
$size: 25;
$count: 41;
@function randomNum($max, $min: 0, $u: 1) {
@return ($min + random($max)) * $u;
}
@function randomLinear($count) {
$value: '';
@for $i from 0 through ($count - 1) {
$value: $value + randomColor() + string.unquote(" 0 #{$i * 25}px,");
}
@return linear-gradient(string.unquote(#{$value}) randomColor() 0 100%);
}
@function randomColor() {
@return rgb(randomNum(255), randomNum(255), randomNum(255));
}
@function randomChar() {
$r: random($length);
@return str-slice($str, $r, $r);
}
@function randomChars($number) {
$value: '';
@if $number > 0 {
@for $i from 1 through $number {
$value: $value + randomChar();
}
}
@return $value;
}
body,
html {
width: 100%;
height: 100%;
background: #000;
font-family: monospace;
}
.g-container {
position: relative;
width: 800px;
height: 800px;
display: flex;
animation: colorChange 1s steps(12) infinite;
div {
position: relative;
width: #{$size}px;
height: 800px;
flex-shrink: 0;
&::before {
position: absolute;
inset: 0;
text-align: center;
font-size: #{$size}px;
width: #{$size}px;
text-align: center;
line-height: #{$size}px;
color: transparent;
}
}
@for $i from 1 to $count {
div:nth-child(#{$i}) {
&::before {
content: randomChars(32);
--content1: "#{randomChars(32)}";
--content2: "#{randomChars(32)}";
--content3: "#{randomChars(32)}";
--content4: "#{randomChars(32)}";
animation: contentChange 1s infinite;
background: randomLinear(32);
background-clip: text;
}
}
}
}
@keyframes colorChange {
100% {
filter: hue-rotate(360deg);
}
}
@keyframes contentChange {
20% {
content: var(--content1);
}
40% {
content: var(--content2);
}
60% {
content: var(--content3);
}
80% {
content: var(--content4);
}
}這樣，我們就成功的實(shí)現(xiàn)了單個(gè)平面下的，顏色隨機(jī)，文字隨機(jī)，且不斷變化的動(dòng)畫效果：
有了上面的立方體和單個(gè)平面的效果，要實(shí)現(xiàn)立體效果就不難了。我們嘗試將兩者結(jié)合起來(lái)。
改造原有的立方體結(jié)構(gòu)，大致改成如下形式：
.perspective
.container
.g-panel
-for(var i=0; i<32; i++)
div
.g-panel
-for(var i=0; i<32; i++)
div
.g-panel
-for(var i=0; i<32; i++)
div
.g-panel
-for(var i=0; i<32; i++)
div
.g-panel
-for(var i=0; i<32; i++)
div上面采用了 PUG 模板引擎來(lái)簡(jiǎn)化代碼，編譯后的效果如下：
<div class="perspective">
<div class="container">
<div class="g-panel">
<div></div>
// ... 32 個(gè)
<div></div>
<div class="g-panel">
<div></div>
// ... 32 個(gè)
<div></div>
<div class="g-panel">
<div></div>
// ... 32 個(gè)
<div></div>
<div class="g-panel">
<div></div>
// ... 32 個(gè)
<div></div>
<div class="g-panel">
<div></div>
// ... 32 個(gè)
<div></div>
</div>
</div>這里，我們只需要實(shí)現(xiàn) 5 個(gè)面的立方體即可（前后左右以及上方）。
每個(gè) .g-panel，實(shí)現(xiàn)一個(gè)我們上面鋪墊的單面文字跳變效果，這樣，我們就能得到這么一個(gè)立體的 3D 立方體動(dòng)畫效果：
接下來(lái)，我們只需要稍加調(diào)試，通過(guò)控制 perspective 和 transform: translateZ() 控制視覺(jué)上的縱深，將畫面的視角放置于整個(gè)立方體之中，即可得到這么個(gè)效果：
好，最后，我們模擬文章開(kāi)頭拉斯維加斯球的效果，讓頂部的平面，向下運(yùn)動(dòng)，實(shí)現(xiàn)一種天花板往下掉的動(dòng)畫效果，最終，我們即可使用純 CSS，大致模擬出整個(gè)效果：
由于 GIF 錄制問(wèn)題，實(shí)際效果會(huì)比 GIF 展示效果更為震撼。
transition:翻譯為“過(guò)渡”，過(guò)渡是一個(gè)持續(xù)性的動(dòng)作，因此必須定義一個(gè)持續(xù)時(shí)間。
transition屬性：
1.transition-property屬性：指定CSS屬性的過(guò)渡效果，常用于鼠標(biāo)懸停在一個(gè)元素上時(shí)指定屬性的變化效果；
none：沒(méi)有屬性會(huì)獲得過(guò)渡效果。
all：所有屬性都會(huì)獲得過(guò)渡效果，此值為默認(rèn)值。
<property>：指定屬性獲得過(guò)渡效果，多個(gè)屬性用逗號(hào)分隔，如 width,color
2.transition-duration屬性：規(guī)定完成過(guò)渡效果需要花費(fèi)的時(shí)間（以秒或毫秒計(jì)，如： 0.5s），如需要過(guò)渡效果，必須指定一個(gè)過(guò)渡時(shí)間，否則過(guò)渡效果是不會(huì)生效的；
3.transition-timing-function屬性：指定切換效果的速度，此屬性允許一個(gè)過(guò)渡效果，以改變其持續(xù)時(shí)間的速度；
linear 規(guī)定以相同速度開(kāi)始至結(jié)束的過(guò)渡效果（等于 cubic-bezier(0,0,1,1)）。
ease （默認(rèn)值） 規(guī)定慢速開(kāi)始，然后變快，然后慢速結(jié)束的過(guò)渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 規(guī)定以慢速開(kāi)始的過(guò)渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 規(guī)定以慢速結(jié)束的過(guò)渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 規(guī)定以慢速開(kāi)始和結(jié)束的過(guò)渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函數(shù)中定義自己的值。可能的值是 0 至 1 之間的數(shù)值。
4.transition-delay 屬性：指定何時(shí)將開(kāi)始切換效果，延遲一段時(shí)間后觸發(fā)過(guò)渡（以秒或毫秒計(jì)，如： 0.5s），默認(rèn)為0s。
除了transition-duration屬性外，其他都有默認(rèn)值，如果不需要改變默認(rèn)值可以不指定，只配置transition-duration屬性即可：
transition:0.5s 等價(jià)于 transition: all 0.5s ease 0s;
例：針對(duì)的是一個(gè)標(biāo)簽元素
div{
width: 100px;
height: 100px;
background-color: wheat;
//當(dāng)div的width屬性發(fā)生變化時(shí)，應(yīng)用此過(guò)渡效果
transition: width 0.5s ease 0s;
}
//鼠標(biāo)指向時(shí)div的width屬性發(fā)生變化
div:hover{
width:300px;
}
<div></div>transform 屬性：應(yīng)用于元素的2D或3D轉(zhuǎn)換，這個(gè)屬性允許你將元素旋轉(zhuǎn)，縮放，移動(dòng)，傾斜等。
translate(x,y)、translateX(x)、translateY(y)：定義2D轉(zhuǎn)換，x.y單位一般取px，transform：translateX(100px):元素相對(duì)原本位置之右100px
div{
//div相對(duì)原來(lái)位置在右下100px處
transform:translate(100px,100px)
}scale(x,y)、scaleX(x)、scaleY(y)，在2D上旋轉(zhuǎn)綻放
rotate(x,y)、rotateX(x)、rotateY(y)，在2D上旋轉(zhuǎn)
skew(x,y)、skewX(x)、skewY(y)，在2D上傾斜
開(kāi)啟vue過(guò)渡動(dòng)畫，只需要將需要開(kāi)啟的標(biāo)簽放到<transition>中，同時(shí)標(biāo)簽使用v-if控制顯示和隱藏。
<input type="button" value="點(diǎn)擊" @click="isShow=!isShow" >
<transition>
<p v-show="isShow">{{msg}}</p>
</transition>vue的過(guò)渡進(jìn)程圖：針對(duì)的是類名
進(jìn)入前、進(jìn)入后、離開(kāi)前、離開(kāi)后，四個(gè)狀態(tài)是一個(gè)點(diǎn)，而v-enter-active v-leave-active是一個(gè)持續(xù)的狀態(tài)，因此，active中需要標(biāo)明持續(xù)的時(shí)間，
v-enter、v-enter-to、v-leave、v-leave-to：需要定義四個(gè)狀態(tài)點(diǎn)的屬性：
.v-enter-active,
.v-leave-active {
//過(guò)渡持續(xù)時(shí)間0.6秒
transition: 0.6s;
}
.v-enter,
.v-leave-to {
//進(jìn)入前、離開(kāi)后，完全透明
opacity: 0;
//進(jìn)入前，離開(kāi)后，元素相對(duì)位置在下邊100px處
transform:translateY(100px);
}
.v-enter-to,
.v-leave {
//進(jìn)入后、離開(kāi)前，完全不透明
opacity: 1;
}當(dāng)在<transition name="fade">指定了name屬性，就可以使用前綴 .fade-enter 這樣。
1.引入animate.css
<link ref="stylesheet" href="animate.css">2.在<transition>中增加enter-active-class和leave-active-class，類名可以通過(guò)官方網(wǎng)站復(fù)制
官方網(wǎng)站：https: //animate.style/
<input type="button" value="點(diǎn)擊" @click="isShow=!isShow" >
<transition enter-active-class="animate__bounceIn" leave-active-lass="animate__bounceOut">
<p v-show="isShow" id="p">{{msg}}</p>
</transition>*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
