html日期备忘录插件,优雅特效的备忘录与日历_html/css_WEB-ITnose

我知道,没有图片你们是不会来的

date2.png

声明

这个效果是从 这里.看见的,原文使用的angularJs实现的。html代码使用了 haml,css 使用了scss。如果你喜欢,你也可以用 jade,less 来重写。我重新使用 js 实现了一遍。包括css,html代码均为重新写的。目前只在chrome下面跑~

示例

这里是一个Demo.

准备材料 sublime text3 编辑器

google浏览器 chrome 或者其他对css3兼容性比较好的浏览器。不要万恶的IE...

整体思想 1. 布局

很明显的看的出来这是一个左右布局,(既然是一个整体,那我们就把它装到一个盒子里面。就是body下面最外层的div呐)。左右布局,我们再来左边来一个div,右边来一个div。分别为 div.left(emmet的快捷方式写法),div.right 。剩下的内部的就看个人的喜欢了。可以是 上下,也可以是上中下。 2. 动画效果

每一单个日期的我点击事件是使用了一个弹动效果,原理就是一开始很小,然后变大,最后再缩小到一定程度停止。使用css3的 animation 的100%很容易就能做到的。动画的过程,就是速度使用贝塞尔曲线自定义就好了,怎么好看怎么来。右侧的动画效果同理。不过是使用了 2d 转换。 3. 默认样式的更改以及需要注意的地方。

I: 首先是盒子模型,其中有一段css的代码是这样的... .left .week-title{ margin-top: 15px; width: 100%; display: -webkit-box; display: -webkit-flex; display: flex; height: 34px; font-family: 'Open Sans'; } .left .week-title li{ float: left; list-style: none; display: block; text-align: center; line-height: 34px; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; }

这里的三个display是一个兼容性写法,貌似还有另外一种兼容写法,百度一下,你就知道。我就不贴出来了。盒子模型的好处是横向布局的容器,内部的标签的占用宽度是计算机自动计算的结果,肯定精确。 例如:我有一个div 用了一个盒子模型,他的宽度固定是500px;里面如果有5个标签并排,我已知其中一个为130px; 剩下4个的宽度一样,那么我剩下的四个只需要设置 flex: 1; 即可。如果有一天父级的宽度发生了改变,我这四个div的宽度也会自动重新计算,不怕装不满整个盒子了。

II : placeholder与滚动条的样式自定义。 / placeholder 颜色自定义 / input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #ddd; } input:-moz-placeholder, textarea:-moz-placeholder { color: #ddd; } input::-moz-placeholder, textarea::-moz-placeholder { color: #ddd; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #ddd; } / 浏览器滚动条,前景色,背景色,滚动条颜色 ... / .right .list::-webkit-scrollbar { width: 10px; } .right .list::-webkit-scrollbar-track { background-color: #007fb0; } .right .list::-webkit-scrollbar-thumb { background-color: #00A8E8; } .right .list::-webkit-scrollbar-button { background-color: #007fb0; } .right .list::-webkit-scrollbar-corner { background-color: black; }

III: css3动画的触发机制

其实html中有动画会产生的根本原因是标签的某一个属性发生了改变,例如:背景颜色,长度,宽度,透明度等等...。那么,为什么他的属性会发生改变呢?只有一个原因,添加或者移除了 class,或者id 或者...。。那么我们要实现一个动画,只需要更改它不同class下面的状态不就好了么? 至于过程,那就是你自己定义的了,动画从开始到结束需要多久,匀速,减速,加速?等等.....

html代码 March Sun

Mon

Tue

Wed

Thu

Fri

Sat

Social Work

css代码 代码就在这里 Css代码.

JS代码 代码就在这里 Js代码.

额,如果发现有错误,欢迎指正,喜欢的小伙伴们点个赞呗,有疑问的小伙伴欢迎私信~

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值