如何用CSS编写智能文本效果

Image: Middle Child
+$[Image: Middle Child]

+$Rollover links are a great way to grab a user's attention, especially if they do something unusual or original. Middle Child has a great effect, seldom seen elsewhere, that captures each letter and splits them apart with animation, which kicks in when the visitor hovers over the word. The animation helps convey the sandwich brand's playful character.

+$In this article, we show you how to recreate the effect on your site. For more inspiration, take a look at our guide to the+$best CSS animation examples+$(with instructions on how to code them).

+$01. Rollover Text Effect

+$One of the great text effects on the Middle Child website is for the rollover effects on the menu, where the letters split apart on the text and rotate slightly. Start this with some simple HTML tags.

+$
Breakfast

+$02. Create CSS

+$Use a separate CSS file or style tags to add the following CSS rules and make the page fill the full size of the browser by ensuring the body and the wrapper take the full height available.

+$body { width: 100%; height: 100%; margin: 0; padding: 0; } .wrapper { display: grid; height: 100%; }

+$03. Position The Word

+$word+$class centres the word in the grid. Any text that is given the+$word+$class can have this applied. The+$up+$class is going to be applied to every other letter and these will move upwards.

+$.word { font-size: 3em; margin: auto auto; } .word .up { display: inline-block; transform: translate3d(0px, 0px, 0px) rotate(0deg); transition: all 0.5s ease-in-out; }

+$04. Up And Over

现在+$class shares very similar settings to the+$up+$but the hover shows the movement upwards for the+$up+$rollover. Upwards is also rotated slightly to enhance the look.

+$.word .down { display: inline-block; transform: translate3d(0px, 0px, 0px) rotate(0deg); transition: all 0.5s ease-in-out; } .word:hover .up { transform: translate3d(0px, -8px, 0px) rotate(12deg); color: #058b05 }

+$05. Hovering Down

+$When the user hovers over the text, the down class moves the text downwards. Later in JavaScript the text will be split into separate spans with the classes added automatically to alternate spans.

+$.word:hover .down { transform: translate3d(0px, 8px, 0px) rotate(-12deg); color: #058b05; }

+$06. Automatic for the people

+$It's a bit of a hassle to have to put every letter in alternating spans with different classes, so we'll automate the process by getting JavaScript to query the selector and take each letter. Here the+$str+$variable grabs the current letter as it loops through the text.

+$

本文最初发表于创意网页设计杂志网页设计者 购买问题286要么订阅

阅读更多:



翻译字数超限