ionicapp开场动画

In this tutorial I’m going to explain how to achieve an interesting 3D opening type effect with CSS based on the one I previously created. My experiment was actually inspired by Edenspiekermann’s Open Type project for the Kröller-Müller Museum, a dynamic concept that plays with light and shadow in a simple but incredibly creative way. The aim of this tutorial is to show how we can bring some life to letters using CSS transforms and transitions on pseudo-elements with a technique that will allow to open a letter from all four sides.

在本教程中我将解释如何实现与CSS基于一个有趣的3D开放式效果的一个我以前创建的。 我的实验实际上是受到Edenspiekermann的Kröller-Müller博物馆的开放式项目启发的，该项目是一种动态概念，以简单但难以置信的方式在光与影之间发挥作用。 本教程的目的是展示如何通过伪元素上CSS转换和过渡使用一种能够从所有四个侧面打开字母的技术来使字母更加生动。

标记 (The Markup)

The markup needed is pretty simple, just a span that contains the character, but since we’re going to work with generated content we must add a custom data-attribute for repeating the text of each letter. We’ll also use a grid as our main wrapping structure where each letter will be inside of a list item. So, each list item will have a specific direction class for the letter:

所需的标记非常简单，只是一个包含字符的跨度，但是由于我们要使用生成的内容，因此必须添加自定义数据属性以重复每个字母的文本。 我们还将使用网格作为主要包装结构，其中每个字母都在列表项内。 因此，每个列表项将具有针对该字母的特定方向类别：

<ul class="grid">
<li class="ot-letter-left"><span data-letter="C">C</span></li>
<li class="ot-letter-top"><span data-letter="J">J</span></li>
<li class="ot-letter-right"><span data-letter="8">8</span></li>
<li class="ot-letter-bottom"><span data-letter="A">A</span></li>
</ul>

CSS(The CSS)

Let’s add some basic styles to the letter span. There will be three elements to our letter: the dark bottom part that makes the background seem cut out, the opening piece and the shadow that appears when we open the letter. This span that we are styling now, is the bottom part. We’ll add the perspective property to the span so that we can have a nice three-dimensional effect on the pseudo elements.

让我们为字母跨度添加一些基本样式。 我们的信中包含三个元素：使背景看起来像是深色的底部，打开的部分以及当我们打开信时出现的阴影。 我们现在正在设计的跨度是底部。 我们会在添加perspective属性跨度，使我们可以对伪元素一个不错的立体效果。

.grid li span {
display: inline-block;
font-weight: 900;
line-height: 1;
position: relative;
color: hsla(0, 0%, 0%, 0.6);
transform-style: preserve-3d;
perspective: 550px;
z-index: 1;
}

Note that we have also added position:relative to the span because this will make the pseudo-elements’ absolute positioning work.

请注意，我们还position:relative对于span添加了position:relative ，因为这将使伪元素的绝对定位起作用。

To clone the characters we use the content property to access the custom data-attribute. Then we’ll position both our pseudo-elements on top of their parent (the real letter).

为了克隆字符，我们使用content属性访问自定义数据属性。 然后，将两个伪元素都放置在其父元素(真实字母)的顶部。

.grid li span:before,
.grid li span:after {
position: absolute;
content: attr(data-letter);
line-height: inherit;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
transition: all 0.3s;
}.grid li span:before {
text-shadow: none;
color: hsla(0, 0%, 0%, 0.12);
}

In this way we’ll have the three layers: the first one is our main dark letter; the :before pseudo element will be our dark semi-transparent shadow on top of it, and the last layer is the :after pseudo element, the “peel” or opening piece on top of everything.

这样，我们将分为三层：第一层是我们的主要深色字母；第二层是黑色字母。 :before伪元素将是其顶部的深色半透明阴影，最后一层是:after伪元素，即“果皮”或开口片位于一切之上。

At this point it’s time to add our transformations. Let’s take a look at the letter that opens on the right side, i.e. where the peel is connected on the left: we’ll use transform-origin to ensure that the left side will become the hinge of the rotation:

现在是时候添加我们的转换了。 让我们看一下在右侧打开的字母，即果皮在左侧连接的位置：我们将使用transform-origin来确保左侧将成为旋转的铰链：

.ot-letter-left span:before,
.ot-letter-left span:after {
transform-origin: 0 50%;
}

Now we’ll add a little 3D rotation on the Y-axis of the :after element while we scale the shadow on the Y-axis and add a little vertical skew to it. A text-shadow will make the opening side more prominent, adding some thickness to the “peel” and hiding the hinge of the rotation.

