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

随机推荐

【BZOJ3456】轩辕朗的城市规划 EGF+多项式求ln
我们构造$f(i)$和$g(i)$. 其中$f(x)$表示由$x$个节点构成的无向简单连通图的个数. $g(x)$表示有$x$个节点构成的无向简单图(不要求连通)的个数. 显然,由$x$个节点构成的无 ...
【转】Unity Animator卡顿研究
Unity Animator卡顿研究发表于2017-07-26 点赞3 评论3 分享分享到 2.3k浏览想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏程序行业精英群 ...
yolov3源码分析keras（一）数据的处理
一.前言本次分析的源码为大佬复现的keras版本,上一波地址:https://github.com/qqwweee/keras-yolo3 初步打算重点分析两部分,第一部分为数据,即分析图像如何做等 ...
Flume搭建及学习(基础篇)
转载请注明原文出处:http://www.cnblogs.com/lighten/p/6830439.html 1.简介该文主要是翻译官方的相关文档,源地址点击这里.介绍一下Flume的一些基本知识 ...
C# 对象相等性判断和同一性判断
在日常开发中经常需要编写代码比较不同的对象.例如,有时需要将对象都放到一个集合中,并编写代码对集合中的对象进行排序.搜索或者比较. System.Object类有两个Equals方法,如下: 1.实例 ...
Vue中router两种传参方式
Vue中router两种传参方式 1.Vue中router使用query传参相关Html: <!DOCTYPE html> <html lang="en"> ...
Postman—authorization简介
Postman中的authorization 版权声明,参考: https://blog.csdn.net/qq_28284093/article/details/80416749 1.概述 Auth ...
Android 开发工具类 15_ MyAsyncTask
AsyncTask 对于生命周期较短且需要在UI上显示进度和结果的后台操作是很好的解决方案.然而,当 Activity 重新启动时,这种操作将不会持续进行,也就是说,AsyncTask 在设备的方向变 ...
在word中优雅地插入代码
PlanetB:带行号 http://www.planetb.ca/syntax-highlight-word Pygments(推荐):不带行号,多种样式可选 http://pygments.o ...
将已有Git库代码推送到新建库中
cd /path/to/your/git/repo/ git remote -v git remote rm origin git remote add origin ssh://abc@gmail. ...

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

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

随机推荐

热门专题