Y(^o^)Y css动画大乱弹之animation。 概述 什么是animation呢？在回答这个问题之前，先要说明什么叫做@keyframe（关键帧）。@keyframe算是一个动画模板。在其中，
O(∩_∩)O~ 这两天在看看CSS的相关内容，关于transition动画感觉很有意思，分享一下。 CSS负责给html加效果，自然少不了各种动画，今天介绍一下transition。 概述 看一段比
我们都知道，撸页面的时候当我们的内容超出了我们的div，往往会出现滚动条，影响美观。 尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条，也不希望超出去的内容被放
说到Tab切换，你可能首先想到的就是使用jQuery，短短几行代码就可以轻松搞定一个Tab切换。 而今天所要分享的，是使用 0 行JS代码来实现Tab切换！ 具体效果如下： Tab切换 方法一：模拟单
开发场景中用到display:inline-block;然后呢，div间就有间隙，但是ajax加载出来的数据没有间隙，解决办法如下 display:inline-block表示行内块元素，后面自带空格
弹窗是一种常见的交互方式，而蒙层则是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是，我们会发现，当弹出遮罩层后，底层body的内容也是可以滚动，显然这不是我们想要的效果，而这个问
html代码是这样的 <div class="arrow-up"> <!--向上的三角--> </div> <div class=&quo
前言 还在用图片制作箭头，三角形，那就太lou了。css可以轻松搞定这一切，而且颜色大小想怎么变就怎么变，还不用担心失真等问题。 先来看看这段代码: CSS绘制三角形和箭头，不用再用图片了 CSS绘制
最近在使用MarkDown写公众号文章，并使用MarkDown Here进行排版。发现效果还不错，这边分享一个 MarkDown Here的CSS样式。 /*markdown here 的全局配置*/
box-shadow在ios下没有显示，但是在android机下显示正常。1、html如下 2、css如下.paScreenTxt{ width:98%; height:200px; display: block; margin: 12px auto; box-shadow: 0px 0px 2px 2px #CCC;}3、在and
CSS3 引入了新单位：vw、vh、vmin、vmax。（1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点，而是由视窗（Viewport）大小来决定的， 1代表 1%，视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。vw：视窗宽度的百分比（1vw 代表视窗的宽
我们知道要想让一个组件水平居中，只要设置下面两行代码就可以了：display：block;margin:0px auto;但是给form这样设置，却达不到水平居中的效果。解决方法：给form设置属性width，即给form设置一个宽度。如下面的写法就可以让form水平居中了：width:200px;display：block;margin:0px auto;
给li标签中的span设置属性margin-bottom不生效html如下： &lt;ul class="lottery_main""&gt; &lt;!-- 每个中间人的头像和名字 --&gt; &lt;li class='li25'&gt; &lt;span class="lottery_name25"&gt;飘
有一张png格式的图片，用css3的animation()配合@keyframes特性，实现图片的上下摇动原图如下：html代码如下：css代码如下：#shake_icon{ width:100px; height:100px; animation: shaking 0.25s linear infinite; -webkit-animation: shak
css3设置box-shadow对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}阴影类型：此参数可选。如不设值，默认投影方式是外阴影outse
在页面中，有时候我们想自己写个遮罩层，让它的宽度和高度都占满整个可见页面区域，css设置好了，但是还是没有得到想要的效果。遮罩层用表示，是body的直接子元素。部分.html代码如下：.css代码如下：#bg{ position:fixed; top:0px; left:0px; right:0px; bottom:0p
问题：在表单的输入框中，有时候我们并不希望点击输入框时，会出现提示信息。这时，在<input>中添加属性，一般能达到目的。而在chrom里面就失效。解决方法：浏览器根据t输入框的时，会自动填充账号和密码的输入框。先将作为密码的输入框的type设成：,当点击密码输入框的时候，将其type属性设为：这样问题就解决了。HTML页面代码如下： type="te
最近在用css布局设置一个页面，现在分享在设计过程中遇到一些问题的解决方法：1、有的时候，只要外层的元素设为display:block，里面嵌套的inline元素可以不用设置display:block，就可以设置高度和宽度例如: "display:block"> 这样就可以了，要是input在设置一个display:block反而达不到设置宽度的目的。
在设置遮罩层的时候，发现遮罩层不能覆盖导航条。原因：可能是z-index的值设的太小了。如下面所示：#bg_background{ position: absolute; z-index: 8; top:0px; left: 0px; right: 0px; bottom: 0px; background-col
css让图片居中，不管图片是方图、竖图、横图，都可以让图片在父框架下居中，即方图则占满整个父框架；横图则左右填充上下居中；竖图则左右居中上下填充1、html如下： /*这里的图片路径自己设置*/ 2、css如下 body{ background-color: gray; } #red
父级div使用display:table-cell；vertical-align:middle会出现空隙。1、html如下 2、css.divCon{ width:200px; height:200px; background:black; display: table-cell; vertical-align: middle; text-al
