CSS3
学习,总结,分享CSS3笔记,源代码,及技术交流
damys
态度决定一切,积累决定层次,思维决定行为,习惯决定命运
展开
-
CSS3----过渡transition
Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性Safari 支持替代的 -webkit-transition 注释:Internet Explorer 9 以及更早版本的浏览器不支持原创 2014-08-29 10:59:55 · 816 阅读 · 0 评论 -
CSS3----转换(旋转)transform
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜原创 2014-08-29 10:34:16 · 4818 阅读 · 0 评论 -
CSS3----动画animation
属性:属性描述CSS@keyframes规定动画。3animation所有动画属性的简写属性,除了 animation-play-state 属性。3animation-name规定 @keyframes 动画的名称。3animation-dura原创 2014-08-29 09:46:53 · 6204 阅读 · 0 评论 -
CSS3----图片倒影效果
CSS:Html:原创 2014-05-15 11:11:35 · 7046 阅读 · 0 评论 -
CSS3----实现光芒旋转头像动画
CSS: @-webkit-keyframes spin { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } @-moz-keyframes spin { from {-moz-transform: rotate(0deg);} to {-原创 2014-05-08 11:54:55 · 2773 阅读 · 2 评论 -
CSS3----画圆,渐变,旋转
效果图:使用border-radius,你可以画出各种漂亮的圆形图案CSS.circle { border-radius: 50%; display: inline-block; margin-right: 20px;}#circle1 { width: 200px; height: 200px; backgrou...原创 2014-05-08 09:48:40 · 6057 阅读 · 0 评论 -
CSS3----Columns:比table更好用的分列式布局方法
CSS3里的column系列属性提供了各种不同的功能,通过组合使用它们,你能得到相应的任何分栏式布局:column-count: 列数目column-gap: 各列之间间隙宽度column-width: 建议宽度;未必会使用,浏览器基于此数值进行计算column-rule-width:列之间分割线宽度column-rule-style:列之间分割线风格column-rule-color原创 2014-05-04 09:29:57 · 12476 阅读 · 0 评论 -
CSS3----渐变主流浏览器支持
.about-box:hover{background:#00a5e2;background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 165, 225)), to(rgb(2, 149, 203)));background-image: -webkit-linear-gradient(top,原创 2013-08-26 10:25:17 · 1674 阅读 · 0 评论 -
CSS3----透明滤镜效果
支持主流浏览器,--Firefox,Chrome,IE7/8/9---IE6目前不支持HTML:/*80%的透明效果:*/ <img alt="" src="style/newimg/test-330-h215.png" onmouseover=" this.style.opacity=1;this.filt原创 2013-05-03 16:11:36 · 1486 阅读 · 0 评论