在這個時代，這是很難從這么多的雜念完全關閉，實際上一些工作完成。

計算機是在讓我們閱讀電子郵件，觀看YouTube，趕上社交媒體，當然，做好我們的工作太棒了。 這是一個偉大的工具，以極大的威力，但巨大的力量，當然，來更大的責任。 有時候，人們只是需要從分心關掉，尤其是在網絡上，使他們能夠創建和Freewrite被設計來做到這一點。 這是一個專用書寫工具; 認為舊的電子墨水Kindle的一個咔嗒，clackety鍵盤，你已經得到了它是一個好主意。 正在生產的物聯網這樣越來越多的設備。 這些智能設備的設計做一件事，通常連接到互聯網得到一些數據，或保存數據，但無需實際打開可怕的Web瀏覽器的干擾。
對于Freewrite該網站是由該公司，使Freewrite，博訥馬凱建成，它側重于炫耀設備，但更重要的是它給生活帶來以顯示它的好處。 這在很大程度上已經與精美的動畫CSS面板和元素進行。

搜索引擎優化排名模型,讓搜索引擎簡單
社交媒體影響SEO關鍵字排名中作用

1.創建擴展面板
添加的代碼，這一步FileSilo。 這為面板的DIV結構。 該塊將擴大并向外喜歡就Freewrite現場，與圓被觸發此按鈕。

2.添加CSS
無論是內部的風格標簽或獨立CSS文件，開始添加CSS。 這包括創建動畫一些特定的關鍵幀。 當用戶點擊在屏幕上的圓形按鈕，這將觸發動畫這些將被添加的元素。
@keyframes動畫1 {
0％{變換：比例（0.01，0）; }
50％{變換：比例（0.01，1）; }
100％{變換：比例（1，1）; 背景：RGBA（98，123，157，1）; }}
＃阻止{
寬度：400像素; 高度：400像素;
位置：相對;
頂：200像素;
背景：RGBA（98，123，157，0）; }

3.動畫類
對于此步驟的類將被添加到各個元件的用戶點擊之后。 他們呼吁每個元素的權動畫關鍵幀，將調用播放一次，然后停止在100％的最終關鍵幀離開該國的動畫。

4.風格圈子
圈是可點擊的并且這被定位在屏幕上剛剛超過原始面板的元件。 遵循此關鍵幀顯示新的立場，即圈將動畫已經壓后，在屏幕上移動到。
#circle {
位置：相對;
寬度：80px; 高度：80px;
左：160像素; 頂：160像素;
背景：RGB（70，85，105）;
邊界半徑：50％;}
@keyframes animation2 {
0％{}
100％{變換：translateY（-400px）;}}

5.隱藏文本
在第一次加載頁面時，文本設定其不透明度為零，并隱藏。 當點擊了一圈，表演類將被添加但對文字有1.5秒的延遲，從而其他元素完成其移動到位，這只會動畫。
＃文本 {
過渡：所有0.5S放心;
過渡延遲：1.5秒;
填充：20像素; }
.hide {不透明：0; }
.show {不透明度：1; }

6.做到這一點
被點擊時的圓圈調用啟動功能。 以下應在頁面底部被添加到腳本代碼。 前三行搶訪問元素，變量緩存他們。 當點擊相應的類添加。
VAR塊=的document.getElementById（“塊”）;
VAR圈=的document.getElementById（“一圈”）;
VAR TXT =的document.getElementById（“TXT”）;
VAR開放= FALSE;
函數的start（）{
block.classList.add（“anim1”）;
circle.classList.add（“anim2”）;
txt.classList.add（“秀”）; }

本文題目：使用CSS設計動畫彈出面板
轉載來于：http://www.js-pz168.com/news/19848.html

成都網站建設公司_創新互聯，為您提供商城網站、建站公司、軟件開發、企業建站、網站營銷、外貿網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