Visualizzazione risultati 1 fino 1 di 1

Discussione: problema con marquee

  1. #1
    Guest

    Post problema con marquee

    ho un problema con questo marquee ma non riesco a capire perchè non mi legge la terza, in pratica quando scorre il primo si vede, anche il secondo ma la terza no, vorrei capire il perchè. grazie ragazzi

    vi metto il codice html e il css

    html
    Codice HTML:
    <!-- inizio notizie --><div class="tickertape">  <strong class="title">Notizie</strong>  <span class="marquee"><span><strong>1:</strong> 1</span><span><strong>2</strong> 2</span><span><strong>3:</strong> 3</span></span></div>    <!--fine notizie-->
    questo il css

    Codice:
    .hideText {
    text-indent: -999em;
    letter-spacing: -999em;
    overflow: hidden;
    }
    
    
    *,
    a:focus {
    outline: none !important;
    }
    button:focus {
    outline: none !important;
    }
    
    
    #content {
    margin: 0 !important;
    padding: 0 !important;
    }
    #tlyPageGuideWrapper,
    .filter-bar {
    display: none !important;
    }
    
    
    .table td,
    .table th {
    vertical-align: middle;
    }
    .table th {
    padding: 3px;
    text-align: center;
    }
    .table img {
    float: left;
    }
    }
    
    
    .widget-messages ul li .glyphicons.single.bin i:before {
    color: #cccccc;
    position: relative;
    line-height: 20px;
    left: auto;
    top: auto;
    }
    .widget-messages ul li:last-child {
    margin: 0;
    }
    .tickertape {
    height: 32px;
    line-height: 32px;
    padding: 0 10px 0 0;
    position: relative;
    margin: 0 0 15px;
    background-color: #f9f9f9;
    background-image: -moz-linear-gradient(top, #fdfdfd, #f4f4f4);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdfdfd), to(#f4f4f4));
    background-image: -webkit-linear-gradient(top, #fdfdfd, #f4f4f4);
    background-image: -o-linear-gradient(top, #fdfdfd, #f4f4f4);
    background-image: linear-gradient(to bottom, #fdfdfd, #f4f4f4);
    background-repeat: repeat-x;
    filter: progidXImageTransform.Microsoft.gradient(startColorstr=' #fffdfdfd', endColorstr='#fff4f4f4', GradientType=0);
    border: 1px solid #d8d8d8;
    color: #7c7c7c;
    box-shadow: 0 1px 0 0 #f7f7f7, 0 5px 4px -4px #d8d8d8;
    -moz-box-shadow: 0 1px 0 0 #f7f7f7, 0 5px 4px -4px #d8d8d8;
    -webkit-box-shadow: 0 1px 0 0 #f7f7f7, 0 5px 4px -4px #d8d8d8;
    }
    .tickertape .title {
    padding: 0 10px;
    float: left;
    width: 80px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 32px;
    }
    
    
    .tickertape .marquee {
    height: 20px;
    line-height: 20px;
    font-size: 11px;
    background: #ffffff;
    border: 1px solid #d8d8d8;
    box-shadow: -2px 0 5px -4px #d8d8d8 inset, 2px 0 5px -4px #d8d8d8 inset;
    padding: 0 5px;
    display: block;
    margin-left: 90px;
    margin-top: 6px;
    overflow: hidden;
    white-space: nowrap;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    }
    .tickertape .marquee span {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    transform: translateX(100%);
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    }
    .tickertape .marquee span:nth-child(1) {
    animation: marquee-one 20s ease infinite;
    -moz-animation: marquee-one 20s ease infinite;
    -webkit-animation: marquee-one 20s ease infinite;
    }
    
    
    .tickertape .marquee span:nth-child(2) {
    animation: marquee-two 20s ease infinite;
    -moz-animation: marquee-two 20s ease infinite;
    -webkit-animation: marquee-two 20s ease infinite;
    }
    
    
    .tickertape .marquee span:nth-child(3) {
    animation: marquee-three 20s ease infinite;
    -moz-animation: marquee-three 20s ease infinite;
    -webkit-animation: marquee-three 20s ease infinite;
    }
    @keyframes marquee-one {
    0% {
    transform: translateX(105%);
    }
    10% {
    transform: translateX(0);
    }
    40% {
    transform: translateX(0);
    }
    50% {
    transform: translateX(-105%);
    }
    100% {
    transform: translateX(-105%);
    }
    }
    @-moz-keyframes marquee-one {
    0% {
    -moz-transform: translateX(105%);
    }
    10% {
    -moz-transform: translateX(0);
    }
    40% {
    -moz-transform: translateX(0);
    }
    50% {
    -moz-transform: translateX(-105%);
    }
    100% {
    -moz-transform: translateX(-105%);
    }
    }
    @-webkit-keyframes marquee-one {
    0% {
    -webkit-transform: translateX(105%);
    }
    10% {
    -webkit-transform: translateX(0);
    }
    40% {
    -webkit-transform: translateX(0);
    }
    50% {
    -webkit-transform: translateX(-105%);
    }
    100% {
    -webkit-transform: translateX(-105%);
    }
    }
    @keyframes marquee-two {
    0% {
    transform: translateX(105%);
    }
    50% {
    transform: translateX(105%);
    }
    60% {
    transform: translateX(0);
    }
    90% {
    transform: translateX(0);
    }
    100% {
    transform: translateX(-105%);
    }
    }
    @-moz-keyframes marquee-two {
    0% {
    -moz-transform: translateX(105%);
    }
    50% {
    -moz-transform: translateX(105%);
    }
    60% {
    -moz-transform: translateX(0);
    }
    90% {
    -moz-transform: translateX(0);
    }
    100% {
    -moz-transform: translateX(-105%);
    }
    }
    @-webkit-keyframes marquee-two {
    0% {
    -webkit-transform: translateX(105%);
    }
    50% {
    -webkit-transform: translateX(105%);
    
    
    }
    60% {
    -webkit-transform: translateX(0);
    }
    90% {
    -webkit-transform: translateX(0);
    }
    100% {
    -webkit-transform: translateX(-105%);
    }
    
    
    @keyframes marquee-three {
    0% {
    transform: translateX(105%);
    }
    50% {
    transform: translateX(105%);
    }
    60% {
    transform: translateX(0);
    }
    90% {
    transform: translateX(0);
    }
    100% {
    transform: translateX(-105%);
    }
    
    
    @-moz-keyframes marquee-three {
    0% {
    -moz-transform: translateX(105%);
    }
    50% {
    -moz-transform: translateX(105%);
    }
    60% {
    -moz-transform: translateX(0);
    }
    90% {
    -moz-transform: translateX(0);
    }
    100% {
    -moz-transform: translateX(-105%);
    }
    @-webkit-keyframes marquee-three {
    0% {
    -webkit-transform: translateX(105%);
    }
    50% {
    -webkit-transform: translateX(105%);
    
    
    }
    60% {
    -webkit-transform: translateX(0);
    }
    90% {
    -webkit-transform: translateX(0);
    }
    100% {
    -webkit-transform: translateX(-105%);
    }
    .widget-timeline .widget-body {
    padding: 15px;
    position: relative;
    }
    Ultima modifica di karl94 : 21-05-2014 alle ore 00.18.21 Motivo: Formattazione del codice

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •