Question 222662 in Html Question posted in
Some basic documentation can be found here.

Html – How can I change the font color and size of one word in CSS animation?

I am very new to CSS. I am trying to get one word in my sentence to change font size and color after my animation. I tried adding a span class to the word like so:

<h2>I'm <span style = "font-size: 20px; color: red">available</span> for work</h2></span>

And then adding a class to my CSS to see if it would work there:

.my-class {
    font-size: 20px;
    color: red;
}

But neither of these seems to have any effect. How can I adjust the size and color of just one word with CSS?

/* Global Variables */

 :root {
  --main-bg-color: #DDD0C8;
  --secondary-bg-color: #323232;
}

* {
  box-sizing: border-box;
  line-height: 1.5em;
  padding: 0;
  margin: 0;
}

html {
  font-size: --main-font-size;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: beige;
}


/*---CONTACT SECTION---*/

.contact-container {
  background-color: darkgray;
  padding-top: 10px;
  text-align: center;
}

.contact-text h2 {
  font-weight: 700;
  text-align: center;
  font-size: 20px;
  font-family: 'Poppins', sans-serif;
}

.contact-text p {
  font-weight: 700;
  text-align: center;
  font-size: var(--main-font-size);
  font-family: 'Poppins', sans-serif;
}

.shine_animation {
  background: linear-gradient(90deg, #000, #fff, #000);
  letter-spacing: 5px;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
  background-size: 80%;
  animation: shine 5s linear infinite;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  position: relative;
}

@keyframes shine {
  0% {
    background-position-x: -500%;
  }
  100% {
    background-position-x: 500%;
    background-color: var(--main-bg-color);
  }
}
<!DOCTYPE html>
<html lang="en">

<!-- Head -->

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="animate.css">
</head>

<body>

  <!-- Contact Section -->
  <div class="contact-container">
    <div class="contact-text" , id="contact">
      <h2>I'm <span style = "font-size: 20px; color: red">available</span> for work</h2>
      </span>
      <span><p>Get in touch with me today.</p></span>
    </div>
  </div>

</body>

</html>
Tags:

2

Answers


  1. 0

    To change the font color and size of one word in CSS animation:

    <h2>I'm <span class="shine_animation">available</span> for work</h2>

    CSS:

    .shine_animation {
  font-size: 20px;
  color: red;
  /* Your animation styles here */
}
    Login or Signup to reply.
  2. 0

    You’re there, you just need to add the .shine_animation class to your span. Then you should be good to go.

    I’ll note, if these are the colors it’s not very accessible, but you can continue to work on that.

    If you also want the text to be bigger, you’d just need to add the font-size to the .shine_animation class. You’ll also need to remove the style tag that currently exists on the span.

    /* Global Variables */

 :root {
  --main-bg-color: #DDD0C8;
  --secondary-bg-color: #323232;
}

* {
  box-sizing: border-box;
  line-height: 1.5em;
  padding: 0;
  margin: 0;
}

html {
  font-size: --main-font-size;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: beige;
}


/*---CONTACT SECTION---*/

.contact-container {
  background-color: darkgray;
  padding-top: 10px;
  text-align: center;
}

.contact-text h2 {
  font-weight: 700;
  text-align: center;
  font-size: 20px;
  font-family: 'Poppins', sans-serif;
}

.contact-text p {
  font-weight: 700;
  text-align: center;
  font-size: var(--main-font-size);
  font-family: 'Poppins', sans-serif;
}

.shine_animation {
  background: linear-gradient(90deg, #000, #fff, #000);
  letter-spacing: 5px;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
  background-size: 80%;
  animation: shine 5s linear infinite;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  position: relative;
  font-size: 40px;
}

@keyframes shine {
  0% {
    background-position-x: -500%;
  }
  100% {
    background-position-x: 500%;
    background-color: var(--main-bg-color);
  }
}
    <!DOCTYPE html>
<html lang="en">

<!-- Head -->

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="animate.css">
</head>

<body>

  <!-- Contact Section -->
  <div class="contact-container">
    <div class="contact-text" id="contact">
      <h2>I'm <span class="shine_animation">available</span> for work</h2>
      </span>
      <span><p>Get in touch with me today.</p></span>
    </div>
  </div>

</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search