css实现的将英文单词进行大小写转换代码实例:本章节分享一段代码实例，它实现了利用CSS将英文单词进行大小写转换效果。代码非常的简单，相关属性的更多内容可以自行在本站查询。代码实例如下: 蚂蚁部落 h1{text-transform:uppercase} p.uppercase{text-transform:uppercase} p.lowercase{text-transform:lowercase} p.capitalize{text-transform:capitalize } This is a test. This is a test. This is a test....
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 更多内容可...
鼠标经过li元素鼠标变成小手代码实例:默认情况下，当鼠标划过链接元素的时候，鼠标指针能够变成小手形状。但是对于普通的元素则不行，下面就通过代码实例介绍一下如何实现鼠标划过li元素，鼠标指针变小手。代码实例如下: 蚂蚁部落 #items{ width:900px; height:auto; margin:0 auto; padding:5px 0; clear:both; } #items ul, #items li{ list-style:none; } #items li{ width:500px; height:28px; ...
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...
css3实现的圆角效果代码实例:本章节分享一段代码实例，它使用css3实现了圆角效果。代码实例如下: 蚂蚁部落 p.speech{ width:200px; height:100px; text-align:center; line-height:100px; background-color:#fff; border:8px solid #666; -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px; -webkit-box-shadow:2px 2px 4px #888; -moz-box-...
css3实现的气泡效果代码实例:本章节分享一段代码实例，它实现了气泡效果。由于css3的强大功能，很多美观的效果可以不用使用图片。代码实例如下: 蚂蚁部落 p.thought{ position:relative; width:130px; height:100px; text-align:center; line-height:100px; background-color:#fff; border:8px solid #666; -webkit-border-radius:58px; -moz-border-radius:58px; border...
使用box-shadow属性实现圆角效果代码实例:通常实现圆角效果我们使用border-radius，其实我们也可以使用box-shadow属性来实现。两个属性的具体用法这里就不多介绍了，具体可以参阅以下两个文章:（1）.圆角效果可以参阅CSS3实现圆角效果一章节。（2）.box-shadow可以参阅CSS3的box-shadow属性用法详解一章节。代码实例: 蚂蚁部落.antzone{ margin:100px; width:100px; height:100px; border-radius:1px; box-shadow...
css如何实现一个文字两种颜色代码实例:在实际应用中可能需要设置文本效果比较炫酷。有一种效果就是将一个文字设置为两种颜色，使用普通的方法肯定是无法实现。下面就分享一下实现此功能的代码实例: 蚂蚁部落.antzone{ display:inline-block; font-size:80px; line-height:80px; color:#000; position:relative; overflow:hidden; white-space:pre;}.antzone:before{ position:absolute; left:0; top:0; col...
css3实现元素的伸缩效果代码实例:本章节分享一段代码实例，它利用css3实现了元素的伸缩效果。这里为了进行演示，结合了javascript代码。代码实例如下: 蚂蚁部落 .slider{ overflow-y:hidden; max-height:500px; /* 最大高度 */ background:pink; height:200px; width:200px; /* Webkit内核浏览器：Safari and Chrome*/ -webkit-transition-property: all; -webkit-transition-...
input文本框圆角效果代码实例:本章节分享一段代码实例，它实现了将input文本框设置为圆角的功能。代码实例如下: 蚂蚁部落 input{ border-radius:6px; border:1px solid #ccc; height:20px;} border-radius属性可以参阅CSS3实现圆角效果一章节。 原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=18373 更多内容可以参阅:http://www.softwhy.com/divcss/
css实现的文本框focus获取焦点设置样式代码实例:文本框获取焦点然后设置它的css样式通常可以使用javascript代码。具体可以参阅javascript实现的文本框获取焦点设置其样式代码一章节。其实使用纯css也能够实现此功能，代码实例如下: 蚂蚁部落input:focus{ background:#ccc; color:green;} 上面的代码实现了我们的要求，代码比较简单这里就不多介绍了。:focus选择器可以参阅css的:focus选择器用法介绍一章节。 原文...
一共收集整理了图形20个，比较实用，同时也为了熟悉CSS的代码。整合了一下，有错误欢迎指出。1.正方形#square { width: 100px; height: 100px; background: red;} 2.长方形 #rectangle { width: 200px; height: 100px; background: red;} 3.左上三角 ...
超级链接是网站中使用比较频繁的HTML元素，因为网站的各种页面都是由超级链接串接而成，超级链接完成了页面之间的跳转。超级链接是浏览者和服务器的交互的主要手段，在后面的技术中会逐步深化学习。超级链接超级链接是网站中使用比较频繁的HTML元素，因为网站的各种页面都是由超级链接串接而成，超级链接完成了页面之间的跳转。超级链接是浏览者和服务器的交互的主要手段，在后面的技术中会逐步深化学习。— 注意：图片也可以...