CSS 几款比较常用的翻转特效
最近一直在忙着做项目,也没有及时的整理博客,今天项目展示结束了,感觉不尽如意,还是有点小小的失落,毕竟班长在我们组,没拿到第一有点对不住他们,通过这次项目,深深的感受到了团队合作的重要性,我们组三个人的脾气都算是比较好的,但是就算这样,我也曾经气的我的小伙伴一直出去吸烟,回头想想我做的太不对了,做项目的前两天,正好是我跟某人吵架了心情超级不好,所以一直处于神游状态,后面才渐渐进入了正常的工作状态,我其实特别感谢我的小伙伴,即使我语气态度都不好,他们都一直容忍我,希望我们可以一起愉快的度过剩下的四个月。。。。下面就是项目中我用到的两款特效 都是非常简单的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>
转载于:https://www.cnblogs.com/xiaodouding/p/6291137.html
CSS 几款比较常用的翻转特效相关推荐
- CSS 几款比较常用的翻转特效(转载)
第一个:360度翻转特效 <style> * {margin:0;padding:0; } .aa {width: 220px;height: 220px;margin: 0 auto;b ...
- css都能作哪些特效,推荐10款重量级CSS3的全新特效
大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...
- HTML+CSS实现菜单的3D翻转特效
HTML+CSS实现菜单的3D翻转特效 效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en"><he ...
- 8款设计师常用漂亮的HTML CSS表格样式
原来的地址: http://www.laozuo.org/2040.html 我们在布局网站的时候以前都可能直接用TABLE设计,如今都更流行使用CSS设计,这样对于网站结构更加友好和轻便.下面老左整 ...
- 110个常用的jquery特效和插件
为了方便网友们的学习jquery,在互联网中把网站常用到的特效和插件都收集起来打包,最后提供给大家下载,希望可以帮到网友们... 1.2款jQuery图片自动切换常用广告代码 2.jquery+cs ...
- html 图片旋转插件,jQuery插件expander实现图片翻转特效
分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 引入CSS和JS expander.min.js ...
- css3新动_10款重量级CSS3的全新特效 实现超酷前端动画效果
大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...
- 带翻转特效的会员登录注册html页面源码
大家好,今天给大家介绍一款,带翻转特效的会员登录注册html页面源码(图1).送给大家哦,获取方式在本文末尾. 图1 点击登录和注册切换时,带翻转特效(图2) 图2 源码完整,需要的朋友可以下载学习( ...
- 类似 Google Tips 页面的卡片式提示和翻转特效
这款 jQuery 插件用于实现类似 Google Tips 页面的卡片式提示和翻转的交互特效.你可以根据自己的需要定制动画效果参数,定义回调函数来控制行为.因为使用了 CSS3,所以只支持 Chro ...
最新文章
- turtlebot机器人模拟平台
- 1.7Oob 继承关系中构造方法的使用
- 如何使用Markdown写博客
- 读取mmdetection训练目标检测模型的日志文件(log.json)的各种AP值按epoch写入excel文件
- python1234出栈_Python数据结构与算法3——栈和队列
- 不重启服务如何定时更新进程中的一个对象
- Python_字符串
- 一文带你实现RPC框架
- Linux下二进制包安装postgresql10.4
- 现代web数据传输技术及数据格式
- .net知识和学习方法系列(二十五) .net中的windows service与服务操作
- linux ldap配置详解
- 对话《哥德尔、埃舍尔、巴赫:集异璧之大成》作者:现在的AI还不够看
- 最新emoji表情代码大全_git commit 时使用 Emoji ?
- QGIS快速提取建筑和道路矢量
- virtualbox突然打不开虚拟机解决方法
- 大型国企用泛微OA,让会务管理有序,让会议开展高效
- ndo2db: Warning: Retrying message send. This can occur
- 58同城智能推荐系统的演进与实践(转)
- 多个中通快运的物流情况是怎么批量查询并保存到电脑的