CSS 几款比较常用的翻转特效

第一个：360度翻转特效

<style>
* {

    margin:0;

    padding:0;

}

.aa {

    width: 220px;

    height: 220px;

    margin: 0 auto;

    background: no-repeat url("images/author.jpg") left top;

    -webkit-background-size: 220px 220px;

    -moz-background-size: 220px 220px;

    background-size: 220px 220px;

    -webkit-border-radius: 110px;

    border-radius: 110px;

    -webkit-transition: -webkit-transform 2s ease-out;

    -moz-transition: -moz-transform 2s ease-out;

    -o-transition: -o-transform 2s ease-out;

    -ms-transition: -ms-transform 2s ease-out;

}

.aa:hover {

    -webkit-transform: rotateZ(360deg); /*transform  transition 以及 边角的弧度 border-radius 要考虑兼容性的问题*/

    -moz-transform: rotateZ(360deg);

    -o-transform: rotateZ(360deg);

    -ms-transform: rotateZ(360deg);

    transform: rotateZ(360deg);

}
</style>

<body>

<div class="aa"></div>

</body>

第二种：照片墙悬挂效果

<style>

body{font-family:Tahoma,Helvetica,"\5b8b\4f53","Arial",sans-serif;font-size:12px;color:#fff;}

            body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0}

            input,button,textarea{border:none 0}

            fieldset,img{border:0}

            table{border-collapse:collapse;border-spacing:0}

            ul,ol{list-style:none}

            a:link{text-decoration:none}

            a:visited{text-decoration:none}

            a:hover{text-decoration:none}

            .clear{zoom:1}

            .clear:after{content:"";display:block;clear:both}

/* polaroids */

.polaroids{width:100%;margin:0 0 18px 10px;}

.polaroids li{display: inline;}

.polaroids a{background: #fff;display: inline;float:left;margin:0 0 27px 30px;width:auto;padding:10px 10px 15px;text-align: center;font-family: "Marker Felt", sans-serif;text-decoration: none;color:#333;font-size: 18px;

-webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);

-moz-box-shadow:0 3px 6px rgba(0,0,0,.25);

-o-box-shadow:0 3px 6px rgba(0,0,0,.25);

box-shadow:0 3px 6px rgba(0,0,0,.25);

}

.polaroids img{display: block;width:190px;margin-bottom:12px;}

.polaroids a:after{content: attr(title);/* Ie8+,FF,Chorme,Safari */}

.polaroids li:nth-child(even) a{

    -webkit-transform:rotate(2deg);

    -moz-transform:rotate(2deg);

    -ms-transform:rotate(2deg);

    transform:rotate(2deg);

}

.polaroids li:nth-child(3n) a{

    -webkit-transform:none;

    -moz-transform:none;

    -ms-transform:rotate(2deg);

    transform:none;

    position: relative;

    top:-5px;

}

.polaroids li:nth-child(5n) a{

    -webkit-transform:rotate(5deg);

    -moz-transform:rotate(5deg);

    -ms-transform:rotate(5deg);

    transform:rotate(5deg);

    position: relative;

    right:5px;

}

.polaroids li:nth-child(8n) a{

    position: relative;

    top:8px;

    right:5px;

}

.polaroids li:nth-child(11n) a{

    position: relative;

    top:3px;

    right:-5px;

}

.polaroids li a:hover{

    -webkit-transform:scale(1.25);

    -moz-transform:scale(1.25);

    -ms-transform:scale(1.25);

    transform:scale(1.25);

    -webkit-box-shadow:0 3px 6px rgba(0,0,0,.5);

    -moz-box-shadow:0 3px 6px rgba(0,0,0,.5);

    -o-box-shadow:0 3px 6px rgba(0,0,0,.5);

    box-shadow:0 3px 6px rgba(0,0,0,.5);

    position: relative;

    z-index: 5;

}

.polaroids li.messy a{margin-top:-375px;margin-left:160px;

    -webkit-transform:rotate(-5deg);

    -moz-transform:rotate(-5deg);

    -ms-transform:rotate(-5deg);

    transform:rotate(-5deg);

}

</style>

<body>

