HOT
22bulbjungle
No Result
View All Result
22bulbjungle
No Result
View All Result
Home Web Development CSS

How to Create a Horizontal News Ticker with CSS Only (Scrolling Texts | CODE)

in CSS, Video, Web Development
Reading Time: 1 min read
837 44
0
1.2k
SHARES
5.5k
VIEWS
Share on FacebookShare on Twitter

<div class="ticker-wrapper">
<div class="bigHeading">Breaking</div>
<div class="text-update">

Coronavirus live updates: China reports no deaths for the first time

</div>
</div>
body{
font-family: 'Roboto', sans-serif;
}

.ticker-wrapper{
position:relative;
max-width: 800px;
margin: auto;
padding-top :200px;
}

.bigHeading{
display:block;
position:absolute;
font-style:italic;
font-size: 40px;
background: #e60000;
color:#fff;
text-transform: uppercase;
padding: 15px;
letter-spacing: 3px;
font-weight: 700;
z-index: 2
}

.bigHeading::after,
.bigHeading::before{
content:'';
width: 0;
position:absolute;
border-width: 78px;
border-style: solid;
top: 0;
z-index: -1
}
.bigHeading::before{
border-color: #e60000 transparent transparent transparent ;
right: -78px
}

.bigHeading::after{
border-color: transparent transparent #e60000 transparent ;
left: -78px;
top: -78px
}
.text-update{
height: 70px;
background: #004fff;
overflow: hidden;
position:relative;
color:#fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 25px;
font-weight: 500;
display: flex;
align-items: center;
left: 125px;
}

.text-update p{
position:absolute;
width: 150%;
margin :0;
font-weight: 700;
text-align:left;

transform: translateX(100%);
animation: moving 25s linear infinite

}

@keyframes moving{
0%{
transform: translateX(100%);
}
100%{
transform: translateX(-100%);
}
}

 

RelatedPosts

How To See the Complete CSS of an Element in Webpage

Simple Image Slider Using Only CSS – EASY

[UPDATED 2022] How to Get Your PayPal API Credentials (Username, Password, and Signature to Woocommerce)

Tags: css only
Share485Tweet303Share121

Related Posts

Look for the full CSS of an element
Webdev Tips

How To See the Complete CSS of an Element in Webpage

by Content Editor
June 16, 2022
0

I'm going to show you how to look for the CSS styles of an element in a webpage. For this method, we...

Read more
Simple Image Slider Using Only CSS

Simple Image Slider Using Only CSS – EASY

June 16, 2022
How to Get Paypal API Credentials (Username, Password, Signature)

[UPDATED 2022] How to Get Your PayPal API Credentials (Username, Password, and Signature to Woocommerce)

March 27, 2022
Best Tools for Publishing Post Content (on WordPress, Shopify, Page Builders)

Best Tools for Publishing Post Content (on WordPress, Shopify, Page Builders)

February 22, 2022
Look for the full CSS of an element

How To See the Complete CSS of an Element in Webpage

June 16, 2022
Simple Image Slider Using Only CSS

Simple Image Slider Using Only CSS – EASY

June 16, 2022
How to Get Paypal API Credentials (Username, Password, Signature)

[UPDATED 2022] How to Get Your PayPal API Credentials (Username, Password, and Signature to Woocommerce)

March 27, 2022
Best Tools for Publishing Post Content (on WordPress, Shopify, Page Builders)

Best Tools for Publishing Post Content (on WordPress, Shopify, Page Builders)

February 22, 2022
How To Set SEO Meta Title and Description in Duda Builder

How To Set SEO Meta Title and Description in Duda Builder

January 26, 2022
How To Improve Customer Experience by Preloading Internal Links in Your Shopify Store

How To Improve Customer Experience by Preloading Internal Links in Your Shopify Store

December 8, 2021

Free Do it yourself tutorials on CSS, HTML, Photoshop, Wordpress, and Woocommerce to help you learn web development and graphic design.

Follow Us

Recent Tutorials

Look for the full CSS of an element

How To See the Complete CSS of an Element in Webpage

June 16, 2022
Simple Image Slider Using Only CSS

Simple Image Slider Using Only CSS – EASY

June 16, 2022

Categories

  • CSS
  • Duda Builder
  • Ecommerce
  • Elementor
  • Graphic Design
  • Javascript
  • PC Tips
  • Photoshop
  • Responsive design
  • Shopify
  • Video
  • Web Design
  • Web Development
  • Webdev Tips
  • Woocommerce
  • Wordpress
  • Home
  • Blog
  • Web Development
  • Graphic Design

© 2022 22BulbJungle.

No Result
View All Result
  • Home
  • Blog
  • Web Development
    • CSS
    • Javascript
    • WordPress
  • Graphic Design
    • Photoshop

© 2022 22BulbJungle.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.