基于css3的鼠标滑动按钮动画之CSS--续

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

btn2

/*--按钮1--*/
.container1 {width:200px;display:block;margin:20px auto;position:relative;font-family:droid arabic kufi;
}
.con_down1 {display:block;cursor:pointer;background-color:#F6EB96;width:190px;height:50px;padding-left:10px;padding-top:5px;text-align:left;border-bottom:4px solid #D8B83C;border-radius:5px;position:relative;line-height:50px;
}
.con_down1 .fa-download{position:absolute;right:10px;top:15px;color:#895D0A;
}
.con_down1 h4 {color:#895D0A;text-transform:uppercase;margin:0;
}
.sizes1 h5 {margin:0;
}
.sizes1 {background-color:#E3E3E3;width:100px;height:30px;z-index:-9;padding-top:2px;border-bottom:4px solid #AAA9A9;position:absolute;top:13px;left:20px;transition:.5s all ease-in-out;
}
.size {line-height:30px;text-align:center;color:#4B4B4B;
}
.sizes_abs1 {background-color:#F6EB96;cursor:pointer;width:20px;border-bottom:4px solid #D8B83C;border-bottom-left-radius:5px;border-top-left-radius:5px;height:55px;position:absolute;top:-13px;left:-20px;z-index:2;
}
.container1:hover .sizes1 {left:-100px;
}
.container1:hover .con_down1 {background-color:#F1DD5E;border-bottom-left-radius:0;border-top-left-radius:0;
}
.container1:hover .sizes_abs1 {background-color:#F1DD5E;
}/*--按钮2--*/
.container2 {width:200px;display:block;margin:20px auto;position:relative;font-family:droid arabic kufi;
}
.con_down2 {display:block;cursor:pointer;background-color:#F6EB96;width:190px;height:50px;padding-left:10px;padding-top:5px;text-align:left;border-bottom:4px solid #D8B83C;border-radius:5px;position:relative;line-height:50px;transition:.5s all ease-in-out;
}
.con_down2 .fa-download {position:absolute;right:10px;top:15px;color:#895D0A;
}
.con_down2 h4 {color:#895D0A;text-transform:uppercase;margin:0;
}
.sizes2 h5 {margin:0;
}
.sizes2 {background-color:#E3E3E3;width:100px;height:30px;z-index:-9;position:absolute;bottom:22px;right:50%;margin-right:-50px;transition:.5s all ease-in-out;
}
.size {line-height:30px;text-align:center;color:#4B4B4B;
}
.sizes_abs2 {background-color:#F6EB96;cursor:pointer;width:200px;border-bottom:4px solid #D8B83C;border-bottom-left-radius:5px;border-bottom-right-radius:5px;height:20px;position:absolute;left:-50px;bottom:-22px;z-index:2;
}
.container2:hover .sizes2 {bottom:-30px;
}
.container2:hover .con_down2 {background-color:#F1DD5E;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;
}
.container2:hover .sizes_abs2 {background-color:#F1DD5E;
}

btn5

/* Custom Button */ 
.whitebutton {margin: 0 auto;width: 200px;
}
.whitebutton a {background: #dddddd;color: #666;display: block;font-size: 17px;font-weight: 700;font-family: 'Droid Arabic Kufi',Verdana,sans-serif;height: 50px;line-height: 50px;text-align: center;text-decoration: none;text-transform: uppercase;width: 200px;position: relative;z-index: 2;
}
.whitebutton a:before {content: '\f019';font-family: FontAwesome;font-weight: normal;padding: 8px;margin-left: 0px;margin-right: 30px;
}
.whitebutton span {background: #444;color: #fff;display: block;font-size: 12px;font-family: 'Droid Arabic Kufi', Verdana,sans-serif;height: 40px;line-height: 40px;text-align: center;width: 200px;z-index: 1;text-transform: uppercase;font-weight: bold;
}
.whitebutton .up {height: 40px;background: #e25734;margin: 0px auto;opacity: 0;border-radius: 0 0 5px 5px;transform: translate(0,-50px);transition: 350ms;
}
.whitebutton .down {height: 40px;margin: -40px auto;opacity: 0;border-radius: 5px 5px 0 0;transform: translate(0,-50px);transition: 350ms;
}
.whitebutton .down:before {content:'\f14a';font-family: FontAwesome;font-weight: normal;margin-left: -6px;color: #aaa;
}
.whitebutton:hover .up {opacity: 1;transform: translate(0,0);
}
.whitebutton:hover .down {opacity: 1;transform: translate(0,-90px);
}
.whitebuttondemo {margin: 20px auto;padding: 20px 0;width: 200px;
}
.whitebuttondemo a {background: #e25734;color: #fff;display: block;font-size: 17px;font-weight: 700;font-family:'Droid Arabic Kufi',Verdana,sans-serif;height: 50px;line-height: 50px;text-align: center;text-decoration: none;text-transform: uppercase;width: 200px;position: relative;z-index: 2;transition: 350ms;
}
.whitebuttondemo a:before {content:'\f002';font-family: FontAwesome;font-weight: normal;padding: 8px;margin-left: 0px;margin-right: 30px;
}
.whitebuttondemo a:hover {color: #fff;
}
.whitebuttondemo span {background: #444;color: #fff;display: block;font-size: 12px;font-family: 'Droid Arabic Kufi', Verdana,sans-serif;height: 40px;line-height: 40px;text-align: center;width: 200px;z-index: 1;text-transform: uppercase;font-weight: bold;
}
.whitebuttondemo .up {background: #444;margin: 0px auto;opacity: 0;border-radius: 0 0 5px 5px;transform: translate(0,-50px);transition: 350ms;
}
.whitebuttondemo:hover .up {opacity: 1;transform: translate(0,0);
}

 focus

