备忘录html源码,纯CSS3超酷日常工作备忘录列表特效

这是一款使用纯CSS制作的纯CSS3超酷日常工作备忘录列表特效。该特效中没有使用js代码，通过Checkbox技巧来完成交互动作。它可以记录某项日常工作是否完成。整体界面十分时尚大方。

制作方法

HTML结构

该特效使用和元素来制作列表选项，并通过Checkbox技巧来实现用户的交互。

Will's Summer To-Do List

Create a to-do list

Take down Christmas tree

Learn Ember.js

Binge watch every episode of MacGyver

Alphabetize everything in the fridge

Do 10 pull-ups without dropping

Done

Not Done

CSS样式

元素使用一个非常大的负margin值将它隐藏。至于为何不使用display: none来隐藏，是因为考虑到屏幕阅读器和键盘Tab键的需要，display: none会使这些功能都失效。

input {

display: block;

height: 53px;

margin: 0 0 -53px -9999px;

-webkit-box-ordinal-group: 5;

-webkit-order: 4;

-ms-flex-order: 4;

order: 4;

outline: none;

counter-increment: undone-items;

}

在checkbox元素的选取中，使用了checkbox hack技巧：通过:checked伪元素和一个相邻兄弟选择器+来实现选取功能。它的意思是：当checkbox被checked的时候，找到它后面紧邻的元素，然后为它添加一些样式。在例子中是为它设置了一个帧动画效果。你也可以使用元素的:before和:after伪元素来创建更多的效果。

label {

display: block;

position: relative;

padding: 15px 0 15px 45px;

border-top: 1px dashed #fff;

-webkit-box-ordinal-group: 5;

-webkit-order: 4;

-ms-flex-order: 4;

order: 4;

cursor: pointer;

-webkit-animation: undone .5s;

animation: undone .5s;

}

label::before {

content: '\f10c'; /* circle outline */

display: block;

position: absolute;

top: 11px;

left: 10px;

font: 1.5em 'FontAwesome';

}

label:hover, input:focus + label {

background-color: rgba(255, 255, 255, .2);

}

input:checked + label {

-webkit-box-ordinal-group: 3;

-webkit-order: 2;

-ms-flex-order: 2;

order: 2;

-webkit-animation: done .5s;

animation: done .5s;

}

input:checked + label::before {

content: '\f058'; /* circle checkmark */

}