手机端现在的一些应用会运用上这样一个效果，就是duang的一下出现一个圆变大直到填充整个div，动感十足。 想到css3的scale属性，就自己来实现一下。 css样式,用border-radius属性设置圆，改为用背景透明的白色大圆形能达到同样的效果: .anim{ position: absolute; border-radius: 50%; height:1200px; width:1200px; background-color: #fff; border-radi...
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是比较难以实现的，但是CSS3又具有很大的浏览器兼容性问题，当前使用还不够多，不过在未来肯定会大放光彩的，因为较少的代码就可以实现绚丽的效果。代码实例如下: 蚂蚁部落*{ margin:0; padding:0; list-style:none; font-style:normal; text-decoration:none; font-family:"微软雅黑";}.nav{ overflow:hidden; zoom:1;}.nav li{ float...
CSS3实现的3D旋转效果:由于CSS3的出现，实现3D动画效果也更为轻松便捷，下面就是一段能够实现3D旋转效果的代码，希望对大家能够带来参考作用。代码如下: 蚂蚁部落* { font-size:14px; color:#fff; padding:0; margin:0;}#container { position:relative; height 300px; width:300px; -webkit-perspective:500; margin-top:200px; margin-right:auto; margin-left:auto;}#parent { margin:10px; widt...
CSS3实现的页面反转效果:页面反转效果在实际应用中不太常见，不过也并非没有，下面分享一段利用CSS3实现的此效果，寄希望能够给需要的朋友带来一定的帮助，代码如下: 蚂蚁部落html{filter:fliph}body { -webkit-transform:rotateY(180deg); -moz-transform:skew(0deg, 180deg) scale(-1, 1); -o-transform:skew(0deg, 180deg) scale(-1, 1); transform:rotateY(180deg);}蚂蚁部落欢迎您。 以上代...
现代Web设计技术允许开发者快速实现大多数浏览器支持的动画。我想警告消息是很常见的，因为默认的JavaScript警告框的样式往往（与你自己设计的漂亮样式）很不协调很囧。这使开发者步入找出哪种解决方案能更好地实现更友好的用户界面的道路。 在这个教程中我想解释一下我们如何能把几个将要出现在网页上方的CSS3通知框放在一起。用户可以点击这些通知框使它们逐渐淡出消失，最终将他们从DOM中移除。作为一个有趣的附加功...
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的实现的checkbox复选框和radio单选框绚丽美化效果:在css3之前要美化单选框和复选框无非是使用图片进行相关的替换操作，并且还有很大的局限性。由于css3的出现，一切好像变的都变的轻松起来，并且效果非常的绚丽，这是使用css2无法做到的，下面就分享一段能够实现此功能的代码实例，需要的朋友可以做一下参考。代码如下: 蚂蚁部落@-webkit-keyframes click-wave{ 0%{ width:40px; height:40px; opacity:...
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中指定属性可以实现此功能，下面就通过代码实例介绍一下如何实现此功能。代码如下: 蚂蚁部落 div{ -moz-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -o-user-select:none; -ms-user-select:none; user-select:none; background:#CCC; font-size:12px; text-align:center...
效果：http://hovertree.com/texiao/css3/1/本效果主要使用text-shadow实现.参考：http://hovertree.com/h/bjaf/css3_text_effect.htm代码如下： 超炫CSS3文字特效集锦DEMO演示 - 何问起a{color:blue}.test:after {filter: url(#light-top);}.dilate:before {filter: url(#dilate10);}.dilate:after {filter: url(#dilate6);}.erode:after {filter: url(#erode2);}.distant1:after {filter: url(#distant1);}.distant-...
刚接触完css3的3D变换，感觉确实十分华丽，趁着热乎劲，把感想和理解记录下来。如有不对，欢迎指正。 CSS3中提供了2D和3D两种变换方式，所谓的变换主要就是位移和旋转，2D和3D的区别大概就是有没有Z轴方向的变换，仅此而已。 所以，为了后面更好的理解3D变换，我们先说一说2D的变换。 translate()和rotate() 上面两种方法是2D变换的常用方法，一个对应位移，一个对应旋转，当然还有其他的，这里就不展开，先只说说这两...
CSS3实现的鼠标悬浮和移开div淡入淡出效果:本章节介绍一下如何利用css3实现鼠标悬浮和离开div实现淡入淡出效果。代码实例如下: 蚂蚁部落div.demo{ float:left; border:1px solid #ccc;}div.demo i{ cursor:pointer; height:50px; transition:opacity 2s; width:50px; background:#000; float:left; margin:5px; opacity:0;}div.demo i:hover{ opacity:1; transition-duration:0s;} ...
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实现的动态月食效果代码实例:本章节分享一段代码实例，它利用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...