css和jquery
Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we’ll explore some of the possibilites.
今天，我们将使用CSS3和jQuery为大标题创建一组漂亮的排版效果。 我们可以使用CSS3动画和过渡做很多事情，我们将探讨一些可能性。
We’ll be using Lettering.js in order to style single letters of the words we’ll be having in our big headlines.
我们将使用Lettering.js来设置大标题中要使用的单词的单个字母的样式。
The image used in the demo is by Andrey & Lili. They are licensed under the Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) License.
该演示中使用的图像是Andrey＆Lili制作的。 它们根据Attribution-NonCommercial 3.0 Unported(CC BY-NC 3.0)许可进行许可。
HTML (The HTML)
The structure will simply be an h2 element with an anchor inside. We’ll wrap the headline in a container:
该结构将只是一个内部具有锚点的h2元素。 我们将标题包装在一个容器中：
<div id="letter-container" class="letter-container">
<h2><a href="#">Sun</a></h2>
</div>
Then we’ll call the Lettering.js plugin, so that every letter gets wrapped in a span.
然后，我们将调用Lettering.js插件，以便将每个字母包裹在一个范围内。
Now, let’s take a look at each example. I’ll show all the styles that are relevant to the effect. In the downloadable files, you can check out all the other styles, like the positioning of the headline, the fonts and so on.
现在，让我们看一下每个示例。 我将显示与效果相关的所有样式。 在可下载的文件中，您可以签出所有其他样式，例如标题的位置，字体等。
In order not to bloat the tutorial, I will not be showing any CSS vendor prefixes. The downloadable files contain them, of course.
为了不使教程膨胀，我不会显示任何CSS供应商前缀。 当然，可下载文件包含它们。
例子1 (Example 1)
<div id="letter-container" class="letter-container">
<h2><a href="#">Chaos</a></h2>
<h2><a href="#">Order</a></h2>
</div>
We’ll give the link element an absolute position and make the second word disappear by giving it the opacity 0:
我们将给link元素一个绝对位置，并通过给其不透明度0来使第二个单词消失：
.letter-container h2 a{
text-align: center;
text-transform: uppercase;
font-size: 150px;
position: absolute;
width: 800px;
height: 180px;
top: 0px;
left: 50%;
margin-left: -400px;
transition: all 0.3s linear;
}
.letter-container h2 a:nth-child(2){
opacity: 0;
}
The spans will have some characteristic text shadow and a transition. The even children of will be skewed 10 degrees and the odd ones -10 degrees:
跨度将具有一些特征性的文本阴影和过渡。 的偶数子将偏斜10度，奇数子将偏斜-10度：
.letter-container h2 a span{
display: inline-block;
position: relative;
width: 120px;
margin: 0px;
transition: all 0.3s linear;
text-shadow:
2px 2px 2px rgba(0,0,0,0.6),
1px 1px 2px rgba(0,0,0,0.4),
0px 0px 2px rgba(255,255,255,0.9);
}
.letter-container h2 a span:nth-child(odd){
transform: skewY(10deg);
background: #333;
box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
z-index: 10;
}
.letter-container h2 a span:nth-child(even){
transform: skewY(-10deg);
background: #666;
box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
z-index: 10;
}
When we hover over the h2 element, we want the second link element to appear and the first to disappear:
当我们将鼠标悬停在h2元素上时，我们希望第二个link元素出现而第一个link元素消失：
.letter-container h2:hover a:nth-child(1){
opacity: 0;
}
.letter-container h2:hover a:nth-child(2){
opacity: 1;
}
Also, we want to straighten the letters out:
另外，我们想弄清楚字母：
.letter-container h2:hover a span{
transform: skewY(0deg);
background: #680121;
}
.letter-container h2 a span:hover{
color: #f6b0c5;
}
例子2(Example 2)
In the second example we’ll play a bit with pseudo elements. First, we’ll style each span in a way to look like a polaroid:
在第二个示例中，我们将使用伪元素。 首先，我们将每种跨度的样式设置为看起来像拍立得：
.letter-container h2 a span{
display: inline-block;
position: relative;
width: 200px;
height: 140px;
background: #000;
line-height: 140px;
font-size: 120px;
margin: 3px;
background-position: 50% 0%;
background-size: 200px 267px;
color: #fff;
text-shadow:
0px 0px 1px #fff,
2px 2px 5px rgba(0,0,0,0.4);
border-color: #fff;
border-style: solid;
border-width: 10px 10px 45px 10px;
box-shadow:
2px 2px 8px 4px rgba(0,0,0,0.9),
0px 0px 2px rgba(0,0,0,0.2) inset;
transition: all 0.3s ease-in-out;
}
We’ll then add a pseudo element that will contain a wicked gradient, making our polaroid look more real:
然后，我们将添加一个包含邪恶渐变的伪元素，使我们的宝丽来看起来更真实：
.letter-container h2 a span:before{
content:'';
position: absolute;
width: 220px;
height: 195px;
top: -10px;
left: -10px;
background: linear-gradient(-45deg, rgba(14,14,14,0.32) 0%,rgba(127,127,127,0.21) 18%,rgba(170,170,170,0.11) 34%,rgba(201,201,201,0) 51%,rgba(242,242,242,0.1) 66%,rgba(255,255,255,0.18) 79%,rgba(71,69,69,0.32) 100%);
}
Now, we’ll rotate the odd and even children differently to create a random look:
现在，我们将分别旋转奇数和偶数子项以创建随机外观：
.letter-container h2 a span:nth-child(even){
transform: rotate(3deg);
}
.letter-container h2 a span:nth-child(odd){
transform: rotate(-5deg);
}
For each character (we are using the classes applied by lettering.js but we could also use the nth-child selector) we will add a different background image:
对于每个字符(我们使用的是Lettering.js应用的类，但我们也可以使用nth-child选择器)，我们将添加一个不同的背景图片：
.letter-container span.char1{
background-image: url(../images/1.jpg);
}
.letter-container span.char2{
background-image: url(../images/2.jpg);
}
.letter-container span.char3{
background-image: url(../images/3.jpg);
}
.letter-container span.char4{
background-image: url(../images/4.jpg);
}
.letter-container span.char5{
background-image: url(../images/5.jpg);
}
On hover over the whole link, we will rotate the spans and scale them down:
将鼠标悬停在整个链接上时，我们将旋转跨度并将其缩小：
.letter-container h2 a:hover span:nth-child(even){
transform: scale(0.9) rotate(-5deg);
}
.letter-container h2 a:hover span:nth-child(odd){
transform: scale(0.9) rotate(3deg);
}
The specific span that we are hovering will have an animation that makes the background image move:
我们徘徊的特定跨度将具有使背景图像移动的动画：
.letter-container h2 a span:nth-child(even):hover,
.letter-container h2 a span:nth-child(odd):hover{
animation: moveImg 9s linear infinite forwards;
color: rgba(255,255,255,0.4);
text-shadow:0px 0px 5px rgba(0,0,0,0.1);
transform: scale(1.1);
z-index: 10;
box-shadow:
2px 2px 20px 4px rgba(0,0,0,0.6),
0px 0px 2px rgba(0,0,0,0.2) inset;
}
@keyframes moveImg {
0%{
background-position: 50% 0%;
}
50%{
background-position: 50% 100%;
}
100%{
background-position: 50% 0%;
}
}
例子3(Example 3)
In the third example we will apply an animation to the span class which will run once when the page is loaded. We will make a blurry letter become sharp. We will also use a mask to add some texture to the letters (only Webkit browsers currently):
在第三个示例中，我们将动画应用到span类，该动画在页面加载后将运行一次。 我们将使模糊的信件变得清晰。 我们还将使用遮罩为字母添加一些纹理(当前仅Webkit浏览器)：
.letter-container h2 a span {
font-size: 105px;
color: #444;
opacity: 1;
text-shadow: 0px 0px 2px #444, 1px 1px 4px rgba(0,0,0,0.7);
mask-image: url(../images/mask2.png);
transition: all 0.3s linear;
animation: sharpen 0.6s linear backwards;
}
When hovering over a letter we’ll change its color:
将鼠标悬停在字母上时，我们将更改其颜色：
.letter-container h2 a span:hover{
color: #3f7f75;
}
We’ll create some random appearence of the letters by giving each letter an animation delay:
我们将通过给每个字母一个动画延迟来创建字母的随机出现：
.letter-container h2 a span:nth-child(1) {
animation-delay: 1.2s;
}
.letter-container h2 a span:nth-child(2) {
animation-delay: 0.1s;
}
.letter-container h2 a span:nth-child(3) {
animation-delay: 1s;
}
/* ... and so on for all the letters */
The animation makes the letter appear blurry with a text-shadow with high fuzziness and a transparent color. Then it will appear sharpened by turning into a letter with solid color and a subtle text shadow:
动画使字母显得模糊，并带有高度模糊和透明颜色的文本阴影。 然后，通过变成纯色字母和微妙的文本阴影，它会变得锐利：
@keyframes sharpen {
0% {
opacity: 0;
text-shadow: 0px 0px 100px #444;
color: transparent;
}
90% {
opacity: 0.9;
text-shadow: 0px 0px 10px #444;
color: transparent;
}
100% {
color: #444;
opacity: 1;
text-shadow: 0px 0px 2px #444, 1px 1px 4px rgba(0,0,0,0.7);
}
}
例子4(Example 4)
<div class="twrap">
<div class="tbg"><span>P</span></div>
<div class="tup">
<div class="tfront"><span>P</span></div>
<div class="tback"><span>P</span></div>
</div>
<div class="tdown"><span>P</span></div>
</div>
Now, why such a structure? We want to play with perspective and 3d transforms, so we need a few more elements to make this work. We want this headline to look like an airport information board and when we hover over a span, we want the little top element to fall down, but in 3D! This will only work in a Webkit browser, but we will have a nice alternative for the others.
现在，为什么要这样的结构？ 我们想使用透视图和3d变换，因此我们需要一些其他元素来完成这项工作。 我们希望这个标题看起来像机场信息委员会，当我们将鼠标悬停在某个跨度上时，我们希望顶部的小元素掉下来，但是要3D！ 这仅在Webkit浏览器中有效，但对于其他浏览器，我们将有一个不错的选择。
So, let’s start by styting that new wrapper. It will be the container with the persepctive:
因此，让我们开始设计新包装器。 这将是具有透视的容器：
.letter-container h2 .twrap{
position: relative;
display: inline-block;
width: 100px;
height: 120px;
line-height: 120px;
font-size: 120px;
border: 15px solid rgba(0,0,0,0.5);
-webkit-perspective: 400;
box-shadow: 1px 1px 4px #000;
}
Then we’ll style the background letter, which will be yellow:
然后，我们将背景字母设置为黄色：
.letter-container h2 .tbg{
background: #121212;
position: absolute;
color: #f2c200;
width: 100%;
height: 100%;
box-shadow: 0px 1px 3px rgba(0,0,0,0.9);
}
The down part of the letter in both the “tdown” and the “tup” (“tback”) container will be pulled up with a negative margin, because we just want to show the lower part:
“ tdown”和“ tup”(“ tback”)容器中字母的向下部分将以负边距上拉，因为我们只想显示下部：
.letter-container h2 .tdown{
height: 50%;
top: 50%;
width: 100%;
position: absolute;
overflow: hidden;
z-index: 1;
background: #151515;
box-shadow: 0px 1px 3px rgba(0,0,0,0.9);
transition: all 0.3s linear;
}
.letter-container h2 .tdown span,
.letter-container h2 .tup .tback span{
display: block;
margin-top:-60px;
}
All the elements will have an aboslute position. The elements inside of “tup” will have -webkit-backface-visibility: hidden. Like that we’ll be able to rotate “tback” in 3d space and then “tup” when we hover:
所有元素都将具有高级位置。 “ tup”内部的元素将具有-webkit-backface-visibility：隐藏。 这样，我们就可以在3d空间中旋转“ tback”，然后在悬停时旋转“ tup”：
.letter-container h2 .tup{
height: 50%;
width: 100%;
position: absolute;
z-index: 10;
-webkit-transform-origin: 50% 100%;
transition: all 0.3s linear;
box-shadow: 0px 1px 3px rgba(0,0,0,0.9);
}
.letter-container h2 .tup .tfront,
.letter-container h2 .tup .tback{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
overflow: hidden;
-webkit-backface-visibility: hidden;
background: #151515;
}
.letter-container h2 .tup .tback{
background: #121212;
color: #f2c200;
}
.csstransforms3d .letter-container h2 .tup .tback{
-webkit-transform: rotateX(-180deg);
}
.csstransforms3d .letter-container h2 a .twrap:hover .tup{
-webkit-transform: rotateX(-180deg);
}
When we dont’ have support for the 3d transform then we’ll not show “tback”. We’ll instead animate “tup” and “tdown” to move to the back:
如果我们不支持3d转换，则不会显示“ tback”。 相反，我们将对“ tup”和“ tdown”进行动画处理以移至后面：
/* For browsers with no 3d transfrom support */
.no-csstransforms3d .letter-container h2 .tup .tback{
display: none;
}
.no-csstransforms3d .letter-container h2 a .twrap:hover .tup{
animation: moveBackUp 0.7s ease-in-out forwards;
}
.no-csstransforms3d .letter-container h2 a .twrap:hover .tdown{
animation: moveBackDown 0.7s ease-in-out forwards;
}
@keyframes moveBackUp {
0%{
transform: translateY(0%);
}
50%{
transform: translateY(-120%);
z-index: -1;
}
100%{
transform: translateY(0%);
z-index: -1;
}
}
@keyframes moveBackDown {
0%{
transform: translateY(0%);
}
50%{
transform: translateY(120%);
z-index: -1;
}
100%{
transform: translateY(0%);
z-index: -1;
}
}
例子5(Example 5)
.letter-container h2 a:before{
content: '';
position: absolute;
z-index: 0;
width: 525px;
height: 616px;
background: transparent url(../images/superhero.png) no-repeat center center;
background-size: 40%;
top: 0px;
left: 50%;
margin-left: -277px;
transition: all 0.3s ease-in-out;
}
On hover, we will animate the background size to make the superhero larger:
悬停时，我们将对背景大小进行动画处理以使超级英雄变大：
.letter-container h2 a:hover:before{
background-size: 100%;
}
The span will have the text-shadow that “elevates” the letters and on hover, we will move the letter down by adding a padding and changing the shadow:
跨度将具有“提升”字母的文本阴影，并且在悬停时，我们将通过添加填充和更改阴影来将字母向下移动：
.letter-container h2 a span{
color: #ff3de6;
float:left;
position: relative;
z-index: 100;
transition: all 0.3s ease-in-out;
text-shadow:
0px -1px 3px #cb4aba,
0 4px 3px #934589,
2px 15px 5px rgba(0, 0, 0, 0.2),
1px 20px 10px rgba(0, 0, 0, 0.3);
}
.letter-container h2 a span:hover{
color: #e929d0;
padding-top: 10px;
text-shadow:
0px -1px 3px #cb4aba,
0 4px 3px #934589,
1px 1px 10px rgba(0, 0, 0, 0.2);
}
例子6(Example 6)
.letter-container h2 a {
text-align: center;
font-size: 130px;
line-height: 160px;
display: block;
padding-bottom: 30px;
mask: url(../images/mask.png) repeat;
}
The animation will sharpen the letters and we will apply a different animation delay to each child:
动画将使字母更加清晰，我们将对每个孩子应用不同的动画延迟：
.letter-container h2 a span {
color: #fff;
opacity: 1;
text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
transition: all 0.3s linear;
animation: sharpen 0.9s linear backwards;
}
.letter-container h2 a span:hover{
text-shadow: 0px 0px 40px #fff;
}
.letter-container h2 a span:nth-child(1) {
animation-delay: 0s;
}
.letter-container h2 a span:nth-child(2) {
animation-delay: 0.1s;
}
.letter-container h2 a span:nth-child(3) {
animation-delay: 0.2s;
}
/* ...and so on for all the letters */
@keyframes sharpen {
0% {
opacity: 0;
text-shadow: 0px 0px 100px #fff;
color: transparent;
}
90% {
opacity: 0.9;
text-shadow: 0px 0px 10px #fff;
color: transparent;
}
100% {
color: #fff;
opacity: 1;
text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
}
}
例子7(Example 7)
.letter-container h2 a span{
display: inline-block;
background: #bfd4e2;
color: #ecf0f2;
text-shadow: 1px 1px 2px rgba(120,155,179,0.5);
width: 200px;
height: 200px;
line-height: 200px;
font-size: 100px;
margin: 3px;
cursor: pointer;
border-radius: 50%;
box-shadow:
2px 2px 10px rgba(43,54,61, 0.4),
0px 0px 0px 9px rgba(116,161,191,0.3) inset;
transition: all 0.3s ease-in-out;
}
.letter-container h2 a:hover span{
opacity: 0.3;
}
You can read a great explanation of the radial gradient here: CSS3 Radial Gradient Syntax Breakdown – Impressive Webs
您可以在此处阅读有关径向渐变的详细说明： CSS3径向渐变语法分解–令人印象深刻的网站
.letter-container h2 a span:hover{
opacity: 1;
box-shadow:
2px 2px 10px rgba(43,54,61, 0.4),
0px 0px 0px 0px #fedc3f inset,
0px 0px 100px 30px rgba(255,244,193,0.8);
color: #ff8624;
text-shadow:
1px 1px 2px rgba(166,97,41,0.5),
1px 1px 1px #e66212, 3px 3px 1px #fdff64,
4px 4px 6px #ff7420;
background-image:
radial-gradient(
center center,
circle contain,
#fedc3f 0%, #ff7420 100%
);
}
And that’s it! I hope you enjoyed creating some crazy typography effects with CSS3 and jQuery! What’s your favorite one?
就是这样！ 希望您喜欢使用CSS3和jQuery创建一些疯狂的排版效果！ 你最喜欢哪一个？
翻译自: https://tympanus.net/codrops/2011/11/28/typography-effects-with-css3-and-jquery/
css和jquery
扫一扫
1681
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
