javascript – 动画按钮单击和颜色

2019-07-14 08:35:24 阅读：224 来源： 互联网

标签：javascript css jquery-animate photoshop html

我在Photoshop中制作了这个按钮.我有很多图形用户界面体验,但除了python和html / css之外没有太多编码.

我想我会用javascript动画点击的按钮并改变颜色.我是一个初学者,不知道我的下一步.如果我不应该在photoshop中创建按钮但是从头开始用代码创建它？

或者,如果我制作一个红色的单独图像,它会在图像之间来回变换？但我不确定这个过程在点击时是否会显得平滑.这是仪表板gui web应用程序的全部内容.我只是试着用一个简单的按钮来改变颜色只使用代码,但我迷失了.我无法找到任何与我正在做的事情相关的事情,我觉得这很疯狂,因为在Photoshop中创建了常见的UI并使用代码动画.

使用Javascript

    var button = document.querySelector('.button');

    button.onclick = function () {
      if (backgroundColor == green) {
        document.getElementById(id).style.backgroundColor = red";
}

CSS

.button {
  &:hover {
    background-color: green;
    cursor: pointer;
    cursor: hand;
  }
  width: 100px;
  height: 50px;
  background-color: green;
  color: white;
  text-align:center;
  line-height:50px;
  border-radius: 30px;
}

解决方法:

我首先尝试用HTML& CSS因为它最容易维持下线(即需要不同大小的颜色？只需在CSS中调整一个值).

根据您的描述,听起来您正在有效地制作样式复选框.您希望尽可能使用语义元素(即不是< div>和< span>)来改善屏幕阅读器和仅键盘用户的体验.因此,在HTML中创建一个复选框,隐藏它,然后根据隐藏复选框的值设置后面的元素样式.

/* hide the native element */
.your-button input {
  opacity: 0;
}

/* disable user selection */
.your-button,
.your-button * {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

/* The grey button */
your-button-elem {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: linear-gradient(hsl(0, 0%, 100%), hsl(0, 0%, 80%));
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  box-shadow: 0 6px 6px hsla(0, 0%, 0%, 0.3);
  transition: 60ms;
}

/* The colored status ring */
your-button-elem::before {
  content: '';
  position: absolute;
  top: -16px;
  right: -16px;
  bottom: -16px;
  left: -16px;
  background: hsl(162, 0%, 69%);
  border-radius: 50%;
  box-shadow: inset 0 0 4px hsla(0, 0%, 0%, 0.3);
  z-index: -1;
}

/* The dimple ontop of the button */
your-button-elem::after {
  content: '';
  position: absolute;
  top: 26px;
  right: 26px;
  bottom: 26px;
  left: 26px;
  background: linear-gradient(hsl(0, 0%, 80%), hsl(0, 0%, 98%));
  border-radius: 50%;
  box-shadow: inset 0 1px 6px hsla(0, 0%, 0%, 0.3);
}

/* The checked state */
input:checked ~ your-button-elem::before {
  background: hsl(162, 52%, 69%);
}

/* The pressed state */
input:active ~ your-button-elem,
your-button-elem:active {
  box-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.3);
}

/* The focused state */
.your-button input:focus {
  outline: none;
}
input:focus ~ your-button-elem::before {
  box-shadow: inset 0 0 4px hsla(0, 0%, 0%, 0.3),
                    0 0 0 4px hsla(200, 100%, 50%, 0.3);
}
input:focus ~ your-button-elem:hover::before {
  box-shadow: inset 0 0 4px hsla(0, 0%, 0%, 0.3);
}


/***** Setup *******************/
* { margin:0; padding:0 }
html, body { height:100% }
body {
  display: flex;
  justify-content: center;
  align-items: center;
}

<label class="your-button">
    <input type="checkbox">
    <your-button-elem></your-button-elem>
</label>

标签：javascript,css,jquery-animate,photoshop,html
来源： https://codeday.me/bug/20190714/1457936.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 动画按钮单击和颜色