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特效应用,可以很方便的 ...

随机推荐

无apk，怎么获取app的activity
在做app自动化测试之前,有个前提条件,就是要获取当前app的包名和当前活动的activity.如果有提供了.apk,就可以直接通过adb命令获取到包名和欢迎页面:有种软件是手机自带的的,我们不知道a ...
C# 对象哈希码
FCL的设计者认为,如果能将任何对象的任何实例放到哈希集合中,能带来很多好处.但是这里说一点,还是会存在,哈希码类似的情况,这一点大型网站架构这本书中有介绍,最好做下MD5算法.为此,System.O ...
Css权重解析
Css权重解析关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准具体规范入如下: spec ...
webbench的安装
1.下载webbench包: 2.下载完毕后,在linux中安装 root@jack-desktop:~/software# tar xvzf webbench-1.5.tar.gz root ...
Maven启动代理服务器
0.什么叫代理服务器? 代理服务器英文全称是(Proxy Server),其功能就是代理网络用户去取得网络信息.形象的说:它是网络信息的中转站. 代理服务器就好象一个大的Cache,这样就能显著提高浏 ...
wordpress 后台404解决办法
1.vim /usr/local/nginx/conf/wordpress.conf2.rewrite /wp-admin$ $scheme://$host$uri/ permanent;3.ngni ...
VMware Workstation 11 中 Ubuntu 14.04 的 VMware Tools 问题：没有显示共享文件夹
症状:主要表现在Win7中用VM11安装的Ubuntu14.04中,安装完自带的VMware Tools之后,/mnt/hgfs 中没有前面已经设置好的共享文件夹. 仔细查看了安装过程,发现在 ...
Django如何让未登录的用户自动跳转至登录页
有多种方法可以实现: 使用Django自带的用户认证 from django.contrib.auth.decorators import login_required @login_required ...
springboot-23-aspectj日志记录及threadlocal内存泄漏
对于请求参数的处理和响应, 如果在代码中体现日志会显得很繁琐, 普遍的解决方案是使用spring的切面方案去解决. 这儿使用的是springboot的切面: http://www.cnblogs.co ...
面试：C/C++常见库函数实现
1. void *mymemcpy(void *dest, const void* src, size_t n): 内存拷贝函数,memcpy函数的功能是从源src所指的内存地址的起始位置开始拷贝n个 ...

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

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

随机推荐

热门专题