html - 如何使用js在css中添加css
问题描述
我正在一个网站上工作,其中有一堆 html 和 css 代码;现在在 css 中,我为空闲加载编写了一些 css 代码,它们在过渡的帮助下执行动画或新的 css 属性!
但问题是我想在按下按钮时添加新的 css 动画代码(使用 js)。
例如
<div class="cover-details-signin cover-d" id="cover-signin">
<h1 class="cover-heading">Welcome Back!</h1>
<p class="cover-description">
To keep connected with us please login with your personal info
</p>
<a href="#" id="cover-signin-btn auth-btn" class="cover-button"
>SIGN IN</a
>
</div>
<!-- cover -->
<!-- cover -->
<div class="cover"></div>
css
.cover {
width: 26.2%;
height: 80%;
position: absolute;
/*background-color: rgba(0, 0, 255, 0.281);
*/
background: rgb(3, 185, 104);
background: linear-gradient(
47deg,
rgba(3, 185, 104, 1) 0%,
rgba(2, 163, 195, 1) 100%
);
transition: 1.5s ease-in-out;
border-radius: 0.8em 0em 0em 0.8em;
-webkit-border-radius: 0.8em 0em 0em 0.8em;
-moz-border-radius: 0.8em 0em 0em 0.8em;
-ms-border-radius: 0.8em 0em 0em 0.8em;
-o-border-radius: 0.8em 0em 0em 0.8em;
-webkit-transition: 1.5s ease-in-out;
-moz-transition: 1.5s ease-in-out;
-ms-transition: 1.5s ease-in-out;
-o-transition: 1.5s ease-in-out;
}
.cover-details-signin {
z-index: 5;
min-width: 35% !important;
height: 100%;
display: flex;
color: #ffffff;
flex-direction: column;
align-items: center;
transform: translateX(0%);
transform-origin: center;
background-color: transparent;
transition: 1.5s ease-in-out;
font-family: "Montserrat", sans-serif;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
border-radius: 0.8em 0em 0em 0.8em;
-webkit-border-radius: 0.8em 0em 0em 0.8em;
-moz-border-radius: 0.8em 0em 0em 0.8em;
-ms-border-radius: 0.8em 0em 0em 0.8em;
-o-border-radius: 0.8em 0em 0em 0.8em;
-webkit-transition: 1.5s ease-in-out;
-moz-transition: 1.5s ease-in-out;
-ms-transition: 1.5s ease-in-out;
-o-transition: 1.5s ease-in-out;
}
.cover-details-signin .cover-heading {
margin-top: 50%;
font-size: 2.8em;
font-weight: 700;
font-family: "Montserrat", sans-serif !important;
}
.cover-details-signin .cover-description {
width: 45%;
margin-top: 1.84812535698526854688856em;
text-align: center;
font-size: 0.9em;
line-height: 1.8em;
}
.cover-details-signin .cover-button {
width: 30%;
text-decoration: none;
color: #ffffff;
font-weight: 700;
text-align: center;
border: 1px solid #ffffff;
background-color: transparent;
font-size: 0.8em;
border-radius: 3em;
margin-top: 3em;
padding: 1.1em 0.5em 1.1em 0.5em;
/* height: 3em; */
-webkit-border-radius: 3em;
-moz-border-radius: 3em;
-ms-border-radius: 3em;
-o-border-radius: 3em;
}
我想在按钮单击按钮上启动/切换的同一个文件中的 CSS 代码类 .cover-signin-btn
.cover {
border-radius: 0em 0.8em 0.8em 0em;
transform: translateX(186.3%);
-webkit-transform: translateX(186.3%);
-moz-transform: translateX(186.3%);
-ms-transform: translateX(186.3%);
-o-transform: translateX(186.3%);
-webkit-border-radius: 0em 0.8em 0.8em 0em;
-moz-border-radius: 0em 0.8em 0.8em 0em;
-ms-border-radius: 0em 0.8em 0.8em 0em;
-o-border-radius: 0em 0.8em 0.8em 0em;
}
.cover-details-signin{
/* invisible color */
color: #e9e9e9 !important;
/* value for invisible */
transform: translateX(-200%);
-webkit-transform: translateX(-200%);
-moz-transform: translateX(-200%);
-ms-transform: translateX(-200%);
-o-transform: translateX(-200%);
}
.cover-details-signin .cover-button {
/* invisible border */
border: 1px solid #e9e9e9;
}
请帮帮我,怎么办!!!
解决方案
如果你想动画类的点击,cover-button
你必须这样做
$('.cover-button').onclick(function(){
$(....).animate({height : "100px"})
})
推荐阅读
- javascript - 根据 Javascript 中的两个选项条件显示/隐藏 div
- mysql - mongoDB Date 对象的 SQL 等价物
- c# - New DbContext 将旧数据放入数据库
- excel - 如果两个月之间的公式如何写平均值,但是月份应该是通用名称格式而不是日期?
- javascript - 比较特定时区的服务器日期
- python - 在 Raspberry Pi 上持续运行 Pimoroni buttonhim 的 Python 代码导致冻结
- javascript - 浏览器缓存 API 不适用于 cookie 身份验证服务
- r - 我们如何构建一个同时满足多个条件的循环/ if 语句?
- php - 如何将较低的 PHP 版本代码(codeigniter)运行到较高的 php 版本
- c# - 我将如何设置一个 StatusStrip,其中有 2 个 StatusLabels 在彼此下方