跳到主要内容

如何使用mo.js库动画

Mo.js: animation
+$(Image credit: Pexels/Frank Kagumba)

+$Mo.js is a unique motion graphics JavaScript library that not only facilitates full-screen page animation loaders, but also click-to-animate micro-interactions, and tons of shape manipulations.

+$If you have been following the web design scene for a while now, chances are that you will have come across – or perhaps interacted with – a wide array of animation techniques and libraries. Core technologies such as CSS, HTML5 and JavaScript are becoming even more powerful, and browser support is improving with time. The implication is that more sophisticated web animations can be supported across devices.

+$Need some animation inspiration? Here are some awesome examples of topCSS动画+$to Recreate.

+$How can mo.js help?

+$Web animation, as it appears, is here to stay. However, a shortcoming with most popular animation techniques is that they are gravitated towards animating conventional UI/UX elements such as slideshows, tabbed buttons and drop-down menus. As a result, using them can eventually make your site too familiar and non-exciting.

+$Mo.js can help with this. Using the library helps to animate the not-so-ordinary site elements by utilizing its built-in components such as html, shape, swirl, burst and stagger. The library is very easy to use, fast, retina ready, modular and open source. In this tutorial, the basics of working with mo.js are introduced and two techniques demonstrated; blast and bubble.

01.开始吧

+$Begin by creating a folder, mo.js, on your desktop to store the tutorial files. Create three additional folders within it: css to store the styling files, img for images and js for the JavaScript files. HTML files will be stored in the root folder.

+$02. Create Page Structure

+$Open your code editor and create an index.html document to contain mark up for the main web page. Begin by creating the basic structure and give a suitable title to the page.

