CSS3绘图实例代码*{ margin:0; padding:0;}body { background: #fff;}.color1{ background: #ffb400;}.color2{ background: #e78500;}.color3{ background: #bd5d00;}.color4{ background: #9e3300;}.color5{ background: #772400;}div{ overflow: hidden;}.wrapper{ width:450px; height:450px; left:50%; top:50%; margin:-225px 0 0 -225px; position: absolute;}.top{ width:48px; height:62px; top:9px; left:232px; position...
无标题文档*{margin:0;padding:0;}.wrapper1{ width:150px; height:191px; border:#eee 1px solid; border-radius:10px; padding:2px; float:left; margin:200px 0 0 50px; -moz-perspective:800px; -moz-transform-style:preserve-3d; -webkit-perspective:800px; -webkit-transform-style:preserve-3d; -moz-backface-visibility:; -webkit-backface-visibility:hidden;}.box1{ width:150px; height:191px; background:url(http:...
这里把CSS3的新属性单独拿出来讲解一下： border-radius 属性用于创建圆角 div{border:2px solid;border-radius:25px;-moz-border-radius:25px; /* Old Firefox */} border-shadow 用于向方框添加阴影 div{width:300px;height:100px;background-color:#ff9900;-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */box-shadow: 10px 10px 5px #888888;} border-image 属性允许您规定...
css3购物网站商品文字提示实例先来看效果图： 当鼠标划过图片时，有着泰迪熊黑色长方形的背景就会出现。来看HTML5+CSS3代码： 购物网站商品文字提示 *{margin:0;padding:0;} #con{width:500px;height:470px;margin:50px auto;position:relative;} #con p{background:#000;color:#fff;width:100%;height:30px;...
CSS3实现的字符串逐字高亮效果代码实例:本章节分享一段代码实例，它实现了字符串逐字高亮效果。代码如下: 蚂蚁部落html, body{ background-color: #aaaaaa;}p span{ font-family: 'Comic Sans MS'; animation: loading 1.4s; -moz-animation: loading 1.4s; -webkit-animation: loading 1.4s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;}@keyframes loading{ 0% {c...
CSS3实现的横向二级下拉菜单代码实例:横向二级下拉菜单是非常常用的效果，例如很多网站的导航栏就是这样的二级下拉菜单效果，非常好用，本章节分享一段使用CSS3实现的下拉菜单，当然当下很多浏览器都不支持，不过相信用不了多久这种现状就会被改变。代码实例如下: 蚂蚁部落#nav{ float:left; font:bold 12px Arial, Helvetica, Sans-serif; border:1px solid #121314; border-top:1px solid #2b2e30; -webkit-bo...
CSS3实现的3D旋转代码实例:本章节通过代码实例介绍一下CSS3实现的3D旋转效果，css3的出现可以设置更为强大的效果，3D运动效果就是其中的常用效果之一，下面就是一个这样的代码实例，希望能够给需要的朋友带来一定的参考意义。代码如下: 蚂蚁部落body, div, ul, li{ padding:0; margin:0;}.container ul li{ height:180px; width:180px; margin-right:20px; margin-bottom:20px; display:inline; -webkit-...
CSS selector level 3规范中定义了一些和文档层级结构有关的连接选择器（或称组合选择器）， 分为后代选择器（Descendant combinator/Child combinators）和同级选择器（Sibling combinators）： 其中后代选择器分以下3个： 1. 空格。div p: 表示p是div的后代元素, div是p的祖先。该选择器选择所有div下的p后代元素。2. 箭头（>）。表示直系关系。div > p 表示div的儿子辈的元素。 3. 星号（*）。表示隔代关系。div ...
CSS3动画的出现,让我的真的非常喜欢,因为他够简单.今天我们来实现一个交换动画,一个笑脸慢慢从远处,回到自己的原来位置的一种效果.这种动画在JS里面也是很多见的. 首先得将HTML结构设计好,一个固定的窗口,然后一个带有黑色背景的笑脸 代码名称 ? 笑脸居中我们用最新的布局flex来实现,这个也是很好用的属性.之前文章中已经有flex的相关教程,大家不懂的可以看看. 代码名称 div{ width: 200px; he...
css3代码实现的鼠标悬浮按钮效果代码实例:在css3之前，鼠标悬浮于按钮之上，无非是设置按钮的大小、字体颜色或者背景图片等简单的项目，但是css3的出现，可以让设置变得丰富多彩，下面就是一个css3实现的此效果。代码如下: 蚂蚁部落*, *:before, *:after{ margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } body{ padding-top:10%; text-alig...
css3实现的绘制图形图案效果代码实例:如果使用css2实现绘制图形图案几乎是不可能的，或者说费好大的劲也只能够得到非常简单的图案，css3的出现将绘制复杂的图形这个目标成为可能，下面就是一个相关的代码实例，有这方面需要的朋友可以参考一下它的实现方式。代码如下: 蚂蚁部落div{ width:170px; height:140px; background-image: radial-gradient(circle at 50% 120%, rgba(0,0,0,0.7) 23%, rgba(0,0,0,0) ...
CSS3实现的菱形效果代码实例:本章节分享一段代码实例，它使用CSS3实现了菱形效果。代码如下: 蚂蚁部落.antzone{ width:80px; height:80px; margin:40px 0 0 40px; -webkit-transform-origin:0 100%; -moz-transform-origin:0 100%; -o-transform-origin:0 100%; -ms-transform-origin:0 100%; transform-origin:0 100%; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:ro...
CSS3实现的平行四边形代码实例:本章节分享一段代码实例，它实现了平行四边形效果。代码如下: 蚂蚁部落.antzone{ width:100px; height:70px; -webkit-transform:skew(-20deg); -moz-transform:skew(-20deg); -o-transform:skew(-20deg); -ms-transform:skew(-20deg); transform:skew(-20deg); background:#E5C3B2;} 原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=17891 更多内容可...
css3实现的动态月食效果代码实例:本章节分享一段代码实例，它利用CSS3实现了动态的月食效果。动画其实比较简单简短，需要的朋友可以自行做一下分析，这里就不多介绍了。代码实例如下: 蚂蚁部落 *{ margin:0; padding:0;}body{ background-color: #000;}.moonback{ width:600px; height:600px; background-color:#000; margin:0 auto; position: relative;}.moonback::before{ content:","; display:bloc...
CSS3实现的鼠标悬浮开门关门效果代码实例:本章节分享一段代码实例，它利用CSS3模拟实现了简单的开门关门效果。代码实例如下: 蚂蚁部落.door{ position:relative; width:400px; height:300px; overflow:hidden; border:2px solid #000; background:#000;}.door:before,.door:after{ content:''; position:absolute; left:0; width:0; height:0; overflow:hidden; border-color:#000 tran...