360度旋转怎么写css,纯css3实现的360度翻转按钮
今天要给大家分享的是由css3实现的翻转360动画按钮。之前已为大家分享了好几款css3按钮,大家可以点击链接进去找一找适合自己的。哈哈。下面先为大家上效果图:
不错吧,下面是实现的代码。
html代码:
- Search
- Gears
- RSS
- Rocket
css代码:
ul.flatflipbuttons
{
margin: 0;
padding: 0;
list-style: none;
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 10000px;
perspective: 10000px;
}
ul.flatflipbuttons li
{
margin: 0;
display: inline-block;
width: 100px; /* dimensions of buttons. */
height: 100px;
margin-right: 15px; /* spacing between buttons */
background: white;
text-transform: uppercase;
text-align: center;
}
ul.flatflipbuttons li a
{
display: table;
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */
width: 100%;
height: 100%;
margin-bottom: 4px;
color: black;
background: #3B9DD5;
text-decoration: none;
outline: none;
-webkit-transition: all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
ul.flatflipbuttons li:nth-of-type(1) a
{
color: white;
background: #3B9DD5;
}
ul.flatflipbuttons li:nth-of-type(2) a
{
background: #A1CD3A;
}
ul.flatflipbuttons li:nth-of-type(3) a
{
background: #80C5EC;
}
ul.flatflipbuttons li:nth-of-type(4) a
{
color: white;
background: #635746;
}
ul.flatflipbuttons li:nth-of-type(5) a
{
background: #F2C96D;
}
ul.flatflipbuttons li a span
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
ul.flatflipbuttons li b
{
/* CSS for text beneath button */
display: block;
position: relative;
width: 100%;
opacity: 0;
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */
-moz-transition: all 300ms ease-out 0.2s;
transition: all 300ms ease-out 0.2s;
}
ul.flatflipbuttons li a img
{
/* CSS for image if defined inside button */
border-width: 0;
vertical-align: middle;
}
ul.flatflipbuttons li:hover a
{
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #c1e4ec; /* bgcolor of button onMouseover*/
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
ul.flatflipbuttons li:hover a span
{
color: black; /* color of icon font onMouseover */
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
transform: rotateY(180deg);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
ul.flatflipbuttons li:hover b
{
opacity: 1;
}
/* CSS for 2nd menu below specifically */
ul.second li a
{
background: #eee !important;
}
ul.second li a:hover
{
background: #ddd !important;
}
360度旋转怎么写css,纯css3实现的360度翻转按钮相关推荐
- 纯css3实现的鼠标悬停动画按钮
今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 在线预览 源码下载 实现的代码. html代码: < ...
- html 鼠标图标做成动画效果,纯css3实现的鼠标悬停动画按钮
今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 实现的代码. html代码: 复制代码 代码如下: css3代 ...
- html5 css3鼠标滑过效果,Hover.css纯CSS3鼠标滑过特效动画库
Hover.css是一款非常简单实用的纯CSS3鼠标滑过特效动画库.有100多种效果可以选择,包括:2D动画.背景动画.边框动画.图标动画.发光渐变.阴影.对话框.折角等100多种特效. 使用方法 首 ...
- 轮回眼css,纯css3制作写轮眼开眼及进化过程[转]_html/css_WEB-ITnose
目前已经测试 IE10.Firefox浏览器.Chrome浏览器.Opera浏览器.360浏览器(两种模式)兼容已通过. 温馨提示:以上浏览器版本号均最新的:动画过程中每个阶段大约会停留5秒钟,希望你 ...
- css纯代码实现圆边框和圆按钮
一.CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: * 减少维护的工作量.图片文件的生成.更新. ...
- jQuery 图像 360 度旋转插件
13 款最热门的 jQuery 图像 360 度旋转插件推荐 时间:02月07日 在 web 页面上使用 jQuery 图像 360 度旋转插件是最美也是最方便的显示图像的方式.这些超级棒的 360° ...
- 推荐10款纯css3实现的实用按钮
在2014年的双11即将来临之季,爱编程小编为大家整理10款纯css3实现的按钮.希望这对坚守在前端的码农们有所帮助.亲,如果你有好的资源也可在本文留言,让从事编码的程序员们抱团.工作更轻松. No1 ...
- 预警展示样式html,纯css3 Tooltip工具提示样式
microtip.css是一款纯css3 Tooltip工具提示样式.microtip.css不用依赖任何js文件,就可以生成时尚的Tooltip效果.它是轻量级的,压缩后的版本小于1kb. 安装 可 ...
- 18个强大的纯CSS3动画案例分享
编辑整理 | web前端开发 在之前,我也分享过很多关于CSS3,HTML5的动画案例,今天我要与你分享的这18个动画案例,也是比较炫酷的,可以实现很多交互,这些CSS3动画,可以给你的网页增添不少趣 ...
最新文章
- 三下乡辅导孩子计算机知识,【青春“三下乡”】普及家庭教育知识,共促孩子健康成长...
- 使用ansible部署安装corosync+pacemaker
- CMM能力成熟度模型
- php连接MYSQL(2)
- Oracle的闪回特性之恢复truncate删除表的数据
- Linux下使用Nexus搭建Maven私服
- json里面的list数据取不出来_[工具]用kaggle API下载数据集
- 豆瓣9.0,35万读者“搜不到信息”的神秘作者,我们帮你找到了
- Linux下MongoDB非正常关闭启动异常解决方法
- 史上最全40道dubbo面试题
- el-table的使用总结
- ITIL学习笔记——核心流程之:变更管理
- 微信小程序前期申请企业认证、后期提审发布流程
- 解决笔记本电脑使用网线正常,使用无线网络速度慢的问题
- [附源码]计算机毕业设计springboot基于微信小程序的网络办公系统
- 评分卡--基础分、基准分、PDO、WOE、补偿、刻度 行可可
- vivado与modelsim联合仿真遇到的问题2
- Linux - 进程
- 如何给U盘或移动硬盘分配固定盘符
- Matlab报错:错误使用 rgb2gray>parse_inputs (第 79 行) MAP 必须为 m x 3 的数组。请对 RGB 和灰度图像使用 im2gray。