В этом эффекте основную роль играют свойство transform и псевдокласс :nth-child.В качестве фона текста можно применять любые изображения,без внесения изменений в код элемента эффекта,изображение применяется с размерами 100Х100px.Места возможных изменений отмечены комментариями.Советы,вопросы и предложения прошу делать в комментарии.
Вариант эффекта с разными фоновыми изображениями
<style>
.dstext {
font-size: 30px;
text-transform: uppercase;
margin: 30px auto 0 auto;
width: auto;
height: 100px;
padding-left: 20px;
font-family: 'Georgia';
font-weight: 400;
position: relative;
}
.dstext:before,
.dstext:after {
content: " ";
display: table;
}
.dstext:after {
clear: both;
}
.dstext span {
cursor: default;
display: block;
float: left;
border-radius: 50%;
-o-border-radius: 50%;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin: 0 0 0 -20px;
color: rgba(255,255,255,0.95);
text-shadow: 0 -1px 1px rgba(0,0,0,0.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
/* - Фон рисунка -*/
.dstext span:nth-child(odd) {
background: rgba(118,176,204, 0.8) url(http://delaisait.ucoz.ru/script/text/dsfontext.png);
}
/* - Фон рисунка -*/
.dstext span:nth-child(even) {
background: rgba(58,126,162, 0.8) url(http://delaisait.ucoz.ru/script/text/dsfontext1.png);
}
.dstext span:nth-child(1) {
-webkit-transform: translate(500%) translate(-100px);
-moz-transform: translate(500%) translate(-100px);
-o-transform: translate(500%) translate(-100px);
-ms-transform: translate(500%) translate(-100px);
transform: translate(500%) translate(-100px);
}
.dstext span:nth-child(2) {
-webkit-transform: translate(400%) translate(-80px);
-moz-transform: translate(400%) translate(-80px);
-o-transform: translate(400%) translate(-80px);
-ms-transform: translate(400%) translate(-80px);
transform: translate(400%) translate(-80px);
}
.dstext span:nth-child(3) {
-webkit-transform: translate(300%) translate(-60px);
-moz-transform: translate(300%) translate(-60px);
-o-transform: translate(300%) translate(-60px);
-ms-transform: translate(300%) translate(-60px);
transform: translate(300%) translate(-60px);
}
.dstext span:nth-child(4) {
-webkit-transform: translate(200%) translate(-40px);
-moz-transform: translate(200%) translate(-40px);
-o-transform: translate(200%) translate(-40px);
-ms-transform: translate(200%) translate(-40px);
transform: translate(200%) translate(-40px);
}
.dstext span:nth-child(5) {
-webkit-transform: translate(100%) translate(-20px);
-moz-transform: translate(100%) translate(-20px);
-o-transform: translate(100%) translate(-20px);
-ms-transform: translate(100%) translate(-20px);
transform: translate(100%) translate(-20px);
}
.dstext span:nth-child(6) {
-webkit-transform: translate(-100%) translate(20px);
-moz-transform: translate(-100%) translate(20px);
-o-transform: translate(-100%) translate(20px);
-ms-transform: translate(-100%) translate(20px);
transform: translate(-100%) translate(20px);
}
.dstext span:nth-child(7) {
-webkit-transform: translate(-200%) translate(40px);
-moz-transform: translate(-200%) translate(40px);
-o-transform: translate(-200%) translate(40px);
-ms-transform: translate(-200%) translate(40px);
transform: translate(-200%) translate(40px);
}
.dstext span:nth-child(8) {
-webkit-transform: translate(-300%) translate(60px);
-moz-transform: translate(-300%) translate(60px);
-o-transform: translate(-300%) translate(60px);
-ms-transform: translate(-300%) translate(60px);
transform: translate(-300%) translate(60px);
}
.dstext span:nth-child(9) {
-webkit-transform: translate(-400%) translate(80px);
-moz-transform: translate(-400%) translate(80px);
-o-transform: translate(-400%) translate(80px);
-ms-transform: translate(-400%) translate(80px);
transform: translate(-400%) translate(80px);
}
.dstext span:nth-child(10) {
-webkit-transform: translate(-500%) translate(100px);
-moz-transform: translate(-500%) translate(100px);
-o-transform: translate(-500%) translate(100px);
-ms-transform: translate(-500%) translate(100px);
transform: translate(-500%) translate(100px);
}
.dstext span:not(:last-child) {
opacity: 0;
pointer-events: none;
}
.dstext span:last-child{
position: absolute;
top: 0;
left: 20%;/* - Положение рисунка1 -*/
margin-left: -20px;/* - Положение рисунка1 -*/
z-index: 100;
background: url(http://delaisait.ucoz.ru/script/text/book100x100.png) no-repeat center;
}
.dstext:hover span:not(:last-child){
-webkit-transform: translate(0%);
-moz-transform: translate(0%);
-o-transform: translate(0%);
-ms-transform: translate(0%);
transform: translate(0%);
opacity: 1;
}
.dstext:hover span:last-child {
opacity: 0;
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-o-transform: scale(1.4);
-ms-transform: scale(1.4);
transform: scale(1.4);
}
</style>
<h1 class="dstext">
<span>Д</span>
<span>Е</span>
<span>Л</span>
<span>А</span>
<span>Й</span>
<span></span>
<span>С</span>
<span>А</span>
<span>Й</span>
<span>Т</span>
<span></span>
</h1>
<h2 class="dstext">
<span>С</span>
<span>А</span>
<span>Й</span>
<span>Т</span>
<span>О</span>
<span>С</span>
<span>Т</span>
<span>Р</span>
<span>О</span>
<span>Е</span>
<span>Н</span>
<span>И</span>
<span>Е</span>
<span></span>
</h2>
Вариант с одинаковыми фоновыми изображениями
<style>
.dstext {
font-size: 30px;
text-transform: uppercase;
margin: 30px auto 0 auto;
width: auto;
height: 100px;
padding-left: 20px;
font-family: 'Georgia';
font-weight: 400;
position: relative;
}
.dstext:before,
.dstext:after {
content: " ";
display: table;
}
.dstext:after {
clear: both;
}
.dstext span {
cursor: default;
display: block;
float: left;
border-radius: 50%;
-o-border-radius: 50%;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin: 0 0 0 -20px;
color: rgba(255,255,255,0.95);
text-shadow: 0 -1px 1px rgba(0,0,0,0.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
/* - Фон рисунка -*/
.dstext span:nth-child(odd) {
background: rgba(118,176,204, 0.8) url(http://delaisait.ucoz.ru/script/text/dsfontext1.png);
}
/* - Фон рисунка -*/
.dstext span:nth-child(even) {
background: rgba(58,126,162, 0.8) url(http://delaisait.ucoz.ru/script/text/dsfontext1.png);
}
.dstext span:nth-child(1) {
-webkit-transform: translate(500%) translate(-100px);
-moz-transform: translate(500%) translate(-100px);
-o-transform: translate(500%) translate(-100px);
-ms-transform: translate(500%) translate(-100px);
transform: translate(500%) translate(-100px);
}
.dstext span:nth-child(2) {
-webkit-transform: translate(400%) translate(-80px);
-moz-transform: translate(400%) translate(-80px);
-o-transform: translate(400%) translate(-80px);
-ms-transform: translate(400%) translate(-80px);
transform: translate(400%) translate(-80px);
}
.dstext span:nth-child(3) {
-webkit-transform: translate(300%) translate(-60px);
-moz-transform: translate(300%) translate(-60px);
-o-transform: translate(300%) translate(-60px);
-ms-transform: translate(300%) translate(-60px);
transform: translate(300%) translate(-60px);
}
.dstext span:nth-child(4) {
-webkit-transform: translate(200%) translate(-40px);
-moz-transform: translate(200%) translate(-40px);
-o-transform: translate(200%) translate(-40px);
-ms-transform: translate(200%) translate(-40px);
transform: translate(200%) translate(-40px);
}
.dstext span:nth-child(5) {
-webkit-transform: translate(100%) translate(-20px);
-moz-transform: translate(100%) translate(-20px);
-o-transform: translate(100%) translate(-20px);
-ms-transform: translate(100%) translate(-20px);
transform: translate(100%) translate(-20px);
}
.dstext span:nth-child(6) {
-webkit-transform: translate(-100%) translate(20px);
-moz-transform: translate(-100%) translate(20px);
-o-transform: translate(-100%) translate(20px);
-ms-transform: translate(-100%) translate(20px);
transform: translate(-100%) translate(20px);
}
.dstext span:nth-child(7) {
-webkit-transform: translate(-200%) translate(40px);
-moz-transform: translate(-200%) translate(40px);
-o-transform: translate(-200%) translate(40px);
-ms-transform: translate(-200%) translate(40px);
transform: translate(-200%) translate(40px);
}
.dstext span:nth-child(8) {
-webkit-transform: translate(-300%) translate(60px);
-moz-transform: translate(-300%) translate(60px);
-o-transform: translate(-300%) translate(60px);
-ms-transform: translate(-300%) translate(60px);
transform: translate(-300%) translate(60px);
}
.dstext span:nth-child(9) {
-webkit-transform: translate(-400%) translate(80px);
-moz-transform: translate(-400%) translate(80px);
-o-transform: translate(-400%) translate(80px);
-ms-transform: translate(-400%) translate(80px);
transform: translate(-400%) translate(80px);
}
.dstext span:nth-child(10) {
-webkit-transform: translate(-500%) translate(100px);
-moz-transform: translate(-500%) translate(100px);
-o-transform: translate(-500%) translate(100px);
-ms-transform: translate(-500%) translate(100px);
transform: translate(-500%) translate(100px);
}
.dstext span:not(:last-child) {
opacity: 0;
pointer-events: none;
}
.dstext span:last-child{
position: absolute;
top: 0;
left: 20%;/* - Положение рисунка1 -*/
margin-left: -20px;/* - Положение рисунка1 -*/
z-index: 100;
background: url(http://delaisait.ucoz.ru/script/text/book100x100.png) no-repeat center;
}
.dstext:hover span:not(:last-child){
-webkit-transform: translate(0%);
-moz-transform: translate(0%);
-o-transform: translate(0%);
-ms-transform: translate(0%);
transform: translate(0%);
opacity: 1;
}
.dstext:hover span:last-child {
opacity: 0;
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-o-transform: scale(1.4);
-ms-transform: scale(1.4);
transform: scale(1.4);
}
</style>
<h1 class="dstext">
<span>Д</span>
<span>Е</span>
<span>Л</span>
<span>А</span>
<span>Й</span>
<span></span>
<span>С</span>
<span>А</span>
<span>Й</span>
<span>Т</span>
<span></span>
</h1>
<h2 class="dstext">
<span>С</span>
<span>А</span>
<span>Й</span>
<span>Т</span>
<span>О</span>
<span>С</span>
<span>Т</span>
<span>Р</span>
<span>О</span>
<span>Е</span>
<span>Н</span>
<span>И</span>
<span>Е</span>
<span></span>
</h2>
|
