今回も引き続き,
テキストの上を水平線が横切る
前回の<body>
要素に書いたコードに,<div>
要素class
属性"item")<a>
要素class
属性"link")data-
グローバル属性が与えられた空の<span>
要素を2つ添えた。そして,<a>
要素にはアニメーションのためのclass
属性
<div class="container">
<div class="item">
<a class="link animation-2" href="http://gihyo.jp/design/serial/01/away3d-typescript">
Away3D
<span data-letters="Away3D"></span>
<span data-letters="Away3D"></span>
</a>
</div>
</div>
このアニメーションのclass
属性
.animation-2 {
font-weight: 800;
color: Steelblue;
font-family: 'Dosis', sans-serif;
line-height: 1.3em;
margin-top: -0.2em;
}
はじめに加える擬似要素は,transform
プロパティに与えたtranslateX()
関数でテキストの左に移した
.animation-2::before {
content: '';
width: 100%;
height: 6px;
background: white;
position: absolute;
top: 50%;
transform: translateX(-100%);
}
その水平線は,:hover
擬似クラス),transition
とtransform
プロパティ)。なお,animation-2
)overflow
プロパティにhidden
を与えて,
.animation-2 {
overflow: hidden;
}
.animation-2::before {
transition: 0.4s ease-in-out;
}
.animation-2:hover::before {
transform: translateX(100%);
}
コード1 テキストの上を擬似要素の水平線が横切る
.animation-2 {
font-weight: 800;
color: Steelblue;
font-family: 'Dosis', sans-serif;
overflow: hidden;
line-height: 1.3em;
margin-top: -0.2em;
}
.animation-2::before {
content: '';
width: 100%;
height: 6px;
background: white;
position: absolute;
top: 50%;
transform: translateX(-100%);
transition: 0.4s ease-in-out;
}
.animation-2:hover::before {
transform: translateX(100%);
}
擬似要素でつくった2つのテキストを重ねる
つぎに,class
属性"animation-2")<span>
要素にも,data-
グローバル属性からattr()
式で得た同じテキストを異なる色で定めた
<a class="link animation-2" href="http://gihyo.jp/design/serial/01/away3d-typescript">
Away3D
<span data-letters="Away3D"></span>
<span data-letters="Away3D"></span>
</a>
.animation-2 span::before {
content: attr(data-letters);
color: white;
}
そのうえで,
.animation-2 span {
position: absolute;
left: 0;
}
.animation-2 span::before {
position: absolute;
}
コード2 擬似要素のテキストを2つもとのテキストの上に重ねて置く
.animation-2 {
font-weight: 800;
color: Steelblue;
font-family: 'Dosis', sans-serif;
overflow: hidden;
line-height: 1.3em;
margin-top: -0.2em;
}
.animation-2::before {
content: '';
width: 100%;
height: 6px;
background: white;
position: absolute;
top: 50%;
transform: translateX(-100%);
transition: 0.4s ease-in-out;
}
.animation-2:hover::before {
transform: translateX(100%);
}
.animation-2 span {
position: absolute;
left: 0;
}
.animation-2 span::before {
content: attr(data-letters);
position: absolute;
color: white;
}