现在，我们将在:after元素的Y轴上添加一些3D旋转，同时在Y轴上缩放阴影并为其添加一些垂直偏斜。 文本阴影将使开口侧更加突出，从而在“果皮”上增加一些厚度并隐藏旋转的铰链。

.ot-letter-left span:before {
transform: scale(1.08, 1) skew(0deg, 1deg);
}.ot-letter-left span:after {
text-shadow:
-1px 0px 0px hsla(360, 100%, 100%, 0.1),
3px 0px 1px hsla(0, 0%, 0%, 0.4);
transform: rotateY(-15deg);
}

The real effect will now be applied on the :hover state of the list item: we’ll increase both the rotation and the skew of our pseudo-elements so that the letter will open and the shadow will change accordingly:

现在，实际效果将应用于列表项的:hover状态：我们将增加伪元素的旋转度和偏斜度，以使字母将打开，阴影也会相应改变：

.ot-letter-left:hover span:before {
transform: scale(0.85,1) skew(0deg,20deg);
}.ot-letter-left:hover span:after {
transform: rotateY(-40deg);
}

Let’s set some colors to finish off the effect (in our demo, each direction will have a different shade of red):

让我们设置一些颜色来完成效果(在我们的演示中，每个方向将具有不同的红色阴影)：

.ot-letter-left {
background: #e74d3c;
}.ot-letter-left span {
text-shadow:
1px 4px 6px #e74d3c,
0 0 0 hsla(0, 0%, 0%, 0.3),
1px 4px 6px #e74d3c;
}.ot-letter-left span:after {
color: #e74d3c;
}.ot-letter-left:hover span:after {
color: #ea6253;
}

We set the background color of the grid item and then we’ll apply a little inset text-shadow effect to the cut-out part (the main span). That’s why we needed to set the text-shadow to .grid li span:before to none since it would be inherited otherwise. The :after pseudo-element, the top most peel piece, will get the same color as the background and on hover we’ll make it lighter since our imaginary light source is on the opposite side of the opening.

我们设置网格项目的背景色，然后将一些嵌入的文本阴影效果应用于剪切部分(主跨度)。 这就是为什么我们需要设置文本阴影.grid li span:before无法比拟的，因为它会被继承，否则。 :after伪元素(最顶部的剥离部件)将获得与背景相同的颜色，并且在悬停时我们将使其更轻，因为我们的假想光源位于开口的相对侧。

This is how our opening effect works. Beyond this, we can change the opening direction of the letters, playing with the transform-origin, the axis of rotation, the skew angle and some minor tweaks. The following style is an example of how our effect works in the bottom direction:

这就是我们的开放效应的作用。 除此之外，我们还可以更改字母的打开方向，并使用transform-origin ，旋转轴，偏斜角和一些细微调整。 以下样式是我们的效果在底部方向上工作的示例：

.ot-letter-bottom span:before,
.ot-letter-bottom span:after {
transform-origin: 50% 0;
}.ot-letter-bottom span:before {
transform: scale(1,1.05) skew(4deg,0deg);
}.ot-letter-bottom span:after {
text-shadow:
0px -1px 0px hsla(360, 100%, 100%, 0.1),
0px 3px 1px hsla(0, 0%, 0%, 0.4);
transform: rotateX(15deg);
}.ot-letter-bottom:hover span:before {
transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
}.ot-letter-bottom:hover span:after {
transform: translateY(0.045em) rotateX(40deg);
}

As you can see, the transform-origin is always on the opposite side of the opening and the text-shadow is adjusted following the same logic.

如您所见， transform-origin始终位于开口的另一侧，并且按照相同的逻辑调整了text-shadow 。

Also, the axis of rotation is changed to the X-Axis and both, the scale and skew of the shadow pseudo-element are set to follow the direction of the light (as much as we can). As a final touch, we shifted both pseudo-elements using translateY to clear a little offset of the hinge.

同样，旋转轴更改为X轴，并且阴影伪元素的比例和偏斜都设置为遵循光的方向(我们尽可能)。 最后，我们使用translateY移动了两个伪元素，以清除铰链的一些偏移。

That’s pretty much it, I hope you liked this tutorial and found it useful. Thank you for reading!

就是这样，我希望您喜欢本教程并发现它很有用。 感谢您的阅读！

翻译自: https://tympanus.net/codrops/2013/11/14/animated-opening-type/

ionicapp开场动画