Not Solved Help styling "Cool Announcements with Marquee" container
#6
Not Solved

I found a nice pure CSS marquee but it is coded different than the one above...It looks good other than it also needs the red title box and font awesome microphone!

I tested it in my template and it worked nicely on all browsers!  If anyone could help me with the same styling as the other one above, I would greatly appreciate it!!


    <style style="text/css">
        .marquee {
            height: 40px;
            overflow: hidden;
            position: relative;
            background: #fefefe;
            color: #333;
            border: 1px solid #4a4a4a;
        }
        
        .marquee p {
            position: absolute;
            width: 100%;
            height: 100%;
            margin: 0;
            line-height: 40px;
            text-align: center;
            -moz-transform: translateX(100%);
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
            -moz-animation: scroll-left 2s linear infinite;
            -webkit-animation: scroll-left 2s linear infinite;
            animation: scroll-left 20s linear infinite;
        }
        
        @-moz-keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
            }
        }
        
        @-webkit-keyframes scroll-left {
            0% {
                -webkit-transform: translateX(100%);
            }
            100% {
                -webkit-transform: translateX(-100%);
            }
        }
        
        @keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
            }
        }
    </style>

    <div class="marquee">
        <p> {$mybb->settings['ann']} </p>
    </div>

<br />
MyBB 1.8.22 (x4)
7173Mustangs.com, pa2a.org, pazrt.com & paguntalk.com
Reply


Messages In This Thread
RE: Help styling "Cool Announcements with Marquee" container - by RocketFoot - 2019-12-03, 06:13 PM

Forum Jump:


Users browsing this thread: 1 Guest(s)