diff --git a/source/_posts/MongoDB/3.1、全文索引.md b/source/_posts/MongoDB/3.1、全文索引.md index dee757e..e27edc7 100644 --- a/source/_posts/MongoDB/3.1、全文索引.md +++ b/source/_posts/MongoDB/3.1、全文索引.md @@ -3,8 +3,8 @@ title: 3.1、全文索引 date: 2018-5-12 18:53:10 tags: - 数据库 - - MongoDB - - 索引 + - MongoDB + - 索引 categories: - MongoDB --- diff --git a/source/_posts/MongoDB/6.0、复制集.md b/source/_posts/MongoDB/6.0、复制集.md index 7a6dc2e..56171bd 100644 --- a/source/_posts/MongoDB/6.0、复制集.md +++ b/source/_posts/MongoDB/6.0、复制集.md @@ -3,8 +3,8 @@ title: 6.0、复制集 date: 2018-5-12 19:45:02 tags: - 数据库 - - MongoDB - - 集群 + - MongoDB + - 集群 categories: - MongoDB --- diff --git a/source/_posts/前端杂烩/CSS动画(1)-transform.md b/source/_posts/前端杂烩/CSS动画(1)-transform.md index 8a08e9c..a334c49 100644 --- a/source/_posts/前端杂烩/CSS动画(1)-transform.md +++ b/source/_posts/前端杂烩/CSS动画(1)-transform.md @@ -47,7 +47,7 @@ transform: <transform-function> [<transform-function>]* | none 参数是旋转的角度 ```css .rotate_div { - transform : rotate(30deg); + transform : rotate(30deg); } ``` ![rotate](/images/前端杂烩/animation/rotate.png) @@ -63,7 +63,7 @@ deg是旋转的角度 , 正数表示顺时针旋转 , 负数表示逆时针旋 同名函数接受2个参数 , 分别表示在X轴和Y轴上的移动距离 , 正数代表向该轴的正方向移动 , 负数代表向负方向移动 ```css .translate_div { - tranform : translate(100px, 20px); + tranform : translate(100px, 20px); } ``` ![translate-x-y](/images/前端杂烩/animation/translate-x-y.png) @@ -76,7 +76,7 @@ deg是旋转的角度 , 正数表示顺时针旋转 , 负数表示逆时针旋 同名函数接受两个参数 , 分别表示在X轴和Y轴上的缩放比例 , 大于1是放大 , 小于1是缩小 ```css .scale_div { - transform : scale(2, 1.5); + transform : scale(2, 1.5); } ``` ![scale-x-y](/images/前端杂烩/animation/scale-x-y.png) @@ -91,7 +91,7 @@ deg是旋转的角度 , 正数表示顺时针旋转 , 负数表示逆时针旋 如果提供两个参数 , 分别代表在X轴和Y轴方向的倾斜角度 ```css .skew_div { - transform : skew(30deg, 10deg); + transform : skew(30deg, 10deg); } ``` ![skew-x-y](/images/前端杂烩/animation/skew-x-y.png) diff --git a/source/_posts/前端杂烩/CSS动画(2)-transition.md b/source/_posts/前端杂烩/CSS动画(2)-transition.md index a246ef1..7eb23eb 100644 --- a/source/_posts/前端杂烩/CSS动画(2)-transition.md +++ b/source/_posts/前端杂烩/CSS动画(2)-transition.md @@ -67,10 +67,10 @@ y的值可以超过1或者小于0 , 比如构造一个来回的缓冲效果 为了兼容旧版本的浏览器 , 我们通常需要给transition属性加上前缀 ```css box { - -moz-transition:color 0.5s ease-in; - -webkit-transition:color 0.5s ease-in; - -o-transition:color 0.5s ease-in; - transition : color 0.5s ease-in; + -moz-transition:color 0.5s ease-in; + -webkit-transition:color 0.5s ease-in; + -o-transition:color 0.5s ease-in; + transition : color 0.5s ease-in; } ``` 或者也可以使用**postcss**这种预处理工具 , 来自动添加属性的前缀 diff --git a/source/_posts/前端杂烩/CSS动画(3)-animation.md b/source/_posts/前端杂烩/CSS动画(3)-animation.md index 341c884..387e2cf 100644 --- a/source/_posts/前端杂烩/CSS动画(3)-animation.md +++ b/source/_posts/前端杂烩/CSS动画(3)-animation.md @@ -22,18 +22,18 @@ CSS当中以动画开始的点为`0%` , 以动画结束的点为`100%` 我们可以尝试去定义一组关键帧 ```css @keyframes ANI { /*指定该组关键帧的名称*/ - 0% { - width : 100px; - background-color:#629411; - } - 50% { - width : 150px; - background-color: darkgoldenrod; - } - 100% { - width : 250px; - background-color: lightgreen; - } + 0% { + width : 100px; + background-color:#629411; + } + 50% { + width : 150px; + background-color: darkgoldenrod; + } + 100% { + width : 250px; + background-color: lightgreen; + } } ``` 0% 也可以写作 `from` @@ -41,20 +41,20 @@ CSS当中以动画开始的点为`0%` , 以动画结束的点为`100%` 定义之后我们就可以在DOM元素上调用这组关键帧 , 用来创建动画了 ```css .animation_div { - /* 就是之前定义的关键帧名称 */ - animation-name : ANI; - /* 动画持续的时间 */ - animation-duration : 5s; - /* 和transition-timing-function一样 */ - animation-timing-function : ease-in-out; - /* 动画延迟时间 */ - animation-delay: 0.5s; - /* 定义循环次数,infinite为无限次 */ - animation-iteration-count: 3; - /* 动画执行的方向 */ - animation-direction: alternate; - /* 当前动画正在播放(running)或者暂停(paused) */ - animation-play-state : running; + /* 就是之前定义的关键帧名称 */ + animation-name : ANI; + /* 动画持续的时间 */ + animation-duration : 5s; + /* 和transition-timing-function一样 */ + animation-timing-function : ease-in-out; + /* 动画延迟时间 */ + animation-delay: 0.5s; + /* 定义循环次数,infinite为无限次 */ + animation-iteration-count: 3; + /* 动画执行的方向 */ + animation-direction: alternate; + /* 当前动画正在播放(running)或者暂停(paused) */ + animation-play-state : running; } ``` 当然动画效果也可以放在`:hover`等伪类当中 , 以创建响应式的效果 @@ -80,7 +80,7 @@ CSS当中以动画开始的点为`0%` , 以动画结束的点为`100%` 比如 ```css .animation_div:hover { - animation-play-state : paused; + animation-play-state : paused; } ``` 这样可以实现指向该元素的时候暂停动画的播放 diff --git a/themes/hexo-theme-xups/_config.yml b/themes/hexo-theme-xups/_config.yml index dd4a05f..41d13ab 100644 --- a/themes/hexo-theme-xups/_config.yml +++ b/themes/hexo-theme-xups/_config.yml @@ -138,7 +138,7 @@ baidu_analytics: false #---------------------------- # 高亮样式 #---------------------------- -highlight_theme: normal +highlight_theme: night #---------------------------- # CDN # 如: //7xs305.com1.z0.glb.clouddn.com/