增加 css 动画上伪元素的大小

分类：编程问答

如何解决增加 css 动画上伪元素的大小

我有一个 css 动画，它动画一条线从左到右以及从右到左或以 CSSey 方式移动一个 ::after 元素，在 x 轴上从 0 到 300% 再到 0%

我想以默认大小开始动画，并在元素（::after）围绕中间部分时水平缩放元素的大小，然后在结束时返回默认大小，反之亦然。

我尝试添加 50% { transform: scale(1.5)} 但这不是我想要的。

const faqContainer = document.querySelector('.faq-Box')
const faqBoxes = document.querySelectorAll('.faq')

const displayIcons = () => {
  faqBoxes.forEach(Box => {
    const toggler = document.createElement('i')
    toggler.className = `toggler fas fa-chevron-down`
    Box.appendChild(toggler)
  })
}

window.addEventListener('DOMContentLoaded',displayIcons)

const showFaqContent = event => {
  if (event.target.classList.contains('toggler') || event.target.classList.contains('faq-title')) {
    const parentElem = event.target.parentElement
    const eventElmClassList = event.target.classList
    parentElem.classList.toggle('active')
    if (eventElmClassList.contains('toggler')) {
      eventElmClassList.toggle('active')
    } else if (eventElmClassList.contains('faq-title')) {
      const i = event.target.nextElementSibling.nextElementSibling
      i.classList.toggle('active')
    }
  }
}

faqContainer.addEventListener('click',showFaqContent)
*,*::before,*::after {
  margin: 0;
  padding: 0;
  Box-sizing: border-Box;
  list-style-type: none;
  text-decoration: none;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  font-family: 'poppins';
  background: #ECE9E6;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right,#FFFFFF,#ECE9E6);
  /* Chrome 10-25,Safari 5.1-6 */
  background: linear-gradient(to right,#ECE9E6);
  /* W3C,IE 10+/ Edge,Firefox 16+,Chrome 26+,Opera 12+,Safari 7+ */
}

.main-container {
  height: 100%;
  width: 90%;
}

.main-container h1 {
  position: relative;
  color: rgb(54,94,128);
}

.main-container h1 i {
  font-size: 1.5rem;
}

.main-container h1::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  background-color: rgba(70,131,180,0.507);
}

.main-container h1::after {
  content: '';
  position: absolute;
  width: 25%;
  height: 3px;
  bottom: 0px;
  left: 0;
  background-color: rgb(70,180);
  animation: slide .8s linear 0s infinite alternate both running;
}

@keyframes slide {
  0% {
    transform: translateX(0) scaleX(1);
  }
  100% {
    transform: translateX(300%);
  }
}

.faq-Box {
  background-color: #fff;
  border-radius: 8px;
  Box-shadow: 4px 4px 8px hsl(0,0%,80%);
}

.faq {
  position: relative;
  padding: .8rem 1rem;
  margin: .5rem;
  border-bottom: .5px solid rgba(221,221,0.829);
}

.faq-title {
  color: steelblue;
  font-weight: 400;
  cursor: pointer;
  transition: .1s linear;
}

.faq.active h3 {
  font-weight: bold;
}

.faq-content {
  /* display: none; */
  font-family: 'nunito','sans-serif';
  background-color: rgb(235,235,235);
  border-radius: 5px;
  border-left: 5px solid rgb(54,128);
  margin-top: 0px;
  padding: 0;
  opacity: 0;
  height: 0px;
  font-size: .9rem;
  color: hsl(208,41%,20%);
  transition: .2s cubic-bezier(0.175,0.885,0.32,1.275);
}

.faq.active .faq-content {
  /* display: block; */
  margin-top: 10px;
  opacity: 1;
  padding: 1rem;
  height: auto;
}

.faq .toggler {
  position: absolute;
  top: 1.1rem;
  right: 1rem;
  cursor: pointer;
  font-size: 1.25rem;
  transition: all .8s cubic-bezier(0.175,1.275);
}

