您現在的位置是:電腦技術吧?>? 基礎知識 ??>??利用通道實現了,可以利用BBS實現的是??>??正文詳情

利用通道實現了,可以利用BBS實現的是

富騫騫2019-11-26 17:51:27 人圍觀
簡介炫酷的頭像今天,讓我們在Carl philipebrenner的網站上探索一個微妙而有趣的動畫效果。當鼠標通過網格元素時,將會有一個微妙的動畫。網格元素變得透明,每個邊都炫酷背景圖

今天我們來探索一下Carl Philipe Brenner的網站上一個微妙而有趣的動畫效果。

當鼠標經過網格元素時,會有一個微妙的動畫發生網格元素變得透明,每條邊有個順時針的動畫,創造了非常好的效果。

這種效果是通過JS給span標簽的寬或者高做了動畫。

我們待會會用SVG和CSS漸變來完成。

注意,這個技術還是實驗性的。

  首先,讓我們來看看基本的概念,然后我們會朝著這個方向努力。

  請注意,我們將在SVG上使用CSS過渡,可能無法得到所有瀏覽器的支持。

  乍眼一看可能不明白這個效果是怎么完成的。

我們先仔細看看上面的邊就會發現,白色的邊的寬度不斷從右邊往左邊延伸,而一條稍微延時的邊緊跟著一起移動。

每條邊都有這樣的做法。

看起來就像上面的邊經過拐角移動到了左邊,并以此類推。

  不用SVG也能完成這樣的效果,甚至只用偽元素。

但是我們想探索一下怎樣用CSS而不是JavaScript來控制SVG。

  現在,來思考一下要怎么創建出這樣的效果。

我們可以改變矩形的troke-dashoffset或者直接畫線。

我們嘗試不用JavaScript的解決方案。

我們發現,CSS過渡stroke-dashoffset 和 stroke-dasharray的值會觸發很多BUG。

所以我們要嘗試不同的解決方案,利用線條和它們的動畫,這在CSS里很容易理解和實現。

這也給我們更多機會去探索不同的動畫效果。

  我們將要使用的線的特別之處是,它們在這個動畫里將有三種狀態。

它們是方盒邊長的三倍,其中中間一截是與邊等長的間隙。

我們將通過設置stroke-dashoffset的值來實現與方盒的邊等長。

現在,這個動畫實現的關鍵在于線的位置轉換:

  SVG與方盒大小一致,就不會看到超出虛線的部分。

  我們先完成第一條線: CSS Code復制內容到剪貼板

  1. div svg width=200 height=200
  2. line x1=0 y1=0 x2=600 y2=0 / /svg
  3. /div
  這個div長寬20px,和SVG一樣。

