CSS3 Gradient介绍参考地址:http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.htmlhttp://www.zhangxinxu.com/wordpress/?p=3639 效果图: html:<div class="colorWheel"><div class="piece"></div>
</div>
css:.colorWheel {position: relative;width: 16em;height: 16em;background: linear-gradient(36deg, #7c1 42%, transparent 42%),linear-gradient(72deg, #999 75.48%, transparent 75.48% ),lin...
关于浏览器文字选中颜色以我的系统举例(xp 默认主题),浏览器上页面文字选中后默认的背景色是一种蓝色, 不同浏览器的颜色有些许差异,但大致相同,文字颜色也近乎白色,如下图所示,截自Firefox3.6浏览器:在CSS3的爸爸妈妈还没有相亲认识的时候,要改变页面上文字选中后的背景色以及文字颜色,就跟让太监生孩子一样困难。但是,随着CSS3呱呱落地,获得越来越多的浏览器认可,一切又显得那么自然而然。虽然有些顽固的糟老头(如...
今天在做一个项目,用zepto给元素增加一个class,class里面有transform的效果。开始的时候,元素的样式是用id选择器写的,但是增加class之后,发现动画效果出不来,当时头好晕没想出来为啥,结果回家后用简单的代码打一遍,发现原来是个很简单的问题……动画出不来的原因就是:id选择器里的css优先级要大于class选择器的优先级。新加进来的class没有办法覆盖掉原有的样式,导致了动画出不来。简单代码测试:<!DOCTYPE html><html><...
今天读了篇关于如何使用css3创建3d四面体的文章,觉的相当不错,所以拿出来和大家分享一下。 首先要和大家分享的是,如何使用div+css创建三角形。在这里我先把相关代码粘贴出来,然后再为大家讲解原理。 html: 复制代码代码如下:<div id="pyramid"> <div></div> </div> css: 复制代码代码如下:<style type="text/css"> #pyramid { position: relative; margin: 100px auto; height: 500px; width: 100px; } #pyramid > div { po...
<!DOCTYPE html>
<html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title>慕课七夕主题</title><script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><style type="text/css">* {padding: 0;margin: 0;}ul,li {list-style-type: none;}#content {width: 100%;height: 100%;/* top: 20%;left: 20%; */overflow: hidden;position: absolute;}.content-wrap {position: rela...
三角碎片以非常缓慢的速度旋转移动,如果使用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中 animation 和 transition 俩样式都能创建动画效果,而且是后台C++执行的,所以效率比普通jQuery的js模拟动画的效率高很多,所以建议大家能用css实现的效果都用css。transition的使用比较简单,这里就不介绍了,着重为大家介绍下 animation 。animation 的css属性有很多,本文通过 animation-name 来控制启动动画和转换动画,以下是一个通过 animation 来控制元素的显示和隐藏的例子(仅支持webkit):<!doctype html>
<html...
我们可以使用SVG、Canvas、CSS3或者背景图片来实现五角星图案及其悬停效果。CSS3引入的伪元素和变换特性使得实现五角星图形非常简单,并且可以结合渐变实现更为漂亮的效果。因此使用图片实现五角星已经毫无必要(图片占用额外的请求,且数据量大。除非要支持低版本的桌面IE浏览器)。首先我们创建一个三角形,这通常是使用带大尺寸边线而零内容尺寸的元素来实现,代码示范:.tri {width: 0;height: 0;border-left: 15px solid tran...
原文来源:http://webdesignerwall.com翻译:http://xinyo.org当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大。人们也不再仅仅用台式机来浏览网页,现在有手机,平板电脑等等。所以传统的固定宽度设计形式将不再是个最佳选择,网页设计需要有自适应性。网页的布局需要能够根据不同的分辨率和设备来自动调整,以达到到最佳显示效果。接下来会展示如何运用HTML5和CSS3来设计一个自适应网页。效果预览 代码下载先看看...
很棒的loading效果,收藏一下一HTML 代码:复制代码代码如下:<div class="spinner"> <div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div> <div class="rect4"></div> <div class="rect5"></div></div>CSS 代码:复制代码代码如下:.spinner { margin: 100px auto; width: 50px; height: 60px; text-align: center; font-size: 10px;}.spinner > div { background-color: #67CF22; height: ...
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"/> 5<title>使用CSS3实现百叶窗</title> 6<meta name="keywords" content=""/> 7<meta name="description" content=""/> 8 9<style>10 *{margin:0;padding:0;}11 body{}12 ul,li{list-style:none;}13 #banner{width:800px;height:500px;margin:60px auto;border:3px solid #082323;position:relative;}14 #banner .pic li{width:200px...
CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形,从而可以减少图片的使用。以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可以完成了。通过使用新的CSS属性,像transform和border-radius,我们可以创建非常漂亮和复杂的图形效果。圆形圆形在设置CSS时要设置宽度和高度相等,然后设置border-radius属性为宽度或高度的一半即可#circle {width: 120px;height: 120px;background: #7fee1d;-moz-b...
当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大。人们也不再仅仅用台式机来浏览网页,现在有手机,平板电脑等等。所以传统的固定宽度设计形式将不再是个最佳选择,网页设计需要有自适应性。网页的布局需要能够根据不同的分辨率和设备来自动调整,以达到到最佳显示效果。接下来会展示如何运用HTML5和CSS3来设计一个自适应网页。效果预览 代码下载先看看它的效果在开始之前,点击最终预览来看看它的效果。改变浏览器...
浏览器上页面文字选中后默认的背景色是一种蓝色, 不同浏览器的颜色有些许差异,但大致相同,文字颜色也近乎白色,如下图所示,截自Firefox3.6浏览器:在CSS3的爸爸妈妈还没有相亲认识的时候,要改变页面上文字选中后的背景色以及文字颜色,就跟让太监生孩子一样困难。但是,随着CSS3呱呱落地,获得越来越多的浏览器认可,一切又显得那么自然而然。虽然有些顽固的糟老头(如IE浏览器)还不认可这个新生的CSS3,但是,丝毫不影响其在...
原文链接: Smooth as Butter: Achieving 60 FPS Animations with CSS3在移动端使用动画元素是很容易的.如果你能遵循我们的这里的提示, 在移动端适当的使用动画元素, 可以变得更加容易.在这些天里, 每个人都不会适当的使用CSS3动画. 有些最佳的实践方法, 一直被忽视. 被忽视的主要原因是人们不能真正的理解,这些实践存在的真正原因, 以及为何能得到大力支持.现在设备的规格非常多, 如果你不能通过仔细思考优化你的代码, 使用顺畅的动...