.faq .toggler.active {
  color: hsl(208,50%);
  transform: scaleY(-1);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <Meta charset="UTF-8">
  <Meta http-equiv="X-UA-Compatible" content="IE=edge">
  <Meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Day-12 Faq Boxes</title>
  <!-- Google Api/fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap" rel="stylesheet">
  <!-- custom css -->
  <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>

  <div class="main-container">
    <h1><i class="fas fa-info-circle"></i> FAQ</h1>
    <div class="faq-Box hide">
      <div class="faq">
        <h3 class="faq-title">How many team members can i invite?</h3>
        <p class="faq-content">You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.</p>
      </div>
      <div class="faq">
        <h3 class="faq-title">What is the maximux file upload size?</h3>
        <p class="faq-content">No more than 2GB. All files in your account must fit your allotted storage space.</p>
      </div>
      <div class="faq">
        <h3 class="faq-title">How do i reset my password?</h3>
        <p class="faq-content">Click “Forgot password” from the login page or “Change password” from your profile page. A reset link will be emailed to you.</p>
      </div>
      <div class="faq">
        <h3 class="faq-title">Can i cancel my subscription?</h3>
        <p class="faq-content">Yes! Send us a message and we’ll process your request no questions asked.</p>
      </div>
      <div class="faq">
        <h3 class="faq-title">Do you provide any additional support?</h3>
        <p class="faq-content">Chat and email support is available 24/7. Phone lines are open during normal business hours.</p>
      </div>
    </div>
  </div>

  <!-- fontawesome script -->
  <script src="https://kit.fontawesome.com/39350fd9df.js"></script>
  <!-- Custom Javascript -->
  <script src="main.js" type="text/javascript"></script>
</body>

</html>

解决方法

尝试使用背景动画：

.main-container h1 {
  position: relative;
  color: rgb(54,94,128);
  padding-bottom:5px;
}

.main-container h1::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left:0;
  animation: slide .8s linear infinite alternate;
  background:
    linear-gradient(rgb(70,131,180) 0 0) left/25% 3px no-repeat
    rgba(70,180,0.507);
}


@keyframes slide {
  50% {
     background-size:50% 3px;
  }
  100% {
    background-position: right;
  }
}
<div class="main-container">
  <h1>FAQ</h1>
</div>

,

这里有两个更流畅的动画。两者的区别是一个有开始/结束width: 15%，而另一个有width: 0。您还可以尝试更多的部门，例如25%、50%、75%、100%。

*,*::before,*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style-type: none;
  text-decoration: none;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  font-family: 'poppins';
  background: #ECE9E6;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right,#FFFFFF,#ECE9E6);
  /* Chrome 10-25,Safari 5.1-6 */
  background: linear-gradient(to right,#ECE9E6);
  /* W3C,IE 10+/ Edge,Firefox 16+,Chrome 26+,Opera 12+,Safari 7+ */
}

.main-container,.main-container-2 {
  height: 100%;
  width: 90%;
}

.main-container h1,.main-container-2 h1 {
  position: relative;
  color: rgb(54,128);
}

.main-container h1 i,.main-container-2 h1 i {
  font-size: 1.5rem;
}

.main-container h1::before,.main-container-2 h1::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  background-color: rgba(70,0.507);
}

.main-container h1::after {
  content: '';
  position: absolute;
  width: 15%;
  height: 3px;
  bottom: 0px;
  left: 0;
  background-color: rgb(70,180);
  animation: slide 2s linear 0s infinite alternate both running;
}

@keyframes slide {
  50% {
    width: 50%;
    left: 25%;
  }
  100% {
    width: 15%;
    left: 85%;
  }
}

.main-container-2 h1::after {
  content: '';
  position: absolute;
  width: 0%;
  height: 3px;
  bottom: 0px;
  left: 0;
  background-color: rgb(70,180);
  animation: slide2 2s linear 0s infinite alternate both running;
}

@keyframes slide2 {
  50% {
    width: 40%;
    left: 30%;
  }
  100% {
    width: 0%;
    left: 100%;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Day-12 Faq Boxes</title>
  <!-- google api/fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap" rel="stylesheet">
  <!-- custom css -->
  <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>

  <div class="main-container">
    <h1><i class="fas fa-info-circle"></i> FAQ</h1>
  </div>
  <div class="main-container-2">
    <h1><i class="fas fa-info-circle"></i> FAQ</h1>
  </div>

  <!-- fontawesome script -->
  <script src="https://kit.fontawesome.com/39350fd9df.js"></script>
  <!-- Custom Javascript -->
  <script src="main.js" type="text/javascript"></script>
</body>

</html>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其他元素将获得点击?
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。）
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么？
这是用Java进行XML解析的最佳库
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构为什么？
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么？
如何在Java中聆听按键时移动图像
如何在Java中聆听按键时移动图像。
Java“Program to an interface”这是什么意思？
Java“Program to an interface”。这是什么意思？
Java在半透明框架/面板/组件上重新绘画
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName”和“ Class.forNamenewInstance”之间有什么区别？
Java“ Class.forName（）”和“ Class.forName（）。newInstance（）”之间有什么区别？
在此环境中不提供编译器也许是在JRE而不是JDK上运行？
在此环境中不提供编译器。也许是在JRE而不是JDK上运行？
Java用相同的方法在一个类中实现两个接口哪种接口方法被覆盖？
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖？
Java 什么是Runtime.getRuntimetotalMemory和freeMemory？
Java 什么是Runtime.getRuntime（）。totalMemory（）和freeMemory（）？
java.library.path中的java.lang.UnsatisfiedLinkError否*****dll
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的” 即使在同一包装中
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类怎么处理？
Java 导入两个具有相同名称的类。怎么处理？
Java 是否应该在HttpServletResponse.getOutputStream/getWriter上调用.close？
Java 是否应该在HttpServletResponse.getOutputStream（）/。getWriter（）上调用.close（）？
Java RegEx元字符和普通点？
Java RegEx元字符（。）和普通点？
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot