一个css3 旋转效果 -- 待续

<div class="container"> <div> <figure></figure> <figure></figure> <figure></figure> <figure></figure> </div> <div><figure></figure><figure></figure>&…

1.引子 css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候.比如transition的animation-play-state,就只有部分浏览器支持. 2.检测方法下面的方法可以使用脚本判断浏览器是否支持某一个CSS3属性: /** * 判断浏览器是否支持某一个CSS3属性 * @param {String} 属性名称 * @return {Boolean} true/false * @…

判断浏览器是否支持某一个CSS3属性

判断浏览器是否支持某一个CSS3属性 function supportCss3(style) { var prefix = ['webkit', 'Moz', 'ms', 'o'], i, humpString = [], htmlStyle = document.documentElement.style, _toHumb = function (string) { return string.replace(/-(\w)/g, function ($0, $1) { return $1.to…

css3 旋转效果加上双面显示效果

在学习Css3的过程中,我想做一个类似金字塔,菱形翻页效果,如图这种效果如是,我自己设计了一个,不带js的旋转效果: 1>第一步我先设计了一个方块,内含一个旋转了45deg的小方块,代码如下: <div style="width: 141.4px;height: 141.4px; background-color: green;"> <div style="width: 100px; height: 100px; transform:rotate(4…

一个CSS3滤镜Drop-shadow阴影效果

<html> <head> <title>CSS3 Drop-shadow阴影</title> <style type="text/css"> .drop-shadow { width: 500px; height: 300px; position: relative; background: #ccc; } .drop-shadow:before, .drop-shadow:after { content: "&q…

分享一个css3写的气泡对话框,适合于即时通讯和留言本的动态内容

效果预览: css code .message_content{width:100%;margin-top:10px;clear:both;float:left;} .face{float:left;width:10%;} .face img{width:100%;max-width:60px;clear:both;} .message{float:left;background-color:#3F3;padding:10px;width:75%;margin-left:20px;margin-…