CSS3 - 技术教程文章
css3模仿雨滴（附源码）
/** */function RainyDay(canvasid, sourceid, width, height, opacity, blur) { this.canvasid = canvasid; this.canvas = document.getElementById(canvasid); this.sourceid = sourceid; this.img = document.getElementById(sourceid); // draw and blur the backgroiund image this.prepareBackground(blur ? blur : 20, width, height); this.w = this.canvas.width; this.h = this.canvas.height; // create the glass canv...
纯CSS3实现宽屏二级下拉菜单【图】
在线演示本地下载原文：https://www.cnblogs.com/qixidi/p/10070767.html
css3布局样式相关【代码】
伸缩布局（一）;1.创建一个flexbox容器。.flexconfainer{display:-webkit-flex;display:flex; }2.flex项目显示；flex项目是flex容器的子元素，他们沿着主要轴和横轴定位，默认的是沿着水平轴排列一行，可以通过flex-direction来改变主轴方向修改为column,其默认值是row。3.项目列显示;.flexcontainer{display:-webkit-flex;display:flex;-webkit-flex-direction:colmn;flex-direction:column; }4.还有两个属性值:如果是垂直方向的有...
css3动画效果【代码】【图】
5.1动画的基本使用制作动画分为两步:1. 先定义动画2.再使用(调用)动画1.用keyframes定义动画(类似定义类选择器)@keyframes 动画名称{0%{}100%{}} 动画序列●0%是动画的开始, 100%是动画的完成。这样的规则就是动画序列。●在 @keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。●动画是使元素从一 种祥式逐渐变化为另-种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间,...
CSS3 线性渐变（linear-gradient）【图】
CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径向渐变）。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用 CSS3 Gradient，我们需要先了解一下目前的几种现代浏览器的内核，主要有 Mozilla（Firefox，Flock等）、WebKit（Safari、Chrome等）、Opera（Opera浏览器）、Trident（讨厌的IE浏览器）。 本文照常忽略IE不管，我们主要看看在 Mozilla、Webkit、Opera 下的应用，当然在 IE 下也...
利用css3修改input[type=radio]样式【代码】
<form><div><input id="item1" type="radio" name="item" value="选项一" checked><label for="item1"></label><span>选项一</span></div><div><input id="item2" type="radio" name="item" value="选项二"><label for="item2"></label><span>选项二</span></div> </form> div {position: relative;line-height: 30px;}input[type="radio"] {width: 20px;height: 20px;opacity: 0;}label {position: absolute;left: 5px;top: 3px;w...
HTML5+CSS3静态页面项目-PayPaul的总结【代码】【图】
学习前端有一段时间了，一直在看书上的理论知识，而实战项目却很少。师兄常说，想要知道自己的实力有多少，知识掌握了多少，最好的方法就是去实践了，实践出真知嘛。于是决定在这个假期里，主要是通过项目的实践以及理论知识的辅助来提高代码水平。首先是做几个HTML5+CSS3静态页面布局的练习，查缺补漏知识点并且总结在实践过程中遇到的一些错误。页面的设计稿主要是网络上找来了的，也尝试自己切图、测量位置、获得内容的属性等等...
用js实现css3效果的圆角方法【代码】
找在IE下实现css3效果的圆角时找到的一个实例，没有测试，不知道使用起来怎么样，有兴趣的朋友可以自己试一下:复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <title>在线演示 - LHGCALENDAR</title> <script type="text/javascript" src="http://www.qiuzhiquan.com/images/...
HTML-HTML5+CSS3权威指南阅读（三、CSS3）
1.display 中 block, inline, inline-block 的区别 1).默认情况下, block 宽度占满整个浏览器, inline 宽度等于其内容的宽度 2).每行只容纳一个 block 元素, 但可以并列容纳多个 inline 元素 3).block 元素宽、高、行高等可以更改, inline 元素宽、高、行高等不可更改 4).应用 inline-block 的元素呈现为内联对象, 周围元素保持在同一行, 但可以设置宽度和高度地块元素的属性(这样可以使用 li + inline-block 制作导航...
css3动画animation
动画：animation animations这物似乎还是只在webkit，moz核心的浏览器上起作用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动画</title> <style type="text/css"> @-moz-keyframes resize{ 0% { padding: 0; } 50% { padding: 0 20px; background-color:rgba(190, 206, 235, 0.2); } 100% { padding: 0 100px; background-color:rg...
超慢速移动动画使用CSS3实现流畅效果【图】
三角碎片以非常缓慢的速度旋转移动，如果使用JS实现会出现一像素一像素移动的卡顿使用CSS3会获得非常理想的效果transform: translate3d(80px, 150px, 0px) rotate(1220deg); transition: transform 30s linear 0s; 上面一个属性表示图像变换 translate3d(80px, 150px, 0px) 表示X轴偏移80px， Y轴偏移150pxrotate(1220deg) 表示在此过程中旋转1220°transition: transform 30s linear 0s;表示动画时间30秒速度方式：linear 延迟0s原...
css3学习站
http://www.w3cplus.com/原文：http://www.cnblogs.com/web123/p/3546371.html
CSS3学习总结
1、border-radius:圆角效果 （1）border-radius:5px 5px 5px 5px ;如果有4个参数，代表4个角 （2）border-radius:5px 5px；2个参数，代表top-left,bottom-rigt和top-right,bottom-left; （2）border-radius:5px 5px 5px；3个参数，代表top-lett和top-right，bottom-left和bottom-right；2、box-shadow: 添加阴影 第一个参数是往右偏移: box-shadow:10px 0 0 0 red ； 第二个参数是往下...
css3动画--边框线条动画【代码】【图】
网上看到一个css3动画，地址最开始思路是，里面一个DIV方块，右上角一个同样大小的div1,向上,向右平移8px，设div1的border-top,border-right值形成，如图所示再用clip截取一半，形成半折角。同理左下角建一个div,向左、向下平移8px,设border-left,border-bottom值，用clip截取形成 <div class="cont"><div class="bb"></div> </div> html,body{margin: 0;padding: 0;background: #101010;}.cont{width:500px;margin: 150px auto;}....
让低版本IE也能正常运行HTML5+CSS3网站的3种解决方案【代码】
现在我们可以选择浏览器非常多，所以浏览器的环境也是种类繁多，同一个浏览器也是包含各种不同的版本，不同的版本之间的渲染方法也存在差异，，它们支持的 HTML5、CSS3 特性恐怕也不尽相同。这种情况于是造成Web开发者在开发网站时，要面对数量庞大的浏览器种类。如果开发时按最低标准，比如 IE6不支持的特性，我们统统不用，那就没有必要写这篇文章了；但我想这种情况极少，更多的开发，是在现代浏览器上使用它们支持的特性，而在...
CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案【代码】【图】
一、浏览器兼容1.1、概要世界上没有任何一个浏览器是一样的，同样的代码在不一样的浏览器上运行就存在兼容性问题。不同浏览器其内核亦不尽相同，相同内核的版本不同，相同版本的内核浏览器品牌不一样，各种运行平台还存在差异、屏幕分辨率不一样，大小不一样，比例不一样。兼容性主要可以分类为：1)、CSS兼容2)、JavaScript兼容3)、HTML兼容这三类也是前端的主要组成部分，都存在一定的兼容性问题，知己知彼，百战百胜，我们先了解...
CSS3【图】
原文：http://www.cnblogs.com/3020815dzq/p/7449422.html
Respond.js让IE6-8支持CSS3 Media Query【代码】
Bootstrap里面就引入了这个js文件，从名字看出来是自适应的兼容。打开IE看了一下，效果挺好的，自适应的效果挺好的。Respond.js让不支持CSS3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。使用方式官方demo地址：http://scottjehl.github.com/Respond/test/test.html 1.在css中正常用 min/max-width media queries@media screen and (min-width: 480px){...styles for 480px and up go here} 2.引入respond.min.js，但要在...
css3径向渐变
<!DOCTYPE html><html><head> <title>径向渐变</title> <style type="text/css"> div{ width: 200px; height: 150px; } .a{ /*径向渐变的默认形状是椭圆ellipse 和线性渐变一样如果不设置第一个颜色和最后一个颜色,那么0%就会赋给第一个颜色 100%就会赋给最后一个颜色*/ background-image: radial-gradient(circle,red,green 10%,gold); } .b{ /*标准语法：半径 形状 at 圆心,颜色1 位置1,... 1.半径： farth...
纯CSS3实现鼠标悬停提示气泡效果
<!DOCTYPE HTML> <html><head><title>CSS3制作鼠标悬停提示气泡内容菜单</title><style type="text/css">body{background:#D6D3C9;color:#383835;font-family:Arial, Arial, Helvetica, sans-serif;}#bubblemenu li {display: inline;margin-left: 15px;cursor:pointer;}#bubblemenu li > div {width: 150px;min-height: 100px;position: absolute;display: inline;margin-left: -120px;padding: 5px;visibility:hidden;opacity: 0...
css3翻书效果【代码】【图】
强大的css3不需要解释，代码分层理解【直接复制】，很有意思。效果图：<ul class="align"><li><figure class=‘book‘><!-- Front --><ul class=‘hardcover_front‘><li><div class="coverDesign yellow"><span class="ribbon">NEW</span><h1>CSS</h1><p>TRANSFORM</p></div></li><li></li></ul><!-- Pages --><ul class=‘page‘><li></li><li><a class="btn" href="#">Download</a></li><li></li><li></li><li></li></ul><!-- B...
《精通 CSS3 动画（学完这个课写炫酷页面）》【图】
精通 CSS3 动画（学完这个课写炫酷页面） 视频选集1/10P1浏览器私有前缀P2圆角边框P3阴影P4线性渐变P5学习猿地价格选项卡P6径向渐变_1P7transform2DP8transform3DP9过渡属性P10动画属性 水平位置 / 垂直位置 原文：https://www.cnblogs.com/cx2016/p/13153871.html
第三方 Animate CSS3动画库的 应用。【代码】
代码:<!doctype html><html><head><meta charset="utf-8"><title>Animate Demo</title><link rel="stylesheet" type="text/css" href="animate.min.css"><style type="text/css"> div{width:200px;height:150px;background-color:blue;}</style></head><body><div class="animated bounceInLeft"></div><div class="animated bounceOut"></div><div class="animated fadeIn"></div><div class="animated flash"></div><div class="...
CSS3中box-shadow的用法介绍
一般我们通过box-shadow来设置盒阴影，但是有些属性我们一般没有用到，这篇文章将对box-shadow属性进行逐个分析。语法CSS Code复制内容到剪贴板E {box-shadow:inset x-offset y-offset blur-radius spread-radius color} 即：对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色} inset 投影方式 此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”...
用纯css3实现的图片放大镜特效效果非常不错
今天要给大家分享的的一款用纯css3实现的图片放大镜特效。页面打开五个小图显示于页面。当鼠标经过图片时，当前图片以灰色背景图的形式展示。效果非常不错。 源码下载实现的代码： html代码： 复制代码代码如下:<ul class="gallery"> <li class="gallery__item"></li> <li class="gallery__item"></li> <li class="gallery__item"></li> <li class="gallery__item"></li> <li class="gallery__item"></li> <li class="gallery__it...
CSS3感应鼠标背景闪烁和图片缩放效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3感应鼠标的背景闪烁和图片缩放动态效果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> /*标题背景*/ h2{background:rgba(0,0,0,0.5);color:#FFF;padding:10px 0;width:300p...
CSS3媒体查询(Media Queries)介绍
媒体类型 all 所有设备 screen 电脑显示器 handheld 便携设备 tv 电视类型设备 print 打印用纸打印预览视图 关键字 and not(排除某种设备) only(限定某种设备) 媒体特性 媒体特性共13种，可以说是一个类似CSS属性的集合。其中的大部分接受 min/max 的前缀，用来表示 大于等于/小于等于 的逻辑。 and 示例如下所示： @media screen and (min-width: 800px) {样式代码} >800 @media screen and (min-width: 600px) and (max-width: ...
CSS3+HTML5特效5 - 震动的文字【代码】【图】
先看效果（把鼠标移上去看看）abcd 这个效果很简单，就是移动文字的位置模拟出震动的效果。 Css 1<style>2@-webkit-keyframes shake {3 0%{4 -webkit-transform:translate(2px, 2px);5 }6 25%{7 -webkit-transform:translate(-2px, -2px);8 }9 50%{ 10 -webkit-transform:translate(0px, 0px); 11 } 12 75%{ 13 -webkit-transform:translate(2px, -2px); 14 } 15 100...
jQuery/CSS3类似阿里巴巴的商品导航菜单实现教程【代码】【图】
有两天没发表文章了，今天来说说利用jQuery和CSS3制作一款类似阿里巴巴左侧商品菜单导航，这款菜单看起来非常大气，可以展示非常多的产品类目，如果你在设计电子商务网站，不妨可以拿来参考，一下是效果图：我们也可以到这里来查看这款菜单的DEMO演示。接下来还是分析一下源代码，源码由HTML、CSS和jQuery组成，先来看看HTML，东西很多，但结构非常简单：<div class="sidebar"><div class="sidebar_top sidebar_top_tc">全部产品分...
jQuery+css3弹出框插件【代码】
先来看DEMO：https://codepen.io/jonechen/pen/regjGG插件的开发很简单，运用了CSS3的动画效果，并且弹出框的内容可以自定义。插件的默认配置参数有三个：var defaults = {event: ‘click‘, // 默认点击事件dialogBox: ‘selector‘, // 弹出框容器hover: false, // 默认滑动事件关闭 } CSS部分：*{padding: 0; margin: 0; list-style: none;font:14px/1.8 "microsoft yahei";} body{background: #505050} .btn{margin: 0 auto;wi...