.zoomeffect img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}
.zoomeffect img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

 

转载于:https://my.oschina.net/u/1994482/blog/468385

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/297077.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

rabbitmq入门_Rabbit MQ 入门

Rabbit MQ是一个通用的消息中间件,支持AMQP,STOMP,MQTT等多种协议安装#在OSX下可以使用如下命令来安装 rabbitmqbrew install rabbitmq基本命令#ls -al ~/rabbitmq/3.7.14/sbin/total 1104drwxr-xr-x 10 jet admin 320 May 19 14:35 .d…

HDOJ1860 ( 统计字符 ) 【水题】

Problem : 1860 ( 统计字符 ) Judge Status : AcceptedRunId : 5940488 Language : C Author : qq1203456195Code Render Status : Rendered By HDOJ C Code Render Version 0.01 Beta 1 #include <stdio.h>2 #include <string.h>3 char f[6],c[81];4 in…

94年出生,她们如今都是985高校博士生导师!

全世界只有3.14 % 的人关注了爆炸吧知识鱼羊 萧萧 发自 凹非寺量子位 报道 | 公众号 QbitAI94年出生、博士研究方向与材料相关、目前都成了985重点高校的博士生导师。拥有相同经历的两个女生&#xff0c;概率有多大&#xff1f;就在今年&#xff0c;26岁的夏娟和李晟曼&#xf…

IBM沃森为存储系统开发人员带来的启发

前一段时间&#xff0c;IBM 沃森参加了CBS的益智节目《危险边缘》(Jeopardy)&#xff0c;这是他在全国观众面前首次亮相。确切地说&#xff0c;站在中央舞台选手答题台后面的IBM沃森实际上 是不断闪烁的虚拟头像。尽管如此&#xff0c;摆在沃森面前的答题按钮却是如假包换的&am…

01Prism WPF 入门实战 - 项目准备

1.概要这一系列将进行PrismWPF技术的实战讲解。实战项目内容选型为Email邮件收发的客户端&#xff08;WeMail&#xff09;&#xff0c;项目结构简单方便大家理解。相关技术&#xff1a;C#、WPF、Prism软件开发环境&#xff1a;VS2019 、 .NET5 、 windows11需掌握技能&#xf…

php上传文件程序,php 文件上传程序(二款简单文件上传程序)_PHP教程