+$    Blast Technique < title> </head> <body> </body> </html></code></pre><h2 id="03-structure-the-page">+$03. Structure The Page</h2><p>+$The tutorial is divided into two parts; the first demonstrates the blast technique, whereas the second illustrates the bubble concept. As a result, we prepare two HTML files, one for each technique. To kick-start the blast technique, create a div section to contain the page title. Render the page in your browser where you should observe un-styled text at the top-left corner.</p><pre class="line-numbers language-html" language="html"><code>+$<body> <div class="text"> <p> Mo.js Animation </p> </div> </body></code></pre><h2 id="04-link-the-css">+$04. Link The CSS</h2><p>+$Open your code editor and create styles.css file inside the css folder. Create a link to this file in your html document by adding this code in the head section,<strong>+$<link rel=”stylesheet” href =”css/styles.css” ></strong>+$. Since no styles have been added, the page renders as illustrated in step 3. Alternatively, since the styling is minimal, you can opt to use inline styling by combining the HTML and CSS.</p><h2 id="05-style-the-background">+$05. Style The Background</h2><figure data-bordeaux-image-check="data-bordeaux-image-check"><p class="vanilla-image-block"><img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="Mo.js: step 5" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/RnJCcism4LyLrxPLBxT9Mc-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/RnJCcism4LyLrxPLBxT9Mc-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/RnJCcism4LyLrxPLBxT9Mc-650-80.jpg 650w, https://cdn.mos.cms.futurecdn.net/RnJCcism4LyLrxPLBxT9Mc-970-80.jpg 970w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/RnJCcism4LyLrxPLBxT9Mc.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/RnJCcism4LyLrxPLBxT9Mc.jpg" /></p><figcaption itemprop="caption description"><span class="credit" itemprop="copyrightHolder">+$(Image credit: Pexels/Frank Kagumba)</span></figcaption></figure><p>+$Next, we style the background by adding a background image. We have used the free scenic landscape background by Nikolai Ultang from Pexels. You can<a href="https://www.pexels.com/photo/scenic-view-of-landscape-against-sky-325139/" rel="nofollow" target="_blank">+$download It Here</a>+$. Save this (or your own image) inside the img folder. Render the page to show changes to the background.</p><pre class="line-numbers language-html" language="html"><code>+$body, html { background-image: url (bg.jpg); background-size: cover; padding: 0; margin: 0; width: 100%; height: 100%; overflow: hidden; }</code></pre><h2 id="06-style-the-text">+$06. Style The Text</h2><figure data-bordeaux-image-check="data-bordeaux-image-check"><p class="vanilla-image-block"><img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="Mo.js: Step 06" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/Pwhn48vDBTvTTvr7gabgPc-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/Pwhn48vDBTvTTvr7gabgPc-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/Pwhn48vDBTvTTvr7gabgPc-650-80.jpg 650w, https://cdn.mos.cms.futurecdn.net/Pwhn48vDBTvTTvr7gabgPc-970-80.jpg 970w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/Pwhn48vDBTvTTvr7gabgPc.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/Pwhn48vDBTvTTvr7gabgPc.jpg" /></p><figcaption itemprop="caption description"><span class="credit" itemprop="copyrightHolder">+$(Image credit: Pexels/Frank Kagumba)</span></figcaption></figure><p>+$The text is then styled to render at the centre of the page, as it currently appears at the top left corner. Note that to centralise the text, we select an absolute position and set its exact positioning using the top, left and right margins. The text is also transformed using the text-transform property. The text-align property is also set to centre.</p><pre class="line-numbers language-html" language="html"><code>+$text { font-family: Century Gothic, sans-serif; color: #fff; text-transform: uppercase; font-size: 50px; font-weight: bolder; position: absolute; top:50px; left: 25%; right: 30%; text-align: center; }</code></pre><h2 id="07-install-mo-js">+$07. Install Mo.js</h2><p>+$As with other libraries, mo.js is installed through multiple options. The simplest approach, which we employ, is accessing it directly from a CDN server. Add the following code in the body section.</p><pre class="line-numbers language-html" language="html"><code>+$<script src= ‘//cdn.jsdelivr.net mojs/0.265.6/mo.min.js’></script></code></pre><p>+$In case you are developing offline, the library can be<a href="https://github.com/mojs/" rel="nofollow" target="_blank">+$downloaded directly from GitHub</a>+$and installed by using the Bower or NPM packages by using the appropriate commands.</p><pre class="line-numbers language-html" language="html"><code>+$bower install mo-js npm install mo-js</code></pre><p>+$Once downloaded, it can be referenced directly.</p><pre class="line-numbers language-html" language="html"><code>+$<script src="mo.js" type="text javascript"></script></code></pre><p>+$Finally, create a new script.js file and save it in the js folder. We will add JavaScript functionality to this file. Link it in the body section as follows. Place it below the text title as shown below.</p><pre class="line-numbers language-html" language="html"><code>+$<body> <div class="text"> <p> mo.js Animation </p> </div> <script src='https://cdn.jsdelivr net/mojs/0.265.6/mo.min.js'></script> <script src="js/script.js">< script> </body></code></pre><h2 id="08-create-the-first-blast">+$08. Create the first blast</h2><p>+$Before proceeding to develop the code, it wise to highlight what we are creating. To blast something simply means to break it apart into smaller bits in an explosive manner. We will create a simple object (circle) and set it up search that when a user clicks it, it breaks apart in an explosive manner.</p><h2 id="09-create-the-circle-object">+$09. Create the circle object</h2><figure data-bordeaux-image-check="data-bordeaux-image-check"><p class="vanilla-image-block"><img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="Mo.js: Step 09" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/s2wz3Xp55rAHsdMdrFU2Sc-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/s2wz3Xp55rAHsdMdrFU2Sc-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/s2wz3Xp55rAHsdMdrFU2Sc-650-80.jpg 650w, https://cdn.mos.cms.futurecdn.net/s2wz3Xp55rAHsdMdrFU2Sc-970-80.jpg 970w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/s2wz3Xp55rAHsdMdrFU2Sc.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/s2wz3Xp55rAHsdMdrFU2Sc.jpg" /></p><figcaption itemprop="caption description"><span class="credit" itemprop="copyrightHolder">+$(Image credit: Pexels/Frank Kagumba)</span></figcaption></figure><p>+$First, the object to be blasted is created (circle). However, mo.js supports other shapes, including rectangle (rect), cross, equal, zigzag and polygon. Where you fail to specify the shape type, it will default to a circle.To create a simple circle, declare it using the var or const and assign its attributes by calling the shape function.</p><pre class="line-numbers language-html" language="html"><code>+$//creating a simple object Const Circ = new mojs.Shape({ isShowStart: true, radius: 100, });</code></pre><p class="mid__article"></p><p>+$The code creates the default circle object with the given radius. The isShowStart variable is assigned a Boolean value to specify whether you need to show the object or not. Render the code to display a small magenta-coloured circle at the centre of the page.</p><h2 id="10-animate-the-circle">+$10. Animate The Circle</h2><p>+$The code snippet specifies that the scale and opacity will change from 1 to 0, indicating that the object disappears. Aduration and delay of the animation are also set. Note that the animation does not play since we are yet to initialise it. To do so, add the function below.</p><pre class="line-numbers language-html" language="html"><code>+$document.addEventListener('click', function (e) { Circ. replay ( ); });</code></pre><h2 id="11-make-exploding-polygons">+$11. Make Exploding Polygons</h2><figure data-bordeaux-image-check="data-bordeaux-image-check"><p class="vanilla-image-block"><img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="Mo.js: Step 11" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/AfNU8WqP5edWRuevX2WdUc-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/AfNU8WqP5edWRuevX2WdUc-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/AfNU8WqP5edWRuevX2WdUc-650-80.jpg 650w, https://cdn.mos.cms.futurecdn.net/AfNU8WqP5edWRuevX2WdUc-970-80.jpg 970w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/AfNU8WqP5edWRuevX2WdUc.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/AfNU8WqP5edWRuevX2WdUc.jpg" /></p><figcaption itemprop="caption description"><span class="credit" itemprop="copyrightHolder">+$(Image credit: Pexels/Frank Kagumba)</span></figcaption></figure><p>+$Now that the circle is animating, we create a blast animation that renders at the same time. The first blast uses the polygon shapes to draw out the explosion. To create a blast, use the mo.js function Burst as shown in the code snippet below.</p><pre class="line-numbers language-html" language="html"><code>+$const burst1 = new mojs.Burst({ left: 0, top: 0, count: 7, radius: { 50: 250 }, children: { fill: ‘white’, shape: ‘polygon’, stroke: {‘white’:’#A50710’}, strokeWidth: 4, radius: ‘rand(30, 60)’, radiusY: 0, scale: {1: 0 }, pathScale: ‘rand(.5, 1)’, degree: 360, isForce3d: true } });</code></pre><p>+$The code assigns seven polygon shapes to the explosion and specifies two radii. The first refers to the overall animation, while the second focuses on the specific polygon objects within the animation. Ensure to add the burst to the event listener function so that it responds to mouse clicks. Note that two new parameters have been added; the tune and generate. Tune makes the blast to render anywhere in the page, whereas generate initialises the burst animation. Render the page. Observe the exploding elements that appear at the same time as the circle.</p><pre class="line-numbers language-html" language="html"><code>+$document.addEventListener(‘click’, function (e) { burst1. tune ({ x: e.pageX, y: e.pageY }). generate (). replay (); Circ. replay ( ); });</code></pre><h2 id="12-create-the-second-blast">+$12. Create the second blast</h2><figure data-bordeaux-image-check="data-bordeaux-image-check"><p class="vanilla-image-block"><img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="Mo.js: Step 12" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/aqe5dYtQWEVW3nHpJwwCWc-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/aqe5dYtQWEVW3nHpJwwCWc-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/aqe5dYtQWEVW3nHpJwwCWc-650-80.jpg 650w, https://cdn.mos.cms.futurecdn.net/aqe5dYtQWEVW3nHpJwwCWc-970-80.jpg 970w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/aqe5dYtQWEVW3nHpJwwCWc.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/aqe5dYtQWEVW3nHpJwwCWc.jpg" /></p><figcaption itemprop="caption description"><span class="credit" itemprop="copyrightHolder">+$(Image credit: Pexels/Frank Kagumba)</span></figcaption></figure><p>+$Next, we create the second blast by using different shape options. The code follows the structure of the previous blast and only changes a few parameters.</p><pre class="line-numbers language-html" language="html"><code>+$const burst2 = new mojs.Burst({ top: 0, left: 0, count: 4, radius: { 0: 250 }, children: { shape: [‘circle’, ‘rect’], points: 5, fill: [‘white’], radius: ‘rand(30, 60)’, delay: ‘stagger(50)’, easing: [‘cubic.out’, ‘cubic.out’, ‘cubic.out’], scale: { 1: 0 }, pathScale: ‘rand(.5, 1)’, isForce3d: true } });</code></pre><p>+$Add the burst to the event listener function.</p><pre class="line-numbers language-html" language="html"><code>+$document.addEventListener(‘click’, function (e) { burst1. tune ({ x: e.pageX, y: e.pageY }). generate (). replay (); burst2. tune({ x: e.pageX, y: e.pageY }). generate(). replay(); Circ. replay ( ); });</code></pre><h2 id="13-add-circle-explosions">+$13. Add Circle Explosions</h2><p>+$In order to enhance the animation further, we add circular explosions. Examining the code in steps 11 and 12 reveals a lot of similarities existing between the two type of bursts. In creating the third blast, we avoid rewriting too much code by using the spread operator which is written as three dots (...). However, first, we declare a variable that contains the similar features that we want to reuse. Thereafter, the other two circles can be created by simply using the spread operator.</p><pre class="line-numbers language-html" language="html"><code>+$// creating the variable with similar parameters const CIRCLE_OPTS = { left: 0, top: 0, fill: ‘white’, scale: { .2: 1 }, opacity: { 1: 0 }, isForce3d: true, isShowEnd: false };</code></pre><p>+$The code specifies the fill type, scale, opacity and whether to display them at the end of the animation. The two circle animations are created as follows.</p><pre class="line-numbers language-html" language="html"><code>+$const circle1 = new mojs.Shape({ ...CIRCLE_OPTS, radius: 200 }); const circle2 = new mojs.Shape({ ...CIRCLE_OPTS, radius: 240, easing: ‘cubic.out’, delay: 300 });</code></pre><p>+$Add the circular shapes.</p><pre class="line-numbers language-html" language="html"><code>+$document.addEventListener(‘click’, function (e) { burst1. tune ({ x: e.pageX, y: e.pageY }). generate (). replay (); burst2. tune({ x: e.pageX, y: e.pageY }). generate(). replay(); Circ. replay ( ); });</code></pre><h2 id="14-render-a-basic-bubble">+$14. Render a basic bubble</h2><p>+$Unlike the blast animation, which breaks the object into smaller pieces, the bubble animation, on the other hand, translates the clicked object into a bigger space. The concept adopts the analogy of blowing up a balloon where the object continually expands in size. To do this, we simply create a new variable openBackground and assign attributes that will make the entire background achieve a similar colour to the object. As a result, this creates the nuance of bubbling.</p><pre class="line-numbers language-html" language="html"><code>+$const openBackground = new mojs.Shape({ fill: ‘#FC2D79’, left: 0, top: 0, scale: { 0: 4.5 }, isShowStart: true, radius: 15, isForce3d: true, isTimelineLess: true, delay: 150, radius: 200, easing: ‘cubic.out’, backwardEasing: ‘expo.in’, });</code></pre><p>+$Ensure to add the background variable to the event listener function.</p><pre class="line-numbers language-html" language="html"><code>+$openBackground. tune({ x: e.pageX, y: e.pageY }). replay();</code></pre><h2 id="15-add-multiple-shapes">+$15. Add Multiple Shapes</h2><p>+$Following the concept in step 14, we now advance the example to include multiple coloured circular objects, which upon clicking expand in a similar manner and display some text. Edit the existing html file and copy the code within the body. It creates the basic structure of the page.</p><h2 id="16-add-helper-libraries">+$16. Add Helper Libraries</h2><p>+$Next, some additional libraries are added in the body section in order to facilitate scrolling and produce sounds when the objects are clicked.</p><pre class="line-numbers language-html" language="html"><code>+$<script src=’https://cdnjs.cloudflare.com ajax/libs/howler/1.1.26/howler.min.js’>< script> <script src=’https://cdn.jsdelivr.net mojs/0.119.0/mo.min.js’></script> <script src=’https://cdn.jsdelivr.net hammerjs/2.0.4/hammer.min.js’></script> <script src=’https://cdnjs.cloudflare.com ajax/libs/iScroll/5.1.1/iscroll-probe.min js’> </script></code></pre><h2 id="17-advance-the-animation">+$17. Advance The Animation</h2><p>+$Next, we add styles for the individual classes highlighted in the html files. The mo.js functionality is then added. The full code (css and js) is shared with the tutorial files for review.</p><h2 id="18-learn-more-about-mo-js">+$18. Learn more about mo.js</h2><p>+$While the tutorial demonstrates the bubble and blast techniques, there are further resources available online that can help you fast-track your learning process. Some of these include<a href="https://mojs.github.io/tutorials/" rel="nofollow" target="_blank">+$mo.js tutorials on Github</a>和<a href="https://github.com/mojs/mojs" rel="nofollow" target="_blank">+$demos also on Github</a>。</p><p><em>+$This article was originally published in issue 291 of creative web design magazine</em><a href="https://www.n2v.net/web-designer-magazine" target="_blank"><em>网页设计者</em></a><em>。</em><a href="https://www.myfavouritemagazines.co.uk/web-designer-print-back-issues/web-designer-issue-291/" rel="nofollow" target="_blank"><em>+$Buy Issue 291</em></a><em>。</em></p><p><strong>阅读更多:</strong></p><ul><li><a href="https://www.n2v.net/news/pure-css-art" target="_blank">Css艺术被旧的浏览器毁得光彩照人。</a></li><li><a href="https://www.n2v.net/ux/best-user-testing-software-61515337" target="_blank">最好的用户测试软件</a></li><li><a href="https://www.n2v.net/web-design/examples-ui-design-7133429" target="_blank">+$Great UI Designs</a></li></ul>
</div>
<div class="box">
<a class="block-link full" href="https://www.n2v.net/tag/web-design"><span class="chunk category">请参阅更多Web设计文章</span><div class="block-icon"><span class="icon icon-arrow-right"></span></div></a>
</div>
<div id="this-will-be-used-for-mpu-2"></div>
<div class="box" id="articleTag">
<h3 class="separator-heading">话题</h3>
<div class="tag">
<a href="https://www.n2v.net/tag/web-design">网页设计</a>
</div>
<div class="tag">
<a href="https://www.n2v.net/tag/animation">动画</a>
</div>
<div class="tag">
<a href="https://www.n2v.net/tag/ux">UX</a>
</div>
<div class="tag">
<a href="https://www.n2v.net/tag/magcontent">Magcontent</a>
</div>
<div class="tag">
<a href="https://www.n2v.net/web-designer">网页设计者</a>
</div>
<div class="tag">
<a href="https://www.n2v.net/tag/web-design">网页设计</a>
</div>
</div>
<div class="box">
<h4 class="separator-heading">相关文章</h4>
<ul class="media-list">
<li>
<a href="https://www.n2v.net/features/adobe-deals">
<img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="Adobe Cyber Monday deals: today's BIGGEST Creative Cloud offers" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/DFptniPQHv4TtT3sKyqLVV-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/DFptniPQHv4TtT3sKyqLVV-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/DFptniPQHv4TtT3sKyqLVV-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/DFptniPQHv4TtT3sKyqLVV-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/DFptniPQHv4TtT3sKyqLVV-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/DFptniPQHv4TtT3sKyqLVV.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/DFptniPQHv4TtT3sKyqLVV.jpg" />
<span>AdobeCyber周一交易:今天最大的CreativeCloud提供</span>
</a>
</li>
<li>
<a href="https://www.n2v.net/features/best-ultrawide-monitor">
<img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="The best ultrawide monitor in 2019" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/Sy2GFkaKdoJr4nv2CJiPWZ-320-80.png" data-srcset="https://cdn.mos.cms.futurecdn.net/Sy2GFkaKdoJr4nv2CJiPWZ-320-80.png 320w, https://cdn.mos.cms.futurecdn.net/Sy2GFkaKdoJr4nv2CJiPWZ-450-80.png 450w, https://cdn.mos.cms.futurecdn.net/Sy2GFkaKdoJr4nv2CJiPWZ-970-80.png 970w, https://cdn.mos.cms.futurecdn.net/Sy2GFkaKdoJr4nv2CJiPWZ-1024-80.png 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/Sy2GFkaKdoJr4nv2CJiPWZ.png" data-pin-media="https://cdn.mos.cms.futurecdn.net/Sy2GFkaKdoJr4nv2CJiPWZ.png" />
<span>2019年最好的超宽显示器</span>
</a>
</li>
<li>
<a href="https://www.n2v.net/advice/the-best-office-chair-for-home-working">
<img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="The best office chair of 2019" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/78cAFrPpGLfMXUkLSZGhke-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/78cAFrPpGLfMXUkLSZGhke-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/78cAFrPpGLfMXUkLSZGhke-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/78cAFrPpGLfMXUkLSZGhke-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/78cAFrPpGLfMXUkLSZGhke-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/78cAFrPpGLfMXUkLSZGhke.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/78cAFrPpGLfMXUkLSZGhke.jpg" />
<span>2019年最好的办公椅</span>
</a>
</li>
<li>
<a href="https://www.n2v.net/features/best-power-bank">
<img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="The best power bank in 2019: top portable chargers to power your devices" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/Qqg2XuULGQmSBEmaTWFtr-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/Qqg2XuULGQmSBEmaTWFtr-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/Qqg2XuULGQmSBEmaTWFtr-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/Qqg2XuULGQmSBEmaTWFtr-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/Qqg2XuULGQmSBEmaTWFtr-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/Qqg2XuULGQmSBEmaTWFtr.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/Qqg2XuULGQmSBEmaTWFtr.jpg" />
<span>2019年最好的移动电源:顶级便携式充电器为您的设备供电</span>
</a>
</li>
</ul>
</div>
</section>
<script>
window._taboola = window._taboola || [];
var taboola_lists = [];
function taboola_is_device(device) {
if ((! device) || device === null || (typeof device) === 'undefined') return true
if (device === 'amp') return false
if (device === 'desktop' && window.screen.width >= 700) return true
if (device === 'mobile' && window.screen.width < 700) return true
return false
}
</script>
<footer class="van_taboola" id="taboola-below-article-thumbnails"></footer>
<script>
if (taboola_is_device("")) {
taboola_lists.push({
mode: "thumbnails-e",
container: "taboola-below-article-thumbnails",
placement: "Below Article Thumbnails",
target_type: "mix"
});
}
</script>
<footer class="van_taboola" id=""></footer>
<script>
if (taboola_is_device("amp")) {
taboola_lists.push({
mode: "thumbnails-a",
container: "",
placement: "below-main-column",
target_type: ""
});
}
</script>
<script>
for(var i = 0; i < taboola_lists.length; i++){
_taboola.push(taboola_lists[i]);
}
</script>
<footer id="comment-jump">
</footer>
</article>
<aside id="sidebar">
<section class="recommended-content">
<div class="recommendation-container">
<h3>推荐的</h3>
<div class="recommendation-articles">
<div class="recommended-article item-1">
<a href="https://www.n2v.net/news/creative-bloqs-job-of-the-week">
<div class="article-image-container item-1">
<div class="article-image item-1">
<img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="(min-width: 900px) 610px,(min-width: 610px) 840px,(min-width: 500px) 610px,(min-width: 320px) 480px" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/8qT2rPnRnC4uQBzSf42EmW-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/8qT2rPnRnC4uQBzSf42EmW-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/8qT2rPnRnC4uQBzSf42EmW-480-80.jpg 480w, https://cdn.mos.cms.futurecdn.net/8qT2rPnRnC4uQBzSf42EmW-610-80.jpg 610w, https://cdn.mos.cms.futurecdn.net/8qT2rPnRnC4uQBzSf42EmW-840-80.jpg 840w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/8qT2rPnRnC4uQBzSf42EmW.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/8qT2rPnRnC4uQBzSf42EmW.jpg" data-pin-nopin="true" />
</div>
</div>
<h4 class="article-name item-1">设计工作:在CreativeBloq中找到你梦寐以求的角色</h4>
</a>
</div>
<div class="recommended-article item-2">
<a href="https://www.n2v.net/graphic-design-tips/best-free-fonts-for-designers-1233380">
<div class="article-image-container item-2">
<div class="article-image item-2">
<img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="(min-width: 900px) 610px,(min-width: 610px) 840px,(min-width: 500px) 610px,(min-width: 320px) 480px" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/a5UrGBqnq8ARPppz49xpGd-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/a5UrGBqnq8ARPppz49xpGd-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/a5UrGBqnq8ARPppz49xpGd-480-80.jpg 480w, https://cdn.mos.cms.futurecdn.net/a5UrGBqnq8ARPppz49xpGd-610-80.jpg 610w, https://cdn.mos.cms.futurecdn.net/a5UrGBqnq8ARPppz49xpGd-840-80.jpg 840w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/a5UrGBqnq8ARPppz49xpGd.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/a5UrGBqnq8ARPppz49xpGd.jpg" data-pin-nopin="true" />
</div>
</div>
<h4 class="article-name item-2">78款最适合设计师的免费字体</h4>
</a>
</div>
<div class="sponsored-post"><div style="width:100%"></div></div>
</div>
</div>
</section>
<section class="box newsletter-signup">
<h3 class="separator-heading">
<span>
<i class="icon icon-envelope white"></i><span class="newsletter-title">获取每周提示和灵感</span>
</span>
</h3>
<div class="grey-box">
<p>请在下面注册以获取Creative Bloq的最新信息,以及独家特别优惠,直接到您的收件箱!</p>
<iframe style="width:100%" height="100" sandbox="allow-scripts allow-forms" data-lazy-src="//futureplc.slgnt.eu/optiext/optiextension.dll?ID=s6XsWnyjpNGgHmS9IDSe4kGMs9Z0hv5kXjNQUQiRO2tDkDpIITWHetB5caZtol9br5fEOvs9fVr9oPM92i&BRAND=CBQ" data-lazy-priority="low" scrolling="no">
</iframe>
<footer>
<small>没有垃圾邮件,我们保证。您可以随时取消订阅,未经您的许可,我们绝不会分享您的详细信息。</small>
</footer>
</div>
</section>
<section class="popular-box">
<div id="popular-box-wrapper" class="style1">
<div class="most-popular-tab-bar">
<input type="radio" name="popradio" id="popradio-1" checked />
<input type="radio" name="popradio" id="popradio-2" />
<div id="popularcontent">
<div class="flex-row">
<label class="poplabel" id="poplabel-1" for="popradio-1">
<span>最阅读</span>
</label>
<label class="poplabel" id="poplabel-2" for="popradio-2">
<span>最共享的</span>
</label>
</div>
<ol class="popular-list active" id="poplist-1">
<li class="most-popular-item first-article">
<div style="width:100%">
<a href="https://www.n2v.net/graphic-design-tips/best-free-fonts-for-designers-1233380" aria-label="78 best free fonts for designers">
<img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/a5UrGBqnq8ARPppz49xpGd-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/a5UrGBqnq8ARPppz49xpGd-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/a5UrGBqnq8ARPppz49xpGd-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/a5UrGBqnq8ARPppz49xpGd-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/a5UrGBqnq8ARPppz49xpGd-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/a5UrGBqnq8ARPppz49xpGd.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/a5UrGBqnq8ARPppz49xpGd.jpg" data-pin-nopin="true" />
</a>
<div class="popular-listings">
<span class="number-1">1</span><h4><a href="https://www.n2v.net/graphic-design-tips/best-free-fonts-for-designers-1233380">78款最适合设计师的免费字体</a></h4>
</div>
</div>
</li>
<li class="most-popular-item ">
<div style="width:100%">
<a href="https://www.n2v.net/software/ipad-apps-make-most-apple-pencil-121518448" aria-label="23 best iPad Pro apps for use with Apple Pencil">
<img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/viiYZh25y4YMVdQYsjn3EH-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/viiYZh25y4YMVdQYsjn3EH-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/viiYZh25y4YMVdQYsjn3EH-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/viiYZh25y4YMVdQYsjn3EH-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/viiYZh25y4YMVdQYsjn3EH-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/viiYZh25y4YMVdQYsjn3EH.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/viiYZh25y4YMVdQYsjn3EH.jpg" data-pin-nopin="true" />
</a>
<div class="popular-listings">
<span class="number-2">2</span><h4><a href="https://www.n2v.net/software/ipad-apps-make-most-apple-pencil-121518448">23款最适合苹果铅笔使用的iPad Pro应用程序</a></h4>
</div>
</div>
</li>
<li class="most-popular-item ">
<div style="width:100%">
<a href="https://www.n2v.net/news/download-photoshop" aria-label="Download Adobe Photoshop: how to try Photoshop free or with Creative Cloud">
<img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/DMi96PPMtGkbQcLPKVo9ym-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/DMi96PPMtGkbQcLPKVo9ym-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/DMi96PPMtGkbQcLPKVo9ym-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/DMi96PPMtGkbQcLPKVo9ym-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/DMi96PPMtGkbQcLPKVo9ym-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/DMi96PPMtGkbQcLPKVo9ym.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/DMi96PPMtGkbQcLPKVo9ym.jpg" data-pin-nopin="true" />
</a>
<div class="popular-listings">
<span class="number-3">3</span><h4><a href="https://www.n2v.net/news/download-photoshop">下载Adobe Photoshop:如何免费试用Photoshop或使用Creative Cloud</a></h4>
</div>
</div>
</li>
<li class="most-popular-item ">
<div style="width:100%">
<a href="https://www.n2v.net/features/best-video-editing-software-for-designers" aria-label="The best video editing software in 2019">
<img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/CcQaxP8oRxyYoKxxWooiFk-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/CcQaxP8oRxyYoKxxWooiFk-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/CcQaxP8oRxyYoKxxWooiFk-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/CcQaxP8oRxyYoKxxWooiFk-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/CcQaxP8oRxyYoKxxWooiFk-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/CcQaxP8oRxyYoKxxWooiFk.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/CcQaxP8oRxyYoKxxWooiFk.jpg" data-pin-nopin="true" />
</a>
<div class="popular-listings">
<span class="number-4">4</span><h4><a href="https://www.n2v.net/features/best-video-editing-software-for-designers">2019年最好的视频编辑软件</a></h4>
</div>
</div>
</li>
<li class="most-popular-item ">
<div style="width:100%">
<a href="https://www.n2v.net/news/kfc-what-the-cluck" aria-label="KFC's What the Cluck?! advert banned after complaints">
<img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/vYXX4dWRJSS7zfqkjLcmt3-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/vYXX4dWRJSS7zfqkjLcmt3-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/vYXX4dWRJSS7zfqkjLcmt3-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/vYXX4dWRJSS7zfqkjLcmt3-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/vYXX4dWRJSS7zfqkjLcmt3-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/vYXX4dWRJSS7zfqkjLcmt3.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/vYXX4dWRJSS7zfqkjLcmt3.jpg" data-pin-nopin="true" />
</a>
<div class="popular-listings">
<span class="number-5">5</span><h4><a href="https://www.n2v.net/news/kfc-what-the-cluck">肯德基是什么?!投诉后禁止广告</a></h4>
</div>
</div>
</li>
</ol>
<ol class="popular-list " id="poplist-2">
<li class="most-popular-item first-article">
<div style="width:100%">
<a href="https://www.n2v.net/features/8-best-new-free-christmas-fonts" aria-label="8 best new free Christmas fonts">
<img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/UFumcNwnzpqZ754waz4eTV-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/UFumcNwnzpqZ754waz4eTV-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/UFumcNwnzpqZ754waz4eTV-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/UFumcNwnzpqZ754waz4eTV-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/UFumcNwnzpqZ754waz4eTV-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/UFumcNwnzpqZ754waz4eTV.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/UFumcNwnzpqZ754waz4eTV.jpg" data-pin-nopin="true" />
</a>
<div class="popular-listings">
<span class="number-1">1</span><h4><a href="https://www.n2v.net/features/8-best-new-free-christmas-fonts">8款最佳免费圣诞字体</a></h4>
</div>
</div>
</li>
<li class="most-popular-item ">
<div style="width:100%">
<a href="https://www.n2v.net/features/graphic-design-trends-2020" aria-label="20 top graphic design trends for 2020">
<img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/M3hkT84GPXXt6gy2Kc8bJC-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/M3hkT84GPXXt6gy2Kc8bJC-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/M3hkT84GPXXt6gy2Kc8bJC-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/M3hkT84GPXXt6gy2Kc8bJC-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/M3hkT84GPXXt6gy2Kc8bJC-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/M3hkT84GPXXt6gy2Kc8bJC.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/M3hkT84GPXXt6gy2Kc8bJC.jpg" data-pin-nopin="true" />
</a>
<div class="popular-listings">
<span class="number-2">2</span><h4><a href="https://www.n2v.net/features/graphic-design-trends-2020">20 2020年顶级平面设计趋势</a></h4>
</div>
</div>
</li>
<li class="most-popular-item ">
<div style="width:100%">
<a href="https://www.n2v.net/how-to/create-organic-facial-animation-in-cartoon-animator" aria-label="Animate heads easily with Cartoon Animator ">
<img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/LuPKqg9MU88rGQfo2sGZn4-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/LuPKqg9MU88rGQfo2sGZn4-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/LuPKqg9MU88rGQfo2sGZn4-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/LuPKqg9MU88rGQfo2sGZn4-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/LuPKqg9MU88rGQfo2sGZn4-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/LuPKqg9MU88rGQfo2sGZn4.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/LuPKqg9MU88rGQfo2sGZn4.jpg" data-pin-nopin="true" />
</a>
<div class="popular-listings">
<span class="number-3">3</span><h4><a href="https://www.n2v.net/how-to/create-organic-facial-animation-in-cartoon-animator">动画片动画师很容易制作出动画片的头像</a></h4>
</div>
</div>
</li>
<li class="most-popular-item ">
<div style="width:100%">
<a href="https://www.n2v.net/news/pantone-colour-of-the-year-2020-announced" aria-label="Pantone Color of the Year 2020 announced">
<img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/3wMJEjhynsdJ8EpTQMmhDR-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/3wMJEjhynsdJ8EpTQMmhDR-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/3wMJEjhynsdJ8EpTQMmhDR-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/3wMJEjhynsdJ8EpTQMmhDR-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/3wMJEjhynsdJ8EpTQMmhDR-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/3wMJEjhynsdJ8EpTQMmhDR.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/3wMJEjhynsdJ8EpTQMmhDR.jpg" data-pin-nopin="true" />
</a>
<div class="popular-listings">
<span class="number-4">4</span><h4><a href="https://www.n2v.net/news/pantone-colour-of-the-year-2020-announced">2020年潘通色彩宣布</a></h4>
</div>
</div>
</li>
<li class="most-popular-item ">
<div style="width:100%">
<a href="https://www.n2v.net/advice/workstation-vs-consumer-pc-whats-the-difference-and-which-do-you-need" aria-label="Workstation vs consumer PC: what’s the difference and which do you need?">
<img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/tuJV3B724WgJRwdy4UKdd8-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/tuJV3B724WgJRwdy4UKdd8-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/tuJV3B724WgJRwdy4UKdd8-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/tuJV3B724WgJRwdy4UKdd8-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/tuJV3B724WgJRwdy4UKdd8-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/tuJV3B724WgJRwdy4UKdd8.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/tuJV3B724WgJRwdy4UKdd8.jpg" data-pin-nopin="true" />
</a>
<div class="popular-listings">
<span class="number-5">5</span><h4><a href="https://www.n2v.net/advice/workstation-vs-consumer-pc-whats-the-difference-and-which-do-you-need">工作站和个人电脑:有什么区别,你需要哪一个?</a></h4>
</div>
</div>
</li>
</ol>
</div>
</div>
</div>
</section>
</aside>
</div>
<script id="hawklinks-script">
function loadHawklinks(src) {
!function (e, f, u) {
e.async = 1;
e.src = u;
f.parentNode.insertBefore(e, f);
}(document.createElement('script'),
document.getElementsByTagName('script')[0],
src);
}
window.reliableDOMContentLoaded.then(function() {
loadHawklinks("https://gizmos.hawk-files.co.uk/hl/hawklinks.js");
});
</script>
<link rel="preload" href="https://gizmos.hawk-files.co.uk/hl/hawklinks.js" as="script" />
<!-- SP NOPE -->
<script type="text/javascript">
window.vanilla.tiberius = {
enabled: false,
}
</script>
<footer id="document-footer" class="container full">
<div id="document-footer-content">
<p>Creative Bloq是Future plc的一部分,Future plc是一家国际媒体集团和领先的数字出版商。<a href="http://www.futureplc.com" target="_blank">访问我们的公司网站</a>。</p>
<nav>
<ul>
<li><a href="https://www.n2v.net/features/about-us" target="_blank">关于我们</a></li>
<li><a href="http://www.futureplc.com/terms-conditions/" target="_blank">条款和条件</a></li>
<li><a href="http://www.futureplc.com/privacy-policy/" target="_blank">隐私政策</a></li>
<li><a href="http://www.futureplc.com/cookies-policy/" target="_blank">Cookies政策</a></li>
<li><a href="https://www.n2v.net/advertising" target="_blank">和我们一起做广告</a></li>
</ul>
</nav>
<p>+$ Future Publishing Limited Quay House, The Ambury, Bath BA1 1UA. All rights reserved. England and Wales company registration number 2008885.</p>
</div>
</footer>
<script>
window.vanL10N = null;
</script><script>
if (document.cookie.indexOf("EuConsent") < 0) {
if (!window._comscore) {
window._comscore = window._comscore || [];
}
window._comscore.push({
c1: "2",
c2: "10055482",
cs_ucfr: '' });
(function() {
var s = document.createElement("script"), el = document.getElementsByTagName("script")[0];
s.async = true;
s.src = (document.location.protocol == "https:" ? "https://sb" : "http://b") + ".scorecardresearch.com/beacon.js";
el.parentNode.insertBefore(s, el);
})();
} else {
window.reliableConsentGiven.then(function(value) {
if (!window._comscore) {
window._comscore = window._comscore || [];
}
var cs_ucfr_value = '';
if (value.consent && value.consent.purposeConsents[5]) {
cs_ucfr_value = 1;
} else {
cs_ucfr_value = 0;
}
window._comscore.push({
c1: "2",
c2: "10055482",
cs_ucfr: cs_ucfr_value });
(function() {
var s = document.createElement("script"), el = document.getElementsByTagName("script")[0];
s.async = true;
s.src = (document.location.protocol == "https:" ? "https://sb" : "http://b") + ".scorecardresearch.com/beacon.js";
el.parentNode.insertBefore(s, el);
})();
});
}
</script>
<script>
var dfp_config = {
"keystone": "",
"ad_unit": "10518929/Design_CreativeBloQ/",
"live_ad_unit": "10518929/Design_CreativeBloQ/",
"test_ad_unit": "10518929/Design_CreativeBloQ_Test/",
"recovery_ad_unit": "",
"recovery_test_ad_unit": "",
"incremental": true,
"gptBeta": "",
"max_incremental_ads": 20,
"max_incremental_ads_mobile": 20,
"max_concurrent_ads": 4,
"refresh": true,
"site_platform": "vanilla",
"tiberius": false,
"tiberius_mode": "",
"keywords": "serversidehawk,Web design,Web Designer,Web Design,Animation,UX,magcontent",
"article_id": "FGzwUuXPpeXAmv4nXPRgw4",
"vanilla_article_id": "FGzwUuXPpeXAmv4nXPRgw4",
"page_type": "how-to",
"product_brand": "",
"product_category": "",
"product": "",
"vertical": "web-design",
"source": "web-designer",
"provertical": "",
"single_request": true,
"onscroll": {
"refresh" : "",
"mpu": ""
},
"jwplayer": "carousel"
}
</script> <script>
dfp_config.gallery_refresh_interval = 2;
</script> <script>window.vanillaComponents = [{"trackable":[{"type":"click","identifier":".menuitems a","name":"Link clicked","countTotal":true}],"name":"Primary Nav","excludeHidden":false,"identifier":".primary-nav"},{"trackable":[{"type":"click","identifier":".feature-block-item-wrapper a","name":"Article clicked","countTotal":false}],"name":"Featured articles","excludeHidden":false,"identifier":".top-featured"},{"trackable":[{"type":"click","identifier":"a","name":"Logo clicked","countTotal":false}],"name":"Site Logo","identifier":".logo"},{"trackable":[{"type":"click","identifier":".most-popular-item","name":"Most read article clicked","countTotal":true}],"name":"Most Popular - Popular","identifier":"#poplist-1"},{"trackable":[{"type":"click","identifier":".most-popular-item","name":"Most shared article clicked","countTotal":true}],"name":"Most Popular - Shared","identifier":"#poplist-2"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":false}],"name":"Prev/Next","identifier":".next-prev-container"},{"trackable":[{"type":"click","identifier":"a","name":"Number clicked","countTotal":true}],"name":"Paginated Review Numerical pagination - Number","identifier":".pagination-numerical-list"},{"trackable":[{"type":"click","identifier":".prev,.next","name":"Prev/Next clicked","countTotal":false}],"name":"Paginated Review Numerical pagination - Prev/Next","identifier":".navigation-sequential"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Inline Pagination","identifier":".swipe-pages-wrapper"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Article Tags","identifier":"#articleTag"},{"trackable":[{"type":"click","identifier":".recommended-article a","name":"Link clicked","countTotal":true}],"name":"Recommended article","identifier":".recommendation-articles"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Trending bar","identifier":".trending-items"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Boilerplate-1","identifier":".club-boilerplate-1"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Boilerplate-2","identifier":".club-boilerplate-2"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Boilerplate-3","identifier":".club-boilerplate-3"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Boilerplate-4","identifier":".club-boilerplate-4"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Inline links","identifier":"#article-body"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Social links","identifier":".socialite-widget"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Avatar","identifier":"#club-login"},{"trackable":[{"type":"click","identifier":".fwd-link","name":"FWD link clicked","countTotal":true}],"name":"Forward Linker","identifier":"#article-body"},{"trackable":[{"type":"click","identifier":"div .brands-lead","name":"Extending Trending Bar","countTotal":true}],"name":"Trending Bar Parent","excludeHidden":false,"identifier":"div .trending-bar"},{"trackable":[{"type":"click","identifier":"a[data-event-label=elkInjectedRelatedBlock]","name":"Link clicked","countTotal":true}],"name":"ELK Injected Related Block","identifier":"#article-body"}]</script> <script>
var require = {waitSeconds:0};
</script> <!-- Google Tag Manager -->
<script></script>
<!-- End Google Tag Manager -->
<script type="text/javascript">
(function(){
if(typeof window._taboola !== 'undefined'
&& typeof taboola_lists !== 'undefined'
&& Array.isArray(taboola_lists)
&& taboola_lists.length)
{
function loadTaboola()
{
!function (e, f, u) {
e.async = 1;
e.src = u;
f.parentNode.insertBefore(e, f);
}(document.createElement('script'),
document.getElementsByTagName('script')[0],
'//cdn.taboola.com/libtrc/futureplc-creativebloq/loader.js');
_taboola.push({article: 'auto'});
_taboola.push({flush: true});
}
// Can't be in asset loader until we can call custom loader functions
(window.Promise
? Promise.all([window.reliablePageLoad, window.reliableConsentGiven])
: window.reliableConsentGiven
).then(function(){
setTimeout(loadTaboola, 6000);
});
}
})();
</script>
<script>window.addEventListener("load",function(){if(!window.askForConsent){var e=document.createElement("script");e.src="https://vanilla.futurecdn.net/creativebloq/cookieconsent.min.js",e.onload=function(){var e=window.innerWidth>=700?"bottom":"top";window.cookieconsent.initialise({palette:{popup:{background:"#000"},button:{background:"#666666"}},position:e,content:{message:"We use cookies on this website to deliver content to you, personalise content and ads, provide social media features, and analyse our traffic. Click 'I accept' to consent to the use of cookies. More information on cookies and how to manage them",link:"click here",href:"http://www.futureplc.com/cookies-policy/",dismiss:"I accept"}})},document.body.appendChild(e);var o=document.createElement("link");o.rel="stylesheet",o.type="text/css",o.href="https://vanilla.futurecdn.net/creativebloq/cookieconsent.min.css",document.body.appendChild(o);var t=document.createElement("style");t.appendChild(document.createTextNode(".cc-window {z-index:10000000}")),document.body.appendChild(t)}});</script>
<!-- document assets - added by the article itself -->
<script>
window.vanilla.addCss({"href":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/prism\/1.8.4\/themes\/prism.min.css"})
window.vanilla.addJs({"src":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/prism\/1.8.4\/prism.min.js"}, 1000, 1)
window.vanilla.addJs({"id":"main-js","src":"\/\/vanilla.futurecdn.net\/creativebloq\/149169\/media\/js\/main.min.js"}, null, 0)
window.vanilla.addCss({"href":"\/\/vanilla.futurecdn.net\/creativebloq\/149169\/media\/css\/creativebloq.min.css"})
</script> <script>
window.ffte = {"site":"creativebloq","endpoint":"\/\/api.vanilla.futurecdn.net\/article","locale":"GB","gaCode":"UA-48905440-1","debug":[],"serverEnvironment":"live","regionLink":"","isGlobal":false,"properties":{"articleProduct":[],"articleProductHandle":[],"articleType":"how-to","articleTemplate":"standard","articleTagHandle":["web-design","animation","ux","magcontent","web-designer","web-design"],"articleTagType":["freeform","freeform","freeform","freeform","source"],"articleControlTag":["serversidehawk"],"articleVerticalHandle":["web-design"],"articleCategoryHandle":[],"subSite":"","articleVertical":"web design","id":"FGzwUuXPpeXAmv4nXPRgw4","legacyId":"FGzwUuXPpeXAmv4nXPRgw4"}}
</script>
<script>
window.xkeys = ["creativebloq-platform-responsive","creativebloq-core-version-21.8.2","creativebloq-core-ftefrontprod-172-20-9-85","creativebloq-article-FGzwUuXPpeXAmv4nXPRgw4","creativebloq-articletype-how-to","creativebloq-article-age-ancient","creativebloq-region-GB","creativebloq-language-en","creativebloq-author-nDVCGKDUikgmRSFomazzfX","creativebloq-tag-aHbSwk32desfH4WPSXCSdB","creativebloq-tag-RUA5yRchmniuFsnk2BTbRg","creativebloq-tag-gCM4QKcKgNBGhD22BpMksm","creativebloq-tag-KMpSYHta7wje5GCG4rvBSL","creativebloq-tag-TYAFhdjFkzwYHMydsPpRDH"];
window.templateVariables = {};
</script>
<div><script>var lang_is_tranlated='快八哥正在翻译';var website_tranlate_plan_id = '1';</script><script src="//sys.fastmyna.com/api/kbg.js?v=1.0"></script></div><div>
                    <script type="text/javascript">
                      var _paq = _paq || [];
                      _paq.push(["trackPageView"]);
                      _paq.push(["enableLinkTracking"]);
                      (function() {
                        var u="//ptrack.qifeiye.com/";
                        _paq.push(["setTrackerUrl", u+"piwik.php"]);
                        _paq.push(["setSiteId", "50"]);
                        var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0];
                        g.type="text/javascript"; g.async=true; g.defer=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);
                      })();
                    </script></div></body>
<script>
window.ftr_request_id = "";
</script> </html>
<br><br><div style='font-size:14px;color:#ffffff;background-color:#000000;text-align:center;'>翻译字数超限</div><br><br>