Pages

How to create scolling text in Blogger?

 

 How to create scolling text in Blogger?





<title>Example</title>

<!-- Styles -->   
<style>
.example1 {
 height: 50px;   
 overflow: hidden;
 position: relative;
}
.example1 h3 {
 font-size: 3em;
 color: Red;
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);   
 transform:translateX(100%);
 /* Apply animation to this element */   
 -moz-animation: example1 15s linear infinite;
 -webkit-animation: example1 15s linear infinite;
 animation: example1 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
 0%   {
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%);        
 }
 100% {
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%);
 }
}
</style>

<!-- HTML -->   
<div class="example1">
<h3>Scrolling text... </h3>
</div>

No comments:

Corona के डर से कैसे बचा जाए...?

Corona  के डर से कैसे बचा जाए...? क्योंकि वायरस से बचना तो बहुत ही आसान है, लेकिन जो डर आपके और दुनिया के अधिकतर लोगों के भीतर बैठ गया...