30天打造品牌特色电商网站 Day.17 微互动设计按钮实作(3)

今天就来继续做网站元件的介绍，在电商网站中常需要使用到下拉式选单，像是在做商品尺寸的选择、颜色的选择都会用到它，至於下拉式选单怎麽做呢？

常见的写法有两种，之前在做导览列的时候介绍过用<ul><li>标签做的选单，优点是可控性更高，可以更自由的去做样式的调整，搭配jquery也可以实现出<select>的选单效果。今天要介绍的<select>标签，优点是可更快速直觉的建立出选单，但能调整的样式相对就比较少一点。

<select>可以做为选单的容器，里面用 <option> 标签来建立个别选项，name用於说明选单名称，选项内容会放在 <option></option>里面，常见的 <option> 属性有以下几种：

• selected : 设定预先选取此选项
• disabled : 把选项设定为不能选的状态
• value : 设定选了该选项，表单要传送给服务器的值

这里做一个简单的下拉式选单范例，大家可以点击codepen去看一下！

<select name="size" class="size">
    <option value="" selected>商品尺寸</option> /* 设定预先选取*/
    <option value="L">L</option>
    <option value="M">M</option>
    <option value="S">S</option>
    <option value="XS" disabled>XS</option> /* 设定选项不可选*/
</select>

可以做少部分的CSS样式更改，要涵盖的选项的样式就只能透过 JavaScript，这边就暂时不讨论，有兴趣的话可以用之前的<ul><li>标签去尝试会相对简单一些喔！

.size{
  width:200px;
  height:30px;
  background-color:#1e1e1e;
  color:#fff;
}

https://codepen.io/atain9487/pen/gOREGge

在这个主题的最後，跟大家介绍CSS动画，这个语法简单又能在网站中建立出动态效果，在一些样式的设计和使用上是大大加分喔！

要创建CSS动画首先要了解@keyframes 规则，@keyframes可以让动画在特定时间逐渐从当前样式更改为新样式，要在@keyframes 创建动画需要把它绑定一个元素，像是范例中绑定的<div>元素。

div
{   width: 100px;
    height: 100px;
    animation: color 5s; 
}

@keyframes color
{
    from {background: #FF0055;}
    to {background: #00006;}
}

在范例中我们使用了from(0%)、to(100%)，也可以使用其他百分比来控制动画的更改时间，内容可以依照自己的设计去做一些颜色、大小、位置等多种变化。

animation需要了解的几种属性：

animation-name : 定义动画名称。

animation-duration :  指定动画完成所需的时间。（如果忘记写这个属性就不会触发动画喔，因为默认值为 0 秒）

animation-timing-function : 指定动画的速度曲线。

animation-delay : 指定动画开始的延迟时间。

animation-iteration-count : 指定动画运行的次数，infinite可一直重复播放。

范例使用了以上的几个动画属性，大家可以改动属性去看动画产生的变化，想要做动画不是只能用 JavaScript 或 jQuery 才做得到，只要运用好这些属性CSS也可以在网站做出很棒的动画效果喔！

div
{   width: 100px;
    height: 100px;
    animation-name: color;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: infinite;
}

@keyframes color
{
    0% {background: #FF0055;}
    50% {background: #a79de3;}
    100% {background: #00006;;}
}

那这个主题的分享就到第三篇这里结束啦！希望大家可以学会後运用在自己的网页上，让你的电商网站更吸引目光喔！