Daha Önce Buradaki yazımızda basit kayan yazı eklentimizi anlatmıştık , şimdi ise 3d kayan yazımızı blogger bloga nasıl ekleriz onu anlatacağız , 3d kayan yazı eklentimizle blogunuzda daha farklı bir görüntü elde edebilir ziyaretçilerinize hoş bir görüntü sergileyebilirsiniz , 3d css kayan yazı efektini blogger blogunuza eklemek için yapmanız gereken aşağıda anlatılanları blogunuza uygulamak ve eklemek.
Blogunuzda </head> kodunu bulun ve hemen üstüne aşağıdaki kodları yapıştırın.
<style type="text/css">
@font-face {
font-family: Agency;
src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/agency-fb-bold.woff);
}
body {
font-family: Avenir, sans-serif;
marging: 0;
}
#dmarquee {
margin-top: 3rem;
perspective: 500px;
font-size: 0;
font-family: Agency, sans-serif;
}
#dmarquee div {
display: inline-block;
height: 12rem;
width: 20rem;
position: relative;
}
#dmarquee div:first-of-type {
background: #e5233e;
transform-origin: top right;
transform: rotateY(-60deg);
color: #fff;
}
#dmarquee div:last-of-type {
background: #b31e31;
transform-origin: top left;
transform: rotateY(45deg);
color: #f8c9d9;
}
#dmarquee div {
font-size: 8rem;
overflow: hidden;
}
#dmarquee div span {
position: absolute;
width: 600%;
line-height: 1.4;
}
#dmarquee div:first-of-type span {
transform: translateX(40rem);
animation: leftcrawl 14s linear infinite;
text-shadow: 4px 0px 4px rgba(0,0,0,0.3);
}
#dmarquee div:last-of-type span {
transform: translateX(20rem);
animation: rightcrawl 14s linear infinite;
}
@keyframes leftcrawl {
to { transform: translateX(-100rem); }
}
@keyframes rightcrawl {
to { transform: translateX(-120rem); }
}
</style>
Şablonunuzu kaydedin ve çıkın , Aşağıdaki örnekteki gibi uygulayabilirsiniz.
<div id="dmarquee">
<div>
<span>Buraya yazı gelecek</span>
</div>
<div aria-hidden="true">
<span>Buraya Yazı Gelecek</span>
</div>
</div>
Başka bir eklentide görüşmek üzere....Soru ve görüşleriniz için yorum panelini kullanabilirsiniz.
SHARE US →