整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
家經(jīng)常在一些網(wǎng)頁中看到一種會隨著鼠標(biāo)的接觸而變色的按鈕，參見范例網(wǎng)頁。這稱之為鼠標(biāo)翻轉(zhuǎn)效果，這是根據(jù)英文rollover翻譯而來的，其實不是很符合中文的語境。其原理是利用兩張圖片，平時顯示一幅，當(dāng)鼠標(biāo)接觸后換成另外一幅圖片。如下圖。這樣看起來好像是鼠標(biāo)接觸的時候按鈕變亮了。現(xiàn)在我們來動手制作，首先在Photoshop中將它們制作成圖片，然后再做成網(wǎng)頁。
首先新建一個400×300的白底圖像，新建一層，利用形狀工具橢圓〖U/SHIFTU〗，在公共欄選擇第3種繪圖方式(填充像素)，調(diào)出信息調(diào)板〖F8〗觀看數(shù)值，用任意顏色在新建層中間位置畫一個直徑40左右的正圓(按住SHIFT保持正圓)。如下左圖。
【窗口>樣式】調(diào)出樣式調(diào)板，點擊右上角圓三角按鈕，選擇“替換樣式”，在出來的樣式列表目錄中選擇“Web翻轉(zhuǎn)樣式”，確認(rèn)目前選擇的是新建層，然后使用“選中狀態(tài)的藍(lán)色膠體按鈕”樣式。如下中圖紅色箭頭處。大家也可以自己選擇其他顏色的。
將新建層與背景層合并，然后【圖像>修整】，如下右圖所示。確定操作后圖像將被裁剪為和所畫的圓同等大小。這個命令的作用是根據(jù)左上角第一個像素處，或右下角最后一個像素處的顏色，在我們這幅圖像中這兩個地方都是白色。然后就將畫面中連續(xù)的白色部分裁剪掉。這就好像現(xiàn)實中打印圖像之后將紙張的邊緣裁剪掉一樣。
接著將背景圖層復(fù)制一層，對復(fù)制出來的圖層使用曲線工具，合并高光和暗調(diào)區(qū)域(高光點229,255；暗調(diào)點60,0)，形成加亮按鈕的效果。如下左圖。完成后我們得到兩個圖層，分別是暗色按鈕的背景層，和亮色按鈕的背景復(fù)制層。如果以上步驟無法完成，點此下載范例文件
使用【文件>在ImageReady中編輯】〖CTRLSHIFTM〗，或點擊工具欄最下方
按鈕，將會跳轉(zhuǎn)到ImageReady中，這是Photoshop附帶的一個軟件，用來制作動畫和網(wǎng)頁。我們找到Web內(nèi)容和圖層兩個調(diào)板，如下右圖。后面的操作就是由這兩個調(diào)板配合完成。
-
在完成以上5個步驟后，我們就可以開始制作鼠標(biāo)翻轉(zhuǎn)效果了。開始之前我們先簡要介紹一下制作的原理。范例網(wǎng)頁大家也看過，是隨著鼠標(biāo)的接觸而發(fā)生的。這里涉及一種概念，叫事件和方法。我們的日常生活就是由許多事件和方法組成的，比如口渴是事件，喝水就是解決這個事件的方法。肚子餓是事件，吃東西就是方法。想學(xué)習(xí)是事件，看《大師之路》就是方法等等。
這其實就是一種編程的思想，和人一樣，電腦也是由事件和方法組成的一套邏輯系統(tǒng)。所以下面我們也要按照這種思路，去創(chuàng)建一個事件和解決方法。這個事件就是鼠標(biāo)接觸事件。平時鼠標(biāo)不接觸，我們只顯示暗色按鈕層(背景層)。而在鼠標(biāo)接觸的事件發(fā)生后，顯示亮色按鈕層(背景副本層)。
點擊Web內(nèi)容調(diào)板下方的新建按鈕，將建立一個翻轉(zhuǎn)設(shè)定。位于上方的s060101代表正常狀態(tài)，因此我們要在圖層調(diào)板中隱藏背景副本層，如下左圖。
位于下方的Over代表鼠標(biāo)接觸事件，因此我們在圖層調(diào)板中顯示背景副本層并隱藏背景層(在這里由于圖層的遮蓋關(guān)系即使不隱藏也不影響最終效果)。如下右圖。可以從Web內(nèi)容調(diào)板中看到平時和鼠標(biāo)接觸兩種不同的效果。
-
好，這樣我們就已經(jīng)完成了制作，記得保存文件。現(xiàn)在點擊工具欄上的
按鈕即可在ImageReady中預(yù)覽將來做成網(wǎng)頁后的實際效果。注意有可能在圖像窗口可能會出現(xiàn)如下圖的標(biāo)有序號的橙色外框，這是切片的序號。如果覺得有礙視覺可點擊工具欄中的
按鈕隱藏切片。有關(guān)切片的概念和使用我們將在以后介紹。現(xiàn)在大家不必深究。
0619如果要做成實際的可以在網(wǎng)頁瀏覽器中打開的網(wǎng)頁，就要使用【文件>將優(yōu)化結(jié)果存儲為】〖CTRLALTSHIFTS〗。在出現(xiàn)的保存對話框中，保存類型要選擇為“HTML和圖像”，設(shè)置選項為“默認(rèn)設(shè)置”，切片選項為“所有切片”。文件名可自行決定，但不要使用中文。保存的位置默認(rèn)是個人文檔的位置，可自行更改(如桌面)。確定之后可能會出現(xiàn)一個如下右圖的警告框，提示文件名兼容性問題，可不必理會，按下好按鈕即可。這樣將會在指定的目錄中會產(chǎn)生一個.html文件和一個images目錄，如果要移動目錄位置必須兩者一起移動，否則圖片無法在網(wǎng)頁中顯示。因為網(wǎng)頁文件并不能包含圖片，圖片存放在images目錄中。
這樣的操作就成為輸出操作，將Photoshop中的圖象輸出成為了其他的格式。同時大家也要保存好這個圖像的原始psd格式，因為以后我們還要“老瓶裝新酒”，在這個范例的基礎(chǔ)上增加動畫效果。參見范例網(wǎng)頁。大家也可自行打開s0603.psd文件研究一下。注意要退出預(yù)覽模式(按鈕
)才可以保存文件。ImageReady可以直接保存psd格式，動畫設(shè)定也會隨之保存。
雖然曲線工具在這一小節(jié)只占有很少的部分，但也是很重要的，沒有曲線的加亮效果，后面的一切也都無從談起。曲線的類型運用在網(wǎng)頁設(shè)計制作中是很常見的。
這是我們第一次真實地將自己的作品做成網(wǎng)頁格式，大家肯定有很多地方不明白。有種云里霧里的感覺，這沒關(guān)系，隨著本系列教程在以后的課程逐步增加更多的網(wǎng)頁相關(guān)知識，這片迷霧也會逐漸散去，大家將會發(fā)現(xiàn)來到一個更廣闊的天地。
事實上Photoshop和ImageReady在網(wǎng)頁制作方面來說功能十分有限，如果要有更多更好的功能，還是要使用專門的網(wǎng)頁制作軟件才行。我們在以后課程將學(xué)習(xí)到一個專門與Photoshop和ImageReady配合的網(wǎng)頁制作軟件GoLive，它可以完全兼容ImageReady產(chǎn)生的網(wǎng)頁代碼。在其中我們也可以創(chuàng)建以上的翻轉(zhuǎn)效果，并且還能有更多的變化。在文字教程發(fā)布之前，大家可以先通過GoLiveCS2視頻教程來學(xué)習(xí)。
載說明：原創(chuàng)不易，未經(jīng)授權(quán)，謝絕任何形式的轉(zhuǎn)載
俗話說得好，興趣是最好的老師。本篇文章搜集了幾個漂亮的宇宙風(fēng)格按鈕動畫效果的代碼，希望它們能夠激發(fā)你對 CSS 的熱愛。作為前端開發(fā)者，我們不僅僅是制作寫頁面和與 后端 API 打交道，偶爾也需要調(diào)味劑。廢話不多說，讓我們一起來解讀這些 CSS 代碼吧。
HTML部分
<button class="btn" type="button">
<strong>SPACE</strong>
<div id="container-stars">
<div id="stars"></div>
</div>
<div id="glow">
<div class="circle"></div>
<div class="circle"></div>
</div>
</button>
CSS部分
.btn {
display: flex;
justify-content: center;
align-items: center;
width: 13rem;
height: 3rem;
background-size: 300% 300%;
backdrop-filter: blur(1rem);
border-radius: 5rem;
transition: 0.5s;
animation: gradient_301 5s ease infinite;
border: double 4px transparent;
background-image: linear-gradient(#212121, #212121), linear-gradient(137.48deg, #ffdb3b 10%,#FE53BB 45%, #8F51EA 67%, #0044ff 87%);
background-origin: border-box;
background-clip: content-box, border-box;
}
#container-stars {
position: fixed;
z-index: -1;
width: 100%;
height: 100%;
overflow: hidden;
transition: 0.5s;
backdrop-filter: blur(1rem);
border-radius: 5rem;
}
strong {
z-index: 2;
font-family: 'Avalors Personal Use';
font-size: 12px;
letter-spacing: 5px;
color: #FFFFFF;
text-shadow: 0 0 4px white;
}
#glow {
position: absolute;
display: flex;
width: 12rem;
}
.circle {
width: 100%;
height: 30px;
filter: blur(2rem);
animation: pulse_3011 4s infinite;
z-index: -1;
}
.circle:nth-of-type(1) {
background: rgba(254, 83, 186, 0.636);
}
.circle:nth-of-type(2) {
background: rgba(142, 81, 234, 0.704);
}
.btn:hover #container-stars {
z-index: 1;
background-color: #212121;
}
.btn:hover {
transform: scale(1.1)
}
.btn:active {
border: double 4px #FE53BB;
background-origin: border-box;
background-clip: content-box, border-box;
animation: none;
}
.btn:active .circle {
background: #FE53BB;
}
#stars {
position: relative;
background: transparent;
width: 200rem;
height: 200rem;
}
#stars::after {
content: "";
position: absolute;
top: -10rem;
left: -100rem;
width: 100%;
height: 100%;
animation: animStarRotate 90s linear infinite;
}
#stars::after {
background-image: radial-gradient(#ffffff 1px, transparent 1%);
background-size: 50px 50px;
}
#stars::before {
content: "";
position: absolute;
top: 0;
left: -50%;
width: 170%;
height: 500%;
animation: animStar 60s linear infinite;
}
#stars::before {
background-image: radial-gradient(#ffffff 1px, transparent 1%);
background-size: 50px 50px;
opacity: 0.5;
}
@keyframes animStar {
from {
transform: translateY(0);
}
to {
transform: translateY(-135rem);
}
}
@keyframes animStarRotate {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0);
}
}
@keyframes gradient_301 {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes pulse_3011 {
0% {
transform: scale(0.75);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(0.75);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}代碼解釋
@keyframes pulse_3011
這個動畫定義了一個名為“pulse_3011”的關(guān)鍵幀動畫。在該動畫中，元素從開始狀態(tài)縮小到0.75倍，同時有一個0.7不透明度的黑色陰影。在動畫執(zhí)行的70％處，元素擴(kuò)大到原始大小，同時黑色陰影消失。最終，元素再次縮小到0.75倍，而黑色陰影再次消失。該動畫無限重復(fù)。
stars::before 和 stars::after 相關(guān)的代碼是實現(xiàn)星星循環(huán)動畫的關(guān)鍵，設(shè)置了背景為一個由白色和透明顏色交替組成的徑向漸變色，這樣就形成了一些閃閃發(fā)光的小星星。通過 animation 屬性設(shè)置了動畫效果，其中 animStar 是一個移動動畫，設(shè)置了 60s 的動畫時間，并且使用 linear 動畫函數(shù)，使得小星星以勻速向上移動的方式出現(xiàn)在屏幕上，并且使用 infinite 讓其循環(huán)播放。這樣就形成了一些往上移動的小星星，從而實現(xiàn)了整個星空的動態(tài)效果。
HTML部分
<button>
<div id="moon" class="state"> Moony</div>
<div id="sun" class="state">Sunny</div>
<span class="border border1"></span>
<span class="border border2"></span>
</button>CSS部分
button {
--sunGradient: linear-gradient(to right, #fa709a 0%, #fee140 100%);
--moonGradient: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 85px;
height: 85px;
color: white;
font-size: 0.8em;
font-weight: bold;
text-transform: uppercase;
border-radius: 70px;
background-color: transparent;
transition: 0.09s;
box-shadow: 0 20px 30px black;
overflow: hidden;
}
button:hover {
transform: rotate(360deg);
}
button:active {
transform: rotate(360deg) scale(1.2);
box-shadow: -15px -15px 500px white,inset 0 0 5px black, 0px -15px 20px white;
}
.state {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
border-radius: inherit;
width: 90%;
height: 90%;
border: 4px groove black;
}
#sun {
display: none;
transition: 2s;
background: var(--sunGradient);
}
#moon {
background: var(--moonGradient);
}
button:hover #sun {
display: flex;
}
button:active #moon {
display: none;
}
.border {
position: absolute;
transition: 0.4s;
z-index: -1;
border-radius: inherit;
background: var(--moonGradient);
}
button:hover .border {
background: var(--sunGradient);
}
.border1 {
width: 45px;
height: 100px;
animation: 1s linear reverse infinite rotation_91;
}
.border2 {
width: 200px;
height: 35px;
animation: 3s linear reverse infinite rotation_91;
}
@keyframes rotation_91 {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}代碼解釋：
這段代碼實現(xiàn)了一個狀態(tài)切換的動畫按鈕效果，它包含兩個狀態(tài)：一個是太陽狀態(tài)，另一個是月亮狀態(tài)。當(dāng)鼠標(biāo)懸停在按鈕上時，太陽狀態(tài)會出現(xiàn)，月亮狀態(tài)會消失。當(dāng)用戶點擊按鈕時，按鈕會放大并旋轉(zhuǎn)，并且太陽狀態(tài)會替換成月亮狀態(tài)，月亮狀態(tài)則替換成太陽狀態(tài)。
具體實現(xiàn)的邏輯如下：
HTML部分：
CSS部分：
HTML部分
<button>
Button
</button>CSS部分：
button {
position: relative;
padding: 18px 55px;
font-size: 15px;
font-weight: bold;
color: #fff;
background: linear-gradient(87deg, #6d67e4, #7743db, #4e31aa, #6d67e4, #6d67e4);
background-size: 600% 600%;
border: 3px solid #7743db;
border-radius: 8px;
/* filter: drop-shadow(0 0 4px #9F73AB); */
box-shadow: inset 0 0 10px 1px #7743db, 0 0 10px 5px #7743db;
cursor: pointer;
transition: all 0.5s;
animation: GradientAnimation 25s ease infinite;
}
button::after {
content: "";
position: absolute;
width: 202px;
height: 54px;
top: 0;
left: -17px;
border: 5px solid #453c67;
border-width: 0 2px 4px 0;
border-radius: 100%;
filter: drop-shadow(0px 0px 6px rgba(78, 49, 180, 1));
transform: rotate(-30deg);
animation: LinerAfter 15s ease infinite;
}
button::before {
content: "";
position: absolute;
width: 200px;
height: 50px;
top: 0;
left: -20px;
border: 5px solid #6d67e4;
border-width: 0 12px 8px 4px;
border-radius: 100%;
filter: drop-shadow(0px 0px 6px rgba(109, 103, 228, 1));
/* box-shadow: inset 0 0 10px 1px #4E31AA, 0 0 10px 5px #4E31AA; */
transform: rotate(-30deg);
transition: all 0.5s;
animation: LinerBefore 15s ease infinite;
}
@keyframes GradientAnimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes LinerAfter {
0% {
left: -27px;
height: 54px;
}
50% {
left: -7px;
height: 37px;
}
100% {
left: -27px;
height: 54px;
}
}
@keyframes LinerBefore {
0% {
left: -30px;
height: 50px;
}
50% {
left: -10px;
height: 33px;
}
100% {
left: -30px;
height: 50px;
}
}
代碼解釋：
CSS代碼設(shè)置了按鈕的樣式，包括位置、內(nèi)邊距、字體大小、加粗程度、顏色、背景、邊框、圓角、光標(biāo)形狀、過渡效果、動畫等。其中background屬性使用了線性漸變，border屬性設(shè)置了3px寬度的實線邊框，border-radius屬性設(shè)置了8px的圓角。box-shadow屬性設(shè)置了兩個陰影效果，一個是內(nèi)陰影，另一個是外陰影。button::after和button::before是button的偽元素，分別表示按鈕前面和后面的圓圈。這兩個圓圈都是絕對定位，大小、位置、邊框、圓角等屬性不同，但都使用了drop-shadow濾鏡和rotate旋轉(zhuǎn)變換效果。動畫效果分別由GradientAnimation、LinerAfter和LinerBefore三個關(guān)鍵幀動畫控制，分別設(shè)置了不同的屬性變化規(guī)則，實現(xiàn)了按鈕和圓圈的不同的動態(tài)效果。
今天的內(nèi)容就分享到這里，太多了就不利于我們?nèi)ダ斫猓m然就三個案例，但是需要我們?nèi)ヂ屠斫猓拍艹蔀樽约旱闹R，建議大家還是親自實現(xiàn)下上述的按鈕動畫效果，這些案例雖然我們在平常的工作中很少用到，但是如果你接到酷炫的項目，比如某品牌的宣傳站點時，我相信這些效果還是能派上用場的。
如果你喜歡這樣的文章，請點贊支持下，后續(xù)我會持續(xù)分享這類的內(nèi)容，如果太少，我會覺得大家不太喜歡這樣的文章，我只能自己私藏了，最后別忘記關(guān)注「前端達(dá)人」，你的支持將是我分享最大的動力，后續(xù)我會持續(xù)輸出更多內(nèi)容，敬請期待。
圖1
圖2
圖3
源碼完整，需要的朋友可以下載學(xué)習(xí)（圖4）
圖4
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
