html5模板 顶部菜单栏自动隐藏,很棒的一个HTML5任务列表页面模板_温融冰的博客-程序员秘密

技术标签: html5模板 顶部菜单栏自动隐藏  

CSS

语言:

CSSSCSS

确定

@import url(https://fonts.googleapis.com/css?family=Space+Mono:400,700);

body {

background: #FFBE0B;

font-family: "Space Mono";

font-weight: 400;

font-size: 0.8em;

color: #aaa;

}

input {

font-family: "Space Mono";

font-size: 1em;

outline: none;

}

* {

margin: 0;

padding: 0;

}

.container {

width: 600px;

margin: 100px auto;

box-shadow: 0 0 2px hsla(0, 0%, 0%, 0.2);

border-radius: 6px;

}

@keyframes shake {

from {

left: -2px;

}

to {

left: 2px;

}

}

.task--row {

height: 50px;

padding: 0 20px;

line-height: 50px;

}

.task__head {

background: #FE5F55;

color: white;

font-weight: bold;

border-top-left-radius: 6px;

border-top-right-radius: 6px;

}

.task__footer {

transition: all 0.2s cubic-bezier(.7, .2, .17, 1);

background: #1CCAD8;

border-bottom-left-radius: 6px;

border-bottom-right-radius: 6px;

}

.task__footer:hover {

background-color: #54E0EA

}

.task {

overflow: hidden;

transition: all 0.2s 0.2s cubic-bezier(.7, .2, .17, 1);

position: relative;

display: block;

}

.task__check {

position: absolute;

left: -9999px;

z-index: -1;

}

.task__field {

transition: background-size 0.8s 0.2s cubic-bezier(.7, .2, .17, 1), background-color 0.2s cubic-bezier(.7, .2, .17, 1), height 0.2s 1s cubic-bezier(.7, .2, .17, 1);

position: relative;

background-color: #f8f8f8;

border-top: 1px solid #eee;

background-image: linear-gradient(to right, #FE5F55, red);

background-size: 0 2px;

background-repeat: no-repeat;

background-position: left bottom;

}

.task__field:hover {

background-color: white;

}

.task:first-child .task__field {

border-top: none;

}

.task__field.shaking {

animation: shake 0.1s 0.1s infinite ease-in-out;

background-size: 100% 2px;

}

.task__check:checked + .task__field {

color: #47D185;

}

.task__important {

transition: all 0.3s cubic-bezier(.09, .66, .36, 1.8);

opacity: 0;

position: absolute;

right: 0;

top: 0;

transform: scale(0);

color: #47D185;

font-size: 1.4em;

height: 50px;

width: 50px;

border: 0;

background: none;

}

.task__check:checked + .task__field > .task__important {

opacity: 0.5;

transform: scale(1);

}

.task__field.delete {

transition: all 0.2s cubic-bezier(.7, .2, .17, 1);

transform: scale(1.5, 2);

height: 0;

opacity: 0;

}

.task__add {

height: 50px;

border: 0;

background: none;

width: 100%;

color: white;

}

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_36483050/article/details/117727343

智能推荐

前端人的全栈实践-设计开发自己的博客-基于nodejs+mongodb_前端基于nodejs开发全栈博客_weixin_39350487的博客-程序员秘密

我本是一名文科专业半路出家的前端开发人员,从最初只会切图和写CSS、Html到现在会写点JS,一路坑坑洼洼,也是经历了很多,从2010年开始就用WordPress开设了自己的博客,虽然内容零零散散的并不多,但是多多少少也留下了时光的缩影,一直希望自己有一个自留地。用Node.js做服务端替换WordPress是去年的一个想法,由于一直腾不出时间,所以拖到了现在。当然了WordPress作为全球用户...

MATLAB矩阵的行列式、MATLAB逆矩阵_matlab行列式的逆矩阵_std86021的博客-程序员秘密

MATLAB要计算对应矩阵行列式的值的指令为:d=det(A),该指令返回矩阵 A 的行列式,并把所得值赋给 d。若 A 仅包含整数项,则该结果 d 也是一个整数。

【算法学习】马尔可夫过程及经典例题讲解(含代码实现)_马尔可夫链计算例题_卡姆皮欧特h的博客-程序员秘密

马尔可夫过程及经典例题讲解(含代码实现),明白状态转移概率,和平衡状态概率......

tcl/tk参考——控制结构vwait_dulixin的博客-程序员秘密

.. 名称vwait - 一直等待直到一个变量被修改为止 语法vwait varName描述这个命令进入Tcl事件循环,Tcl将会一直处理事件直到变量varName被修改为止,一旦varName被修改了,vwait命令将会立刻返回,varName必须是一个全局范围变量。(要么是一个全局变量,要么带有完全的名字空间路径)。 在一些情况下在varName被修改后vw

力扣算法题-41.缺失的第一个正数 C语言实现_抓住小白白的博客-程序员秘密

题目给你一个未排序的整数数组,请你找出其中没有出现的最小的正整数。示例 1:输入: [1,2,0]输出: 3示例 2:输入: [3,4,-1,1]输出: 2示例 3:输入: [7,8,9,11,12]输出: 1提示:你的算法的时间复杂度应为O(n),并且只能使用常数级别的额外空间。来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/first-missing-positive思路1、先进行数组的排序;排序函数qsort,要避免

随便推点

再谈javascriptjs原型与原型链及继承相关问题_weixin_33738578的博客-程序员秘密

什么是原型语言只有对象,没有类;对象继承对象,而不是类继承类。“原型对象”是核心概念。原型对象是新对象的模板,它将自身的属性共享给新对象。一个对象不但可以享有自己创建时和运行时定义的属性,而且可以享有原型对象的属性。每一个对象都有自己的原型对象,所有对象构成一个树状的层级系统。root节点的顶层对象是一个语言原生的对象,只有它没有原型对象,其他所有对象都直接或间接继承它...

C语言在一个.h文件中定义全局变量在多个.cpp文件使用_Olivia_2的博客-程序员秘密

总体思路首先使用extern关键字在.h文件中申明全局变量;然后在其中一个.cpp文件中定义全局变量;最后就可以在其它.cpp文件中使用全局变量。验证步骤1.新建global.h文件#include <cstring>#include <iostream>using namespace std;extern string tmp1;//声明全局变量tmp1 extern string tmp2;2.新建1.cpp文件#include "global

React-Native 如何将图片作为页面的背景以及控件的嵌套实现启动应用_请叫我东子的博客-程序员秘密

转载请标明出处:http://blog.csdn.net/u010046908/article/details/50781360 本文出自:【李东的博客】最近一直非常的关注react-native的开发,每天都会看到江清清技术专栏中关于react-native的 使用,基本上从搭建开发环境到版本的升级与降级等技术有了一定的了解,也学习一些简单控件的使用,如Image,Text,View,Androi

区块链与商业银行中的区块链运用_银行区块链交易是增加区块吗_金融科技自习生的博客-程序员秘密

区块链与商业银行中的区块链运用区块链与商业银行中的区块链运用1. 区块链的本质是链表,以去中心化加密机制为信任机制传统的数据库管理系统基本上都是由单一的机构与进行维护与管理,单一机构对数据库的控制权具有绝对的地位,其他机构对数据的来源、更新等都没有足够的了解渠道。所以,在多个机构进行协作时,中心数据库管理系统就会存在数据互信的问题。以金融行业的清算与结算业务为例,由于中心数据库的信任难题无法解决,每个参与方都需要自行建设维护一套自己的数据库。这些数据库就像一座座信息孤岛,彼此信息不联通.

如何在Android用FFmpeg+SDL2.0之同步音频_android sdl 声音_tanlon_0308的博客-程序员秘密

同步音频的原理可以参考:http://dranger.com/ffmpeg/tutorial05.html  本文是在 如何在Android用FFmpeg+SDL2.0之同步视频 的基础上面继续进行将视频和音频同步到外部时钟的工作,同时也包含了修正音频解码的问题。

【IIS配置】网页首次加载慢和定时任务不执行的问题_Zdelta的博客-程序员秘密

asp.net网站里加了一个timer定时任务,部署到站点上设置每天执行一次。结果第二天发现并没有执行成功。原来IIS中的站点启动后大概十几分钟,没有操作程序池就会被回收。解决方案是第一步、安装IIS应用程序初始化功能第二步、编辑网站对应应用程序池启动模式第三步、开启对应网站预加载第四步、设置配置编辑器,编写默认预加载请求第一步:详细过程略第二步:网站 -> 管理网站-> 高级设置-> 预加载已启动设置为True第三步:应用程序池-> ...

推荐文章

热门文章

相关标签