备忘录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 */
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！