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

随机推荐

全屏背景图的实现及background的相关属性
今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的: (图一) ...
mysql层的内存分配
参考 http://www.cnblogs.com/justfortaste/p/3198406.html http://m.blog.csdn.net/blog/IT_PCode/17007833 ...
转MVC3介绍
第一节:Asp.Net MVC3项目介绍让我们先看一下,一个普通的Asp.Net MVC3项目的样例,如下图所示跟WebFrom还是有区别的,如果你已经了解Asp.Net MVC2的话,那就感觉异 ...
(转)Python——functools
原文:https://www.cnblogs.com/Security-Darren/p/4168310.html#t7 http://www.wklken.me/posts/2013/08/18/p ...
(转)python 判断数据类型
原文:https://blog.csdn.net/mydriverc2/article/details/78687269 Python 判断数据类型有type和isinstance 基本区别在于: t ...
EJB3 事物
在ejb3中事物分为两种类型:容器管理的事物(CMT).Bean管理的事物(BMT) 1.容器管理的事物(CTN) 是EJB默认的事物管理方式,即以对应的方法起始和结束来由EJB容器确定事务的始末边界 ...
Go语言学习笔记十：结构体
Go语言学习笔记十: 结构体 Go语言的结构体语法和C语言类似.而结构体这个概念就类似高级语言Java中的类. 结构体定义结构体有两个关键字type和struct,中间夹着一个结构体名称.大括号里面 ...
【云+社区极客说】新一代大数据技术：构建PB级云端数仓实践
本文来自腾讯云技术沙龙,本次沙龙主题为构建PB级云端数仓实践在现代社会中,随着4G和光纤网络的普及.智能终端更清晰的摄像头和更灵敏的传感器.物联网设备入网等等而产生的数据,导致了PB级储存的需求加大 ...
Linux skbuff注释笔记
SKB结构定义 /usr/src/linux/include/linux/skbuff.h sk_buff_head: struct sk_buff_head { //SKB的头结点 /* The ...
Spring学习之路
(一)搭建Spring.NET环境常见的DLL 1.spring.core --整个框架的基础,实现了依赖注入的功能 2.Spring.AOP--提供面向方面编程(aop)的支持 3.Spring.D ...

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

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

随机推荐

热门专题