把SVG位置設為absolute,線寬度為10,stroke-dasharray為200。

  CSS Code復制內容到剪貼板  div {  width: 200px;  height: 200px;  position: relative;  overflow: hidden;  background: #ddd;  }  svg {  position: absolute;  top: 0;  left: 0;  }  svg line {  stroke-width: 10;  stroke: #000;  fill: none;  stroke-dasharray: 200;  -webkit-transition: -webkit-transform .6s ease-out;  transition: transform .6s ease-out;  }  div:hover svg line {  -webkit-transform: translateX(-400px);  transform: translateX(-400px);  }  當數鼠標懸浮在div上時,線也有一個過渡。

我們要把線移動到它的三分之二處,所以要在x軸上移動到-400px處,你可以看看這個效果。

因為translation不能在這里用百分比做單位,所以用px。

  接著添加其余三條線,gif效果:

  我們需要實現以下效果:線的第一部分移出方盒后,旁邊的線的最后一部分移動進來,,這將傳進直線在轉角處轉彎的假象,  來看看坐標系的定義:

  左邊的線的坐標是(0,200) 到 (0,-400),底部的是(200,200) 到 (-400,200),右邊的是right one (200,0) 到 (200,600):  給每條線加上不同的hover效果:  CSS Code復制內容到剪貼板  div:hover svg line.top {  -webkit-transform: translateX(-400px);  transform: translateX(-400px);  }  div:hover svg line.bottombottom {  -webkit-transform: translateX(400px);  transform: translateX(400px);  }  div:hover svg line.left {  -webkit-transform: translateY(400px);  transform: translateY(400px);  }  div:hover svg line.rightright {  -webkit-transform: translateY(-400px);  transform: translateY(-400px);  }  看看現在的效果。

  現在方盒大小改為300 x 460,再給它添加一些內容:  CSS Code復制內容到剪貼板        D  2012  Broccoli, Asparagus, Curry    為了實現Carl Philipe Brenner的網站上的效果,我們還要添加顏色過渡效果、盒子陰影等:  CSS Code復制內容到剪貼板  .box {  width: 300px;  height: 460px;  position: relative;  background: rgba(255,255,255,1);  display: inline-block;  margin: 0 10px;  cursor: pointer;  color: #2c3e50;  box-shadow: inset 0 0 0 3px #2c3e50;  -webkit-transition: background 0.4s 0.5s;  transition: background 0.4s 0.5s;  }  .box:hover {  background: rgba(255,255,255,0);  -webkit-transition-delay: 0s;  transition-delay: 0s;  }  給文字加上樣式:  CSS Code復制內容到剪貼板  .box h3 {  font-family: Ruthie, cursive;  font-size: 180px;  line-height: 370px;  margin: 0;  font-weight: 400;  width: 100%;  }  .box span {  display: block;  font-weight: 400;  text-transform: uppercase;  letter-spacing: 1px;  font-size: 13px;  padding: 5px;  }  .box h3,  .box span {  -webkit-transition: color 0.4s 0.5s;  transition: color 0.4s 0.5s;  }  .box:hover h3,  .box:hover span {  color: #fff;  -webkit-transition-delay: 0s;  transition-delay: 0s;  }  給SVG和線條添加樣式:  CSS Code復制內容到剪貼板  .box svg {  position: absolute;  top: 0;  left: 0;  }  .box svg line {  stroke-width: 3;  stroke: #ecf0f1;  fill: none;  -webkit-transition: all .8s ease-in-out;  transition: all .8s ease-in-out;  }  給線的過渡加上延時:  CSS Code復制內容到剪貼板  .box:hover svg line {  -webkit-transition-delay: 0.1s;  transition-delay: 0.1s;  }  之前我們定義的stroke-dasharray只有一個值,但是現在要因尺寸變化而修改  CSS Code復制內容到剪貼板  .box svg line.top,  .box svg line.bottombottom {  stroke-dasharray: 330 240;  }  .box svg line.left,  .box svg line.rightright {  stroke-dasharray: 490 400;  }  如果你嘗試這些值,你就能看到這些線條不同的顯示效果。

  最后,我們要個hover過渡設置相應的值。

因為現在元素是300px寬,所以水平線條改為900px,豎線同理改變:  CSS Code復制內容到剪貼板  .box:hover svg line.top {  -webkit-transform: translateX(-600px);  transform: translateX(-600px);  }  .box:hover svg line.bottombottom {  -webkit-transform: translateX(600px);  transform: translateX(600px);  }  .box:hover svg line.left {  -webkit-transform: translateY(920px);  transform: translateY(920px);  }  .box:hover svg line.rightright {  -webkit-transform: translateY(-920px);  transform: translateY(-920px);  }  大功告成。

希望能通過這些效果激發你的創意,實現更多的效果~

版權聲明:本文由 富騫騫 整理編輯。

原標題:什么東西可以利用bbs實現,數據通道利用率

轉載注明出處:http://www.dn9ww09s.icu/basics/14525.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • usb接口有幾種,usb六種接口

    usb接口有幾種,usb六種接口 相關圖片usb c接口USB設備一連接,USB接口就會自動直接開始運行,這是一件讓人無法忍受的事情。那么,如何防止USB接口直接在計算機中運行呢?超人小編提醒你,如果你使用win7,usb2.0接口...

  • 瀏覽器應用程序,谷歌瀏覽器擴展程序

    瀏覽器應用程序,谷歌瀏覽器擴展程序 相關圖片瀏覽器打開目前,只有少數瀏覽器支持webgl,請參閱我的另一篇文章:我可以使用webgl嗎?。下面的例子是windows下的chrome 16/23和Android下的FlE瀏覽器進入...

  • 一加系統使用小技巧,一加系統使用教程

    一加系統使用小技巧,一加系統使用教程 相關圖片安卓系統小竅門一般來說,了解一些windows系統的操作技巧對我們的辦公有很大的幫助,比如節省時間,提高工作效率。所以超人給你帶來了一些關于Windows系統操作的提示,感興小米系統...

  • win7系統設置定時關機,win7定時關機怎么設置

    win7系統設置定時關機,win7定時關機怎么設置 相關圖片win7定時關機在辦公室里,經常會出現文件需要離開電腦傳輸的情況,很多電腦用戶會選擇安裝第三方軟件來設置win7系統自動關機。也許有很多用戶不喜歡這個操作,所以今天的編輯會教...

  • 哈羅單車計費方式,共享單車計費方式

    哈羅單車計費方式,共享單車計費方式 相關圖片共享單車怎樣收費共享單車現在是這個城市一道美麗的風景線。它有助于我們解決最近幾公里的交通障礙,緩解城市交通。但每輛自行車的收費都不一樣。小明自行車多少錢?我們和小...

  • 光影涂鴉,光影涂鴉怎么拍

    光影涂鴉,光影涂鴉怎么拍 相關圖片手機拍攝光影涂鴉這種沒有繪畫的涂鴉很受歡迎。它的魅力不僅體現在夜晚的輝煌,更體現在人們對一幅隨時都會幻滅的美麗圖畫的迷戀。總之,在黑暗中,用手電筒對著相機,揮手拍...

  • 大連到湖北,湖北大學

    大連到湖北,湖北大學 相關圖片大連在哪里湖北張達是一款面向大學生的手機信息軟件。除了豐富的在線信息外,還為大學生提供了便捷的在線功能。但近日,一位小伙伴回應稱,湖北省大連市不使用互聯網。那么大...

  • word怎么打不開了怎么辦,所有word文檔都打不開

    word怎么打不開了怎么辦,所有word文檔都打不開 相關圖片word注冊表數據庫損壞Word是我們日常生活中經常使用的辦公應用軟件之一。但是,如果文字不能打開,就會更加混亂,影響工作效率。如果遇到word無法打開并發送錯誤報告的情況,您知...

  • 折扇教程,折扇制作教程

    折扇教程,折扇制作教程 相關圖片折扇效果圖:第一步:畫原型第二步:畫原型第三步:補充第四步:修改第五步:拿扇形圈第六步:導入材料圖片美化第七步:文字裝飾材料圖片折扇怎么拿...

  • 內涵段子,內涵段子里發的網站

    內涵段子,內涵段子里發的網站 相關圖片發段子內涵段是一種流行的段共享應用。在這個軟件中,用戶可以閱讀各種有趣的故事。那么如何為內容段發送視頻呢?接下來,超人軟件編輯將介紹內容段iPhone視頻的上傳端適合發朋...

熱評文章

  • 圖片轉換ppt,如何將ppt轉換為圖片

    圖片轉換ppt,如何將ppt轉換為圖片 相關圖片圖片變成ppt雖然PPT在日常辦公中被廣泛用作演示文稿,但也有人將PPT轉換成圖片,以防被他人復制。所以問題是,我們如何將PPT批量轉換成圖像?讓我們看看快速的PDF轉換ppt轉高清圖片...

  • template標簽,template

    template標簽,template 相關圖片java中template標簽一、HTML5模板元素的初始元素基本確定在2013年出現。你為什么用它?現在只是聲明它是一個模板元素,我們將模板HTML嵌入到HTML中,通常是這樣寫的:復制Xtemplate file...

  • 京東金條10000一年利息,京東金條一萬一天利息

    京東金條10000一年利息,京東金條一萬一天利息 相關圖片京東金條分期6期怎樣算京東金條盈利是京東正式推出的個人貸款產品。很多人說他們想用它,但他們對興趣知之甚少。京東金條的興趣如何?京東金條的利息高嗎?接下來,超人軟件將...

  • 水晶球制作教程,自己制作水晶球的方法

    水晶球制作教程,自己制作水晶球的方法 相關圖片自制水晶球這篇文章是要做一個漂亮的超級水晶球煙花。方法很簡單。它是用圓形工具畫幾個球,把它們放在一起,調節光線,從而達到超光效的水晶球。原文:http://www.polps水晶球制作...

  • Excel怎么轉換成PDF,PDF轉換成Excel

    Excel怎么轉換成PDF,PDF轉換成Excel 相關圖片pdf轉換成excel是空白Excel是日常辦公中必不可少的數據處理軟件之一。它的獨特之處在于它是以表格的形式出現的,而且這個表格還具有計算功能。它對于統計、報表和數據排序是必不可...

  • 繪圖工具在哪,繪圖工具都有什么

    繪圖工具在哪,繪圖工具都有什么 相關圖片excel 繪圖工具在哪HTML5無疑是目前最流行的技術。每個網頁設計師都在討論這種神奇的標記語言的興起。HTML5是一種不費吹灰之力的標記語言,但它可以提供迷人的藝術特性,幫助網頁設...

  • 美顏相機大頭貼模板,美顏相機最新版

    美顏相機大頭貼模板,美顏相機最新版 相關圖片美顏相機孩子們有沒有看到美相機的代言人angelababy,對他為美相機宣傳的動畫海報非常興奮?他們想自己試試。那么如何使用美女相機的卡通貼紙呢?下面我們就來看看:美顏相機怎么...

  • 如何編程,編程有哪些

    如何編程,編程有哪些 相關圖片編程代碼干巴巴的意思是不要重復你自己。但事實上,這個名字有點無聊。哪種理論不是消除重復,而是如何消除重復的意義。一般來說,我認為drycss和OOCSS是兩個極端,所以算法編程...

  • 網頁僅html格式保存,網頁以html格式保存

    網頁僅html格式保存,網頁以html格式保存 相關圖片html網頁PPT通常用作演示文稿,但有時我們需要將PPT文檔用作HTML頁面,所以此時我們應該做什么?不可能重新編輯HTML,因此將PPT轉換為HTML格式html網頁文件保存的格式為...

  • 如何編程,編程有哪些

    如何編程,編程有哪些 相關圖片編程代碼OOCSS是面向對象的CSS。這里的對象是指頁面中的元素對象,它不同于傳統編程中的面向對象。例如,沒有方法。具體來說,一些附加的類可以看作是繼承類或接口類來實現算法編...

關注微信

变脸官网查询