css3
-
使用CSS3媒体查询方法总结
首先我们在使用media的时候需要先设置下面这段代码，来兼容移动设备的展示效果： 准备工作1：设置Meta标签 这段代码的几个参数解释： width = device-width：宽度等于当前设备的宽度 initial-scale：初始的缩放比例（默认设置为1.0） minimum-scale：…
-
纯CSS3写的10个不同的酷炫图片遮罩层效果
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果，可以欣赏一下 实例代码 纯CSS3写的10个不同的酷炫图片遮罩层效果 @@##@@ PHP中SESSION和COOKIE基本用法 在项目中我们会经常用到Session和Cookie，比如用户登录验证、记录用户浏览历史，存储购物车数据，限制用户会…
-
CSS3中的变形与动画详细说明
最近在学习制作移动端的页面，做了一个微信页面的小demo，其中用到了很多的CSS3新增的内容，其中就有CSS3新增的变形和动画。其实这种CSS3的动画效果用JS也可以实现，不过CSS3能开启硬件加速，性能更好。 （下面均没写浏览器前缀，如有需要请自行添加~~） CSS3常见的动画效果的实现…
-
使用CSS实现Footer置底的五种方式
页脚置底（Sticky footer）就是让网页的footer部分始终在浏览器窗口的底部。 当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被推到网页底部；但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。 方法一：将内容部分的margin-bottom设为负数 footer htm…
-
使用CSS3时限随内容自动伸缩的背景
css3给我们带来一个非常实用的新属性：border-image，利用这个属性我们可以做出随着内容的增减自动伸缩的背景。废话不多说，看代码！html: 第一条列表内容 第二条列表内容 第三条列表内容 第四条列表内容 第五条列表内容 css：border: 20…
-
详解CSS3背景相关样式实例代码
这篇文章详解css3背景相关样式实例代码 background-image绘制多张图片叠加，示例如下: background-image绘制多张图片叠加 div{ width:1100px; height:800px; background-image: url(“../../image/icon1…
-
利用纯css3实现圆形从中心向四周扩散动画效果代码
先来个简单的示例，例如： @keyframes hovertreemove{from {top:30px;}to {top:130px;}} 效果：http://hovertree.com/texiao/css3/37/1.htm 可以通过 @keyframes 规则，创建动画。 创建动画的原理是，…
-
利用CSS3实现头像旋转效果实例代码
本篇文章主要介绍了css3实现头像旋转效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 鼠标未放上效果： 鼠标放上之后旋转效果： transition: all 2.0s;表示所有的属性变换在2秒内完成； transform: rotate(360deg);表示图片旋…
-
解析CSS3中nth-child与nth-of-type的区别
css3中nth-child与nth-of-type的区别其实很简单：:nth-of-type为什么要叫:nth-of-type？因为它是以”type”来区分的。也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素， 而ele:nth-child(n)是…
