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

随机推荐

linux中的tar命令的使用
参考网址: https://www.cnblogs.com/newcaoguo/p/5896975.html https://www.cnblogs.com/xccjmpc/p/6035397.htm ...
【Java并发编程】：使用synchronized获取互斥锁
在并发编程中,多线程同时并发访问的资源叫做临界资源,当多个线程同时访问对象并要求操作相同资源时,分割了原子操作就有可能出现数据的不一致或数据不完整的情况,为避免这种情况的发生,我们会采取同步机制,以确 ...
Python -- Gui编程 -- MFC的使用
1.消息框 mfcDialog.py import win32ui import win32con from pywin.mfc import dialog class MyDialog(dialog ...
Phoenix 4.8
From v4.8.0 onwards, user can enable to map it’s schema to the namespace so that any table created w ...
Linux笔记：vi常用命令
vi编辑器是所有Unix及Linux系统下标准的编辑器,在很多时候我们都需要使用vi修改服务端配置,vi其实非常强大,只要命令使用熟练的情况下,编辑速度并不亚于现在的图形化编辑器,这里简单地介绍一下它 ...
free -m内存使用详解
第一部分Mem这行:total -> 内存总数: 32014M=32Gused -> 已经使用的内存数: 7665Mfree -> 空闲的内存数: 24349Mshared -> ...
windows下mysql配置，my.ini配置文件
基本配置,这个配置可以直接复制到mysql根目录下了my.ini文件中, [client] port=3306 [mysql] no-beep # default-character-set= [my ...
Ubuntu系统下开发人员常用工具、命令和技巧
在新的Ubuntu系统安装完成后,开发人员一般需要下载.安装一些必备的工具,并进行一系列的环境配置等操作,本文对此做出一些总结,方便今后新开发环境的初始化. 一.文件常用安装目录和命令一般的deb包 ...
剑指offer62：二插搜索树的第k个节点
题目描述: 给定一颗二叉搜索树,请找出其中的第k大的结点.例如, 5 / \ 3 7 /\ /\ 2 4 6 8 中,按结点数值大小顺序第三个结点的值为4. 中序遍历 /* struct TreeNo ...
ibatis Dynamic总结(ibatis使用安全的拼接语句，动态查询)
ibatis中使用安全的拼接语句,动态查询,ibatis比JDBC的优势之一,安全高效说明文字在注释中一.引入一个小例子 <select id="selectAllProduc ...

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

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

随机推荐

热门专题