if(!$uploadaction):?>文件上载界面else:?>文件上载代码$uploadaction0;echo "good!";$timelimit60; /*设置超时限制时间 缺省时间为30秒 设置为0时为不限时 */set_time_limit($timelimit);if(($uploadfile !"none" )){$uploadpathaddslashes(dirn…

预定义变量 - PHP手册笔记

原文:预定义变量 - PHP手册笔记预定义变量将所有的外部变量表示成内建环境变量&#xff0c;并且将错误信息表示成返回头。超全局变量是在全部作用域中始终可用的内置变量。在函数或方法中无需执行global $variable&#xff0c;就可以访问它们。 $GOBALS引用全局作用域中可用的全…

redis查看key的过期时间_面试官:你在Redis中设置过带过期时间的Key吗?

点击上方小伟后端笔记关注公众号每天阅读Java干货文章熟悉Redis的同学应该知道&#xff0c;Redis的每个Key都可以设置一个过期时间&#xff0c;当达到过期时间的时候&#xff0c;这个key就会被自动删除。在为key设置过期时间需要注意的事项1、 DEL/SET/GETSET等命令会清除过期时…

Hadoop学习系列之PageRank

昨晚上不想做其他的事&#xff0c;突然想起来好久都没更新博客了&#xff0c;shell也差不多学完了&#xff0c;只不过学习的时候都是只带着书出去了&#xff0c;改天总结总结。Hadoop么&#xff0c;黄宜华老师讲完了&#xff0c;自己也马马虎虎快学完了&#xff0c;也是没总结&…

您的屁股发热严重,请降温后使用。

▲ 点击查看不是坐在办公椅上的屁股都渴望自由&#xff0c;而是——最近天越来越热&#xff0c;屁股捂在椅子上&#xff0c;既不散热也不排汗&#xff0c;比戴口罩闷出痱子还难受&#xff0c;实在是坐不住。。最尴尬的就是站起来裤子时常黏在屁股缝里&#xff0c;难不成每次还要…

C# 正则表达式编写及验证方法

01—前言正则表达式应用很广泛&#xff0c;应该大多人都接触过了&#xff0c;这个语法规则既多又凌乱&#xff0c;每次用的时候都得重新看一遍语法&#xff0c;真的是让人头疼啊&#xff01;但是实际上我们并不要掌握很多的符号用法规则&#xff0c;牢记最常用的几个就能应付很…

Domino Web开发规则之二:DOMINO与开发相关的管理规范

1.服务器HTTP优化设置 调整活动线程数&#xff0c;HTTP服务器可以同时处理的请求数&#xff0c;而非连接数、会话数 单CPU服务器<64 多CPU服务器<80 并发运行Web代理 确保Web代理是线程安全的情况下&#xff0c;可以启用来提高性能。 服务器文档-> Internet协议 ->…

python从入门到爬虫_python爬虫从入门到放弃(一)之初识爬虫

什么是爬虫&#xff1f;网络爬虫(又被称为网页蜘蛛&#xff0c;网络机器人&#xff0c;在FOAF社区中间&#xff0c;更经常的称为网页追逐者)&#xff0c;是一种按照一定的规则&#xff0c;自动地抓取万维网信息的程序或者脚本。另外一些不常使用的名字还有蚂蚁、自动索引、模拟…

Linq-语句之Select/Distinct和Count/Sum/Min/Max/Avg

上一篇讲述了LINQ&#xff0c;顺便说了一下Where操作&#xff0c;这篇开始我们继续说LINQ to SQL语句&#xff0c;目的让大家从语句的角度了解LINQ&#xff0c;LINQ包括LINQ to Objects、LINQ to DataSets、LINQ to SQL、LINQ to Entities、LINQ to XML&#xff0c;但是相对来说…

【HDU】2795 Billboard

1 #include<cstdio>2 #define MAXN 2000103 #define MIN(a,b) ((a)>(b)?(b):(a))4 #define MAX(a,b) ((a)>(b)?(a):(b))5 int w,tree[MAXN<<2];6 inline void PushUp(int rt)7 {8 tree[rt]MAX(tree[rt<<1],tree[rt<<1|1]);9 } 10 void Bui…

老师一定没有教!9个数学速算技巧!看到第1个就跪了!

全世界只有3.14 % 的人关注了寄语 与世界上的其他学科一样&#xff0c;数学也有自己的奇妙之处。由于各种各样的原因&#xff0c;老师没有将这些秘密告诉我们。下面就是一些有趣的数学技巧&#xff0c;看完后你也许会爱上这门学科。▼不管是几个1的平方&#xff0c;都是有规律…

Java类的继承总结

本文主要是讲述Java类的继承&#xff0c;更多Java技术知识&#xff0c;请登陆疯狂软件教育官网。加疯狂软件官方微信号&#xff1a;fkitorg,免费赢大奖&#xff0c;有机会赢得iOS培训课程一套。  在生活中我们往往把许多东西归为一个整体&#xff0c;如球有篮球&#xff0c;足…

《程序员》杂志2011年第5期.pdf 下载链接 首发。

csdn《程序员》杂志2011年第5期.pdf 程序员 2011 5月刊 pdf 请下载后24H之后删除。购买原版。谢谢。 下载链接: http://ishare.iask.sina.com.cn/f/15850972.html

愚蠢的领导才会用程序员祭天!!

“人非圣贤&#xff0c;孰能无过网络上频频流出程序员误删线上数据库&#xff0c;造成XX公司XX万损失的新闻&#xff0c;进而牵扯出“杀一个程序员祭天”的妙语&#xff0c;虽然杀一个程序员比杀一个进程要难很多&#xff0c;但也充满着讽刺的味道。程序员每天都往返于代码和服…

一般将来时语法课教案_速看,如何在考场写出一篇脱颖而出的教案

面试最重要的考试环节就是试讲&#xff0c;而想要进行一次优秀的表演&#xff08;试讲&#xff09;&#xff0c;则需要一个过硬的剧本&#xff08;教案&#xff09;&#xff0c;那我们如何写出一篇完美教案呢&#xff1f;今天上元教师就教给大家10分钟速写一份教案的方法&#…