<ul class="polaroids">

            <li><a href="#" title="Roelan"><img src="data:images/image-01.jpg" alt="Roeland!"></a></li>

            <li><a href="#" title="Discus"><img src="data:images/image-02.jpg" alt="Discussion"></a></li>

            <li><a href="#" title="A Hear"><img src="data:images/image-01.jpg" alt="A Hearty Laugh"></a></li>

            <li><a href="#" title="Evil M"><img src="data:images/image-02.jpg" alt="Evil Matt Coding"></a></li>

            <li><a href="#" title="Scribb"><img src="data:images/image-01.jpg" alt="Scribbles"></a></li>

            <li><a href="#" title="Amanda"><img src="data:images/image-02.jpg" alt="Amanda Glares..."></a></li>

            <li><a href="#" title="The Do"><img src="data:images/image-01.jpg" alt="The Dougernaut"></a></li>

            <li><a href="#" title="I See "><img src="data:images/image-02.jpg" alt="I See You!"></a></li>

            <li><a href="#" title="Rock H"><img src="data:images/image-01.jpg" alt="Rock Hard Balls"></a></li>

            <li><a href="#" title="Bocce "><img src="data:images/image-02.jpg" alt="Bocce Ball"></a></li>

            <li><a href="#" title="Boris "><img src="data:images/image-01.jpg" alt="Boris "Tatooine""></a></li>

            <li><a href="#" title="Sneake"><img src="data:images/image-02.jpg" alt="Sneakers & Stilettos"></a></li>

        </ul>

        <ul class="polaroids" style="width:280px;">

            <li><a href="#" title="Roelan"><img src="data:images/image-01.jpg" alt="Roeland!"></a></li>

            <li><a href="#" title="Discus"><img src="data:images/image-02.jpg" alt="Discussion"></a></li>

            <li class="messy"><a href="#" title="A Hear"><img src="data:images/image-01.jpg" alt="A Hearty Laugh"></a></li>

        </ul>

</body>

CSS 几款比较常用的翻转特效的更多相关文章

10 款精美的 CSS3 全新特效
大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...
类似 Google Tips 页面的卡片式提示和翻转特效
这款 jQuery 插件用于实现类似 Google Tips 页面的卡片式提示和翻转的交互特效.你可以根据自己的需要定制动画效果参数,定义回调函数来控制行为.因为使用了 CSS3,所以只支持 Chro ...
基于css3的文字3D翻转特效
一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="compo ...
18款js和jquery文字特效代码分享
18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码原生JS鼠标悬停文字球状放大显示效果代码原生js文字动画圆形 ...
Magic CSS3 一款独特的CSS3动画特效包
插件描述: Magic CSS3 Animations 动画是一款独特的CSS3动画特效包,你可以自由地使用在您的网页中.只需简单的在页面上引入 CSS 文件: magic.css 或者压缩版本 ...
基于jQuery图片弹出翻转特效代码
分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 在线预览源码下载实现的代码. html代 ...
CSS样式有哪些常用的属性？
一般的一个DIV的CSS设置属性有:margin,padding,width,height,font-size,text-align,background,float,border CSS样式有哪些常 ...
本周推荐7款CSS3实现的动态特效
大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...
9款很酷炫jQuery/HTML5特效应用有源码哦~
目前最流行的网页特效应用当属jQuery和HTML5的特效应用了,它们可以帮你快速实现网页中的各种特效设计.本文就为了收集了9款非常酷炫的jQuery/HTML5特效应用,可以很方便的 ...

随机推荐

POJ 1298
#include<iostream>// chengdacaizi 注释!2008 11 05 #include<string> using namespace std; in ...
用Lingo求解线性规划问题
第一步:输入目标条件和约束条件.每行以分号隔开.然后点击工具栏上的Solve按钮,或Lingo菜单下的Solve子菜单. 第二步:检查report中的结果. 默认情况下,Lingo不进行灵敏度分析. ...
(转) centos7下创建mysql5.6多实例
原文:http://blog.csdn.net/a1010256340/article/details/77483504 一.mysql安装目录说明mysql5.6以二进制安装包安装在/data/my ...
Linux驱动：LCD驱动测试
(1) 进入内核源码目录中,make menuconfig -> Device Drivers -> Graphics support -> [M]Support for frame ...
Java之集合(二)ArrayDeque
转载请注明源出处:http://www.cnblogs.com/lighten/p/7283928.html 1.前言上章讲解了Java中的集合接口和相关实现抽象类,本章开始介绍一些具体的实现类,第 ...
Aop学习笔记系列一
一.Aop解决了什么问题? 1.在说解决了什么问题之前,先介绍一些关键的知识点 a.功能需求:功能需求指项目中的增值需求,比如业务逻辑,UI,持久化(数据库). b.非功能需求:项目中次要的,但却不可 ...
expect安装和使用
Expect是一个我们常在shell交互时常用到的工具,它主要由expect-send组成.Expect是等待输出内容中的特定字符.然后由send发送特定的相应.Expect的工作流程类似于:小明和小 ...
Smali 语法文档
可以选择保存成pdf格式,查询起来挺方便的 if v0==0 go cond_0 if-eqz v0, :cond_0 if v0!=0 go cond_0 if-nez v0, :cond_0 ...
Nginx使用记录
配置常见解释: ########### 每个指令必须有分号结束.################# #user administrator administrators; #配置用户或者组,默认为no ...
Node.js之Express一
前面也了解了HTTP模块,但它并不支持session.cookie等.Express是对HTTP模块的封装,同时也支持session这些,使用起来也更好用.Express更有点像IIS服务器.它也是属 ...

CSS 几款比较常用的翻转特效

CSS 几款比较常用的翻转特效的更多相关文章

随机推荐

热门专题