2017年3月
  • gifgifgif(Gif-gIf-giF)小工具,直接截图/录制屏幕鼠标动态操作、显示并导出为GIF动态图片

    gifgifgif(Gif-gIf-giF)小工具,直接截图/录制屏幕鼠标动态操作、显示并导出为GIF动态图片

    在学习和制作zblog模板的时候,特别是学习CSS各种特效时的效果直接用截屏根本不能很准的表达动态效果,这时候就需要一款软件,一个可以直接把操作导出为gif动态图的工具软件,gifgifgif(Gif-gIf-giF)就是在这种情况下被我发现。一个只有123k的软件,完美的把动态操作录制下来并且直接保存为gif动态图片。使用方法:直接下载解压软件,并且双击打开如上图!然后:1、设置帧数,帧数越高得到的gif图片质量越好,当然图片也就越大...

    工具软件 9个月前 352 0
  • CSS3 2D 转换 - 移动,比例化,反过来,旋转,和拉伸元素。

    CSS3 2D 转换 - 移动,比例化,反过来,旋转,和拉伸元素。

    表格中的数字表示支持该属性的第一个浏览器版本号。紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。属性transform36.04.0 -webkit-10.09.0 -ms-16.03.5 -moz-3.2 -webkit-23.015.0 -webkit-12.110.5 -o-transform-origin(two-va...

    CSS学习 9个月前 368 0
  • CSS3:扔在桌子上的照片(transform 属性)带旋转角度

    CSS3:扔在桌子上的照片(transform 属性)带旋转角度

     随手扔在桌子上的照片,可以使用CSS:transform去实现,以上图片的代码如下:<!DOCTYPE html> <html> <head> <style>  body { margin:30px; background-color:#E9E9E9; } div.polaroid { width:294px; padding:10p...

    CSS学习 9个月前 310 0 transform
  • CSS3 transition过渡效果(变形、变色、旋转、停顿时间)

    CSS3 transition过渡效果(变形、变色、旋转、停顿时间)

    三个案例,分别用transition实现了变色 变形 旋转以及停顿时间。直接分享代码:<!DOCTYPE html> <html> <head> <meta charset="utf-8">  <title>菜鸟教程(runoob.com)</title> <style>&n...

  • CSS3 : last-child 选择器 - 可指定属于其父元素的最后一个子元素,为其单独添加属性

    CSS3 : last-child 选择器 - 可指定属于其父元素的最后一个子元素,为其单独添加属性

    last-child:指定属于其父元素的最后一个子元素的 p 元素的背景色:p:last-child{  background:#ff0000; }所有主流浏览器均支持 :last-child 选择器,除了 IE8 及更早的版本。注::last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。提示:p:last-child 等同于 p:nth-last-child(1)。...

    CSS学习 9个月前 360 0 last-child
  • 《:last-child》有间隙的区块/图片横排,右侧去除间隙最简单方法

    《:last-child》有间隙的区块/图片横排,右侧去除间隙最简单方法

     此类情况下,一般每个区块或者图片的间隔,都会使用margin-right: 20px;类似的方法,但最右侧的一个区块/图片要求与显示区域无间隔,这时候最简单的方法就是使用:last-child,意为最后:指定属于其父元素的最后一个子元素.  也就是指定最后一个区块/图片,针对性的设置margin-right: 0; 即可代表去除了最后一个区块的右侧距。下面看实际案例代码:HTML代码:<d...

    CSS学习 9个月前 324 0 last-child
  • 纯CSS下拉展示(下拉菜单)

    纯CSS下拉展示(下拉菜单)

    相关:《jQuery 鼠标触发下拉菜单》昨天写了一个新的CSS,如图所示,使用纯CSS实现,我个人不是很擅长JS,所以纯CSS也是不得已。HTML代码:<span class="cai">商品互踩群       <div class="qun">    ...

    CSS学习 9个月前 332 0 下拉菜单hover
  • CSS :after选择器

    CSS :after选择器

    本次分享下CSS中很重要的:after选择器,与上一篇《CSS :before 选择器》差不多,before是在之前插入新内容,而after是插入元素之后。在每个 <p> 元素的内容之后插入新内容:p:after{  content:"台词:"; }:after 选择器在被选元素的内容后面插入内容。请使用 content 属性来指定要插入的内容。在每个 <p> 元素后面插入内容,...

    CSS学习 9个月前 308 0 after
  • CSS :before 选择器

    CSS :before 选择器

    在每个 <p> 元素的内容之前插入新内容:p:before{  content:"台词:"; } before意思就插入元素之前,可以是文字可以是背景图片,可以是任何,加入其它属性也可以。:before 选择器在被选元素的内容前面插入内容。请使用 content 属性来指定要插入的内容。在每个 <p> 元素前面插入内容,并设置所插入内容的样式:p:before{  c...

    CSS学习 9个月前 287 0 before
  • background-size背景图片尺寸属性

    background-size背景图片尺寸属性

    background-size语法w3c对background-size的语法规定如下:属性名:background-size属性值:<bg-size>* 其中 bg-size = [ <length> | <percentage> | auto ]{1,2} | cover | contain初始值:auto auto应用于:所有元素继承性:无百分比:见下文注解计算值:根据指定语法解释1、lengt...

    CSS学习 9个月前 256 0 background