整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          這18個網(wǎng)站能讓你的頁面背景炫酷起來

          這18個網(wǎng)站能讓你的頁面背景炫酷起來

          . CSS3 Patterns Gallery

          這18個網(wǎng)站是我在取經(jīng)路上意外發(fā)現(xiàn)的,里面包括 純CSS 實現(xiàn)的炫酷背景,還有專門制作背景圖的網(wǎng)站。 算是取經(jīng)路上的大補之物~


          ? 傳送門:https://projects.verou.me/css3patterns/

          如果你認(rèn)識 Lea Verou 的話,大概率知道這個網(wǎng)站,她徒手寫了幾十個 純CSS 實現(xiàn)的背景圖樣式。 網(wǎng)站上提供了她的代碼。
          如果你不認(rèn)識她,那我一定要推薦你閱讀一下 《CSS揭秘(圖靈出品)》 這本書,它會讓你大受震撼!



          2. CSS3 Gradients

          ? 傳送門:http://www.standardista.com/cssgradients/


          除了 Lea Verou 的網(wǎng)站外,CSS3 Gradients 也提供了這類示例。同樣提供代碼下載。



          3. CSS Gradients with background-blend-mode

          ? 傳送門:https://bennettfeely.com/gradients/


          功能和前面兩個差不多,自己點開看看唄~



          4. CSS Flags

          ? 傳送門:http://www.standardista.com/CSS3gradients/flags.html


          使用 純CSS 的方式畫出多國國旗。“右鍵 - 檢查網(wǎng)頁源代碼” 可以獲取代碼。



          5. Hero Patterns

          ? 傳送門:https://heropatterns.com/


          Hero Patterns 是比較出名網(wǎng)站了,官方提供了幾十款紋理,你可以根據(jù)自己的需求設(shè)置兩種對比色和不透明度。 完成后會返回一段CSS代碼給你,不過和前面幾個網(wǎng)站有點不同的是,Hero Patterns 的背景圖使用了 base64 的方式去實現(xiàn)的,而不是 CSS 背景漸變 的方式。



          6. HUE.CSS

          ? 傳送門:http://evankarageorgos.github.io/hue/grid.html


          使用 CSS 背景漸變 的方式做出的數(shù)十款高端大氣的背景,網(wǎng)站上的所有案例都提供了代碼。



          7. Pure CSS Stripes Generator

          ? 傳送門:https://stripesgenerator.com/


          Pure CSS Stripes Generator 主要是幫你生成 條紋背景 的代碼。 你可以在網(wǎng)站上根據(jù)自己的需求設(shè)置條紋的顏色、大小、傾斜角度等屬性。 最后會返回一段 css 代碼給你。



          8. Glass Morphism

          ? 傳送門:https://glassgenerator.netlify.app/


          Glass Morphism 的功能是設(shè)置 毛玻璃背景 樣式,你可以在上面手動調(diào)節(jié)毛玻璃的不透明度、模糊度、背景色等屬性。 最后會返回 html 和 css 代碼給你。 非常好玩,趕緊去試試吧~



          9. uiGradients

          ? 傳送門:https://uigradients.com/


          提供了不同色系搭配的漸變代碼。如果你不太擅長配色,可以使用 uiGradients



          10. Gradient Colors Collection Palette

          ? 傳送門:https://webkul.github.io/coolhue/


          Gradient Colors Collection Palette 上有幾十個色卡,可以一鍵復(fù)制 css 代碼。



          11. Fresh Background Gradients

          ? 傳送門:https://webgradients.com/


          Fresh Background Gradients 提供了即使個配色方案,有雙色的,也有多色的。同樣提供一鍵復(fù)制 css 代碼。



          12. Cool Backgrounds

          ? 傳送門:https://coolbackgrounds.io/


          可以生成 5種類型 的背景圖片,并且提供多套成熟的配色方案供你選擇。 但該網(wǎng)站生成的是背景圖片,不是代碼。



          13. Svg Wave

          ? 傳送門:https://svgwave.in/


          生成波浪背景圖,可以自定義波浪的幅度、顏色等屬性。 支持 SVG 和 PNG 下載。



          14. Subtle Patterns

          ? 傳送門:https://www.toptal.com/designers/subtlepatterns/


          提供了幾十種紋理圖。



          15. Stripe Generator

          ? 傳送門:http://www.stripegenerator.com/


          可配置的條紋背景圖片。



          16. ZenBG

          ? 傳送門:https://galactic.ink/bg/


          在線設(shè)置紋理背景和漸變顏色,最后融合在一起生成一張好看的圖片。 同時還提供 css 代碼給你參考,告訴你如何更好的使用這張圖片。



          17. Patterninja

          ? 傳送門:https://patterninja.com/


          光看圖片介紹就知道這個網(wǎng)站好好玩。 Patterninja 幫你生成可平鋪的背景圖。



          18. The Pattern Library

          ? 傳送門:http://thepatternlibrary.com/


          提供幾十款可平鋪的好看背景。 注意:下載按鈕在網(wǎng)頁的左上角。

          .檢查元素是否在屏幕可見區(qū)域內(nèi)

          我們?nèi)绾潍@得元素的點擊率?

          主要取決于用戶點擊元素的次數(shù)和元素在頁面上顯示的次數(shù)。

          我們可以很容易地獲取到用戶的點擊次數(shù),但是如何獲取一個元素的顯示次數(shù)呢?

          我們可以通過IntersectionObserver輕松實現(xiàn),大家可以點擊codepen體驗一下實際效果。

          <div class="tips">box is visible</div>
          <div class="box">box</div>
          <script>
            const $tips=document.querySelector('.tips')
            const callback=(entries)=> {
              entries.forEach((entry)=> {
                console.log(entry.intersectionRatio)
                if (entry.intersectionRatio > 0) {
                  $tips.innerHTML='box is visible'
                } else if (entry.intersectionRatio <=0) {
                  $tips.innerHTML='box is hidden'
                }
              });
            }
          
            const options={
              // A list of thresholds, sorted in increasing numeric order, where each threshold is a ratio of intersection area to bounding box area of an observed target. Notifications for a target are generated when any of the thresholds are crossed for that target. If no value was passed to the constructor, 0 is used.
              // threshold: 1,
            }
            const observer=new IntersectionObserver(callback, options)
            observer.observe(document.querySelector('.box'))
          </script>
          2.深拷貝一個對象
          
          我們經(jīng)常使用 lodash 來深拷貝一個對象。
          
          const obj={
            a: {
              b: {
                name: 'fatfish'
              }
            }
          }
          
          const obj2=lodash.cloneDeep(obj)
          
          obj2.a.b.name='medium'
          console.log(obj.a.b.name) // fatfish
          console.log(obj2.a.b.name) // medium

          但這非常麻煩,因為我們必須下載整個庫才能使用 cloneDeep。

          幸運的是,在大多數(shù)情況下,我們可以使用這兩種更簡單的方式來深拷貝一個對象。

          深度克隆1

          const deepClone1=(obj)=> {
            return JSON.parse(JSON.stringify(obj))
          }
          
          const obj={
            a: {
              b: {
                name: 'fatfish'
              }
            }
          }
          const obj2=deepClone1(obj)
          obj2.a.b.name='medium'
          console.log(obj.a.b.name) // fatfish
          console.log(obj2.a.b.name) // medium

          是的,我相信你已經(jīng)看到了,deepClone1 有一些缺陷,它不能復(fù)制函數(shù)、正則表達(dá)式、未定義等值。

          const deepClone1=(obj)=> {
            return JSON.parse(JSON.stringify(obj))
          }
          
          const obj={
            a: {
              b: {
                name: 'fatfish'
              }
            },
            reg: /fatfish/gi,
            name: undefined,
            showName: (name)=> console.log(name)
          }
          const obj2=deepClone1(obj)
          console.log(obj2)
          /*
          {
              "a": {
                  "b": {
                      "name": "fatfish"
                  }
              },
              "reg": {}
          }
          */

          深度克隆2

          另一種方法是使用 structuredClone。

          這非常方便,我們甚至可以不做任何處理就可以深拷貝一個對象。

          它甚至可以復(fù)制正則表達(dá)式和未定義的。

          const obj={
            a: {
              b: {
                name: 'fatfish'
              }
            },
            reg: /fatfish/gi,
            name: undefined,
          }
          
          const obj2=structuredClone(obj)
          obj2.a.b.name='medium'
          console.log(obj.a.b.name) // fatfish
          console.log(obj2.a.b.name) // medium
          console.log(obj2)
          /*
          {
              "a": {
                  "b": {
                      "name": "medium"
                  }
              },
              "reg": /fatfish/gi,
              "name": undefined
          }
          */

          但是真的沒有缺點嗎? 它在某些情況下也無法正常工作。

          • 它不能復(fù)制功能
          • 它不復(fù)制dom元素
          • ETC。


          3.獲取瀏覽器名稱

          在前端監(jiān)控系統(tǒng)中,需要獲取用戶出錯的瀏覽器。

          這是獲取主要瀏覽器名稱的通用函數(shù)。

          const getBrowserName=()=> {
            const userAgent=window.navigator.userAgent
            const browsers={
              chrome: /chrome/i,
              safari: /safari/i,
              firefox: /firefox/i,
              ie: /internet explorer/i,
              edge: /edge/i,
              opera: /opera|opr/i,
              yandex: /yandex/i,
              uc: /ucbrowser/i,
              samsung: /samsungbrowser/i,
              maxthon: /maxthon/i,
              phantomjs: /phantomjs/i,
              crios: /crios/i,
              firefoxios: /fxios/i,
              edgios: /edgios/i,
              safariios: /safari/i,
              android: /android/i,
              ios: /(iphone|ipad|ipod)/i,
              unknown: /unknown/i
            }
          
            for (const key in browsers) {
              if (browsers[key].test(userAgent)) {
                return key
              }
            }
            return 'unknown'
          }
          // Execute the above code in chrome browser
          console.log(getBrowserName()) // chrome
          // Execute the above code in safari browser
          console.log(getBrowserName()) // safari

          4.獲取隨機(jī)顏色

          我怎樣才能得到一個隨機(jī)的有效顏色?

          大家可以點擊codepen鏈接體驗實際效果。

          const randomColor=()=> {
            // Generate three random numbers as the three components of an RGB color value
            const r=Math.floor(Math.random() * 256);
            const g=Math.floor(Math.random() * 256);
            const b=Math.floor(Math.random() * 256);
            // Convert RGB color values to hexadecimal format
            const hexR=r.toString(16).padStart(2, '0');
            const hexG=g.toString(16).padStart(2, '0');
            const hexB=b.toString(16).padStart(2, '0');
            // Concatenated into a complete color value string
            const hexColor=`#${hexR}${hexG}${hexB}`;
            return hexColor;
          }

          演示地址:https://code.juejin.cn/pen/7259289776530915385

          5.復(fù)制內(nèi)容到剪貼板

          為了給我們的網(wǎng)站用戶提供更好的交互體驗,我們經(jīng)常需要提供將內(nèi)容復(fù)制到剪貼板的功能。

          難以置信的是,我們竟然只需要6行代碼就可以實現(xiàn)這個功能。

          const copyToClipboard=(content)=> {
            const textarea=document.createElement("textarea")
            textarea.value=content
            document.body.appendChild(textarea)
            textarea.select()
            document.execCommand("Copy")
            textarea.remove()
          }
          
          copyToClipboard('i love medium') // i love medium

          演示地址:https://code.juejin.cn/pen/7259288042232840248

          6.從搜索中獲取查詢字符串

          使用 URLSearchParams 解析搜索數(shù)據(jù)變得非常容易。

          const getSearchParam=(name)=> {
            const searchParams=new URLSearchParams(window.location.search)
            return searchParams.get(name)
          }
          
          // https://medium.com?name=fatfish&age=1000
          console.log(getSearchParam('name')) // fatfish
          console.log(getSearchParam('age')) // 1000
          const getSearchParams=()=> {
            const searchParams=new URLSearchParams(window.location.search)
            const params={};
            for (const [ key, value ] of searchParams) {
              params[key]=value
            }
          
            return params
          }
          // https://medium.com?name=fatfish&age=1000
          getSearchParams() // { name: 'fatfish', age: 1000 }

          7.將元素滾動到頁面頂部

          我們可以使用 scrollIntoView 方法將元素滾動到頁面頂部。甚至它可以提供非常流暢的用戶體驗。

          const scrollToTop=(ele)=> {
            ele.scrollIntoView({ behavior: "smooth", block: "start" })
          }
          
          document.querySelector('button').addEventListener('click', function () {
            scrollToTop(this)
          }, false)

          8.將元素滾動到頁面底部

          將元素滾動到頂部是如此簡單。

          那我們要如何將元素滾動到頁面底部?我想你已經(jīng)猜到了,設(shè)置block結(jié)束即可。

          const scrollToTop=(ele)=> {
            ele.scrollIntoView({ behavior: "smooth", block: "end" })
          }
          
          document.querySelector('button').addEventListener('click', function () {
            scrollToTop(this)
          }, false)

          演示地址:https://code.juejin.cn/pen/7259278531174072379

          畫過渡效果對于程序的重要性是毋容置疑的,過渡動畫的流暢真的能給人一種程序很順暢的感覺。ios系統(tǒng)基本上不管是什么操作都喜歡運用動畫過渡,所以給人一種超流暢的感覺!在進(jìn)行 web 開發(fā)中,我們經(jīng)常需要為網(wǎng)頁添加大量的動畫來使頁面變得更流暢,更炫酷。但是寫動畫其實是一件很繁瑣的事情,所以引入成熟的動畫插件就很舒服了。

          效果展示

          wowjs

          介紹:在一些網(wǎng)頁上,當(dāng)你滾動頁面的時候會看到各式各樣的元素動畫效果,非常動感。WOW.js 就是一款幫助你實現(xiàn)這種 CSS 動畫效果的插件,很容易定制,你可以改變動畫設(shè)置喜歡的風(fēng)格、延遲、長度、偏移和迭代等。

          官網(wǎng)效果展示:https://www.delac.io/wow/

          github: https://github.com/matthieua/WOW

          使用方法

          • 下載:npm install wowjs --save
          • 引入使用:

          之后我們把 animate.css 引入進(jìn)來就可以使用了。

          引入 animate.css

          介紹:animate.css 是一個css3動畫庫,包含76種動畫,并且完全免費開源,可以到github上去下載,使用方法也非常簡單,并且因為是css庫的原因,完全兼容 H5小程序以及uni-app

          官網(wǎng):https://daneden.github.io/animate.css/

          github: https://github.com/daneden/animate.css

          下載:npm install animate.css --save

          引入:import './animate.css'

          ps: 如果需要兼容 小程序 uni-app 可以看看這篇:在H5,小程序,uni-app中使用animate.css

          使用方法

          在需要用到這個效果的元素上面添加class="wow fadeInUp" 和 data-wow-delay=".1s",具體所表示的含義在下圖中有說明

          沒錯!引入之后使用就是這么簡單!!


          主站蜘蛛池模板: 久久久久人妻一区二区三区vr| 乱人伦一区二区三区| 精品国产高清自在线一区二区三区| 日本一区视频在线播放| 亚洲高清一区二区三区电影| 一夲道无码人妻精品一区二区| 一区二区三区四区在线视频| 韩国精品一区视频在线播放| 伊人久久大香线蕉AV一区二区| 亚洲一区AV无码少妇电影☆| 中文字幕在线无码一区二区三区| 欧洲精品码一区二区三区免费看| 国产精品一区二区三区高清在线 | 亚洲国产精品一区二区九九 | 一本AV高清一区二区三区| 一区二区三区波多野结衣| 日韩A无码AV一区二区三区| 国模极品一区二区三区| 精品日韩一区二区三区视频| 日韩一区二区a片免费观看| 亚洲熟妇无码一区二区三区 | 亚洲欧美国产国产综合一区| 2021国产精品视频一区| 中日韩精品无码一区二区三区| 国产精品分类视频分类一区| 久久精品无码一区二区WWW| 99精品国产高清一区二区麻豆| 欧美av色香蕉一区二区蜜桃小说 | 国产在线一区二区杨幂| 色噜噜一区二区三区| 国产在线精品一区二区夜色| 精品aⅴ一区二区三区| 国产AV午夜精品一区二区三区| 日韩人妻无码一区二区三区99| 中文乱码人妻系列一区二区| 国产麻豆剧果冻传媒一区| 国产高清精品一区| 又硬又粗又大一区二区三区视频| 久久精品一区二区三区日韩 | 亲子乱av一区二区三区| 亚洲无人区一区二区三区|