css制作-点击按钮内容划入划出效果

在html文件中需要一个作为菜单按钮的label标签，一个主内容块aside，一个通过checked属性来对内容块实现控制的,属性type的值为checkbox的input元素。label元素的for属性设置为input元素的id，这样，当点击label是就会出发input的点击事件，相当于点击了input元素，所以在这里，每次点击label元素都会改变input元素的checked状态。接下来在css中：

label[for="toggle"] {
      font-size: 3rem;
      position: absolute;
      top: 4px;
      right: 5px;
      z-index: 1;
      cursor: pointer;
    }

先设置label元素的样式，在选择器上加上属性for="toggle"可以提高代码的拓展性，不会在加入其他label后产生混乱。样式中重要的几个设置，一个是将此处的label设置为绝对定位，让他固定在视口，另一个是z-index属性设置为1，可以保证内容块滑出时不会将这个label元素挡住，最后，cursor属性设置为pointer提示用户这是一个可点击的交互按钮。然后是input元素的css：

input[type="checkbox"] {
       position: absolute;
       top: -100px;
    }

定位设置为absolute，top属性设置为-100px，将input元素显示在视口之外，让界面看起来更优雅美观。接下来是aside的样式：

 aside {
      background-color: #a60000;
      color: white;
      width: 340px;
      height: 100%;
      padding: 0 20px;
      position: fixed;
      top: 0;
      right: -375px;
      transition: 0.6s all;
    }

aside内容块的宽度为340px，左右内边距各为20px，然后使用fixed定位，并将right设置为-375px，这样在默认状态下aside块在水平方向上只会露出5px的内容，而且因为设置的是内边距，所以我们能看到的都是背景色。最后一个属性使aside的位置产生变化时，使用动画进行过渡。下面是这个布局最重要的内容：

input[type=checkbox]:checked + aside {
      right: 0px;
    }

这段css代码的选择器选中了属性type的值为checkbox的input元素checked状态下的紧接着的下一个aside元素。然后样式块的内容是right：0px；因此当这个input元素被选中时(此处的选中只checked属性为true，而不是使用table键的选中)，aside元素的right属性就会被设置为0(因为这个选择器的权值远远大于上面的aside这个类型选择器)，再次点击label元素input元素切换为未被选中，aside元素就会重新缩回去，如此往复，以上就实现了点击按钮划入画出的效果

这种实现方案的缺点：

这是一个相当巧妙的避免使用JavaScript来创建一个切换按钮效果方式。这将在IE9及以上版本中起作用（平滑过渡将在IE10及更高版本中起作用）。这种效果确实有一些问题 ——这是有点滥用表单元素（它们不是为了这个目的），并且在可访问性方面效果不是很好——标签在默认情况下不可聚焦，并且表单元素的非语义使用可能会导致屏幕朗读器出现问题。 JavaScript和链接或按钮可能更合适，但这样的实验仍然很有趣。

知识点总结：
1.利用z-index属性将交互按钮浮于上方
2.利用绝对定位加上负的定位值，将一个元素从界面上隐藏
3.利用label标签的for属性实现它和特定表单元素的关联
4.利用transition属性和伪类选择器实现动画交互效果
5.利用对position属性的负值正值的切换实现元素的隐藏和显示

css制作-点击按钮内容划入划出效果

猜你喜欢