10种非常值得收藏的csshover效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>login</title>
<style type="text/css" media="screen">
/* 公用样式 */
body {
margin: 0;
height: 0;
background-color: #F1F1F1;
}

.warp {
width: 250px;
height: 150px;
background-color: #5e7c87;
float: left;
margin: 15px 15px;
box-shadow: 10px 10px 5px #888888;
}

.sim-button {
line-height: 50px;
height: 50px;
text-align: center;
margin-right: auto;
margin-left: auto;
margin-top: 50px;
width: 60%;
cursor: pointer;
color: rgba(255, 255, 255, 1);
border: 1px solid rgba(255, 255, 255, 0.5);
}
/* 效果一 */

.button1 {
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

.button1:hover {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 20px;
}
/* 效果2 */

.button2 {
-webkit-transition: all 0.5s;
transition: all 0.5s;
overflow: hidden;
position: relative;
}

.button2:hover {
background-color: rgba(255, 255, 255, 0.2);
}

.button2>span {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

.button2:hover>span {
opacity: 0;
}

.button2::after {
content: attr(data-text);
width: 100%;
height: 100%;
position: absolute;
left: -50px;
top: 0;
opacity: 0;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

.button2:hover::after {
left: 0;
opacity: 1;
}
/* 效果三 */

.button3 {
-webkit-transition: all 0.5s;
transition: all 0.5s;
overflow: hidden;
position: relative;
}

.button3:hover {
background-color: rgba(255, 255, 255, 0.2);
}

.button3>span {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

.button3:hover>span {
opacity: 0;
}

.button3::after {
content: attr(data-text);
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
-webkit-transform: translate(-9%, -50%) rotate(-9deg);
transform: translate(-9%, -50%) rotate(-9deg);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

.button3:hover::after {
-webkit-transform: translate(0, 0) rotate(0deg);
transform: translate(0, 0)rotate(0deg);
opacity: 1;
}
/* 效果四 */

.button4 {
position: relative;
overflow: hidden;
}

.button4 span {
z-index: 2;
}

.button4::after {
content: "";
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
position: absolute;
left: 0;
top: 0;
background-color: rgba(255, 255, 255, 0.5);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

.button4:hover::after {
opacity: 1;
-webkit-transform: skewX(-180deg) scale(0.5, 1);
transform: skewX(-180deg)scale(0.5, 1);
}
/* 效果五 */

.button5 {
border: none;
position: relative;
}

.button5::before {
content: ‘‘;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 1px solid rgba(255, 255, 255, 0.5);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

.button5:hover::before {
opacity: 0;
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}

.button5::after {
content: ‘‘;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
background-color: rgba(255, 255, 255, 0.5);
-webkit-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

.button5:hover::after {
opacity: 1;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
/* 效果六 */

.button6 {
border: none;
position: relative;
}

.button6::before {
content: ‘‘;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

.button6:hover::before {
opacity: 0;
-webkit-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
}

.button6::after {
content: ‘‘;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
border: 1px solid rgba(255, 255, 255, 0.5);
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

.button6:hover::after {
opacity: 1;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
/* 效果七 27*/

.button7 {
border: 1px solid rgba(255, 255, 255, 0.5);
-webkit-transition: all 0.5s;
transition: all 0.5s;
overflow: hidden;
position: relative;
}

.button7:hover {
border: 1px solid rgba(255, 255, 255, 0);
}

.button7::before {
content: ‘‘;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: rgba(255, 255, 255, 0.5);
-webkit-transform: translate(-100%, -600%) rotate(9deg);
transform: translate(-100%, -600%) rotate(9deg);
-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

.button7:hover::before {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
/* 效果八 */

.button8 {
color: rgba(255, 255, 255, 1);
border: none;
position: relative;
}

.button8:hover>span {
letter-spacing: 2px;
}

.button8::before {
content: ‘‘;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: rgba(255, 255, 255, 0.5);
border-bottom-color: rgba(255, 255, 255, 0.5);
-webkit-transform: scale(0.1, 1);
transform: scale(0.1, 1);
}

.button8:hover::before {
opacity: 1;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}

.button8::after {
content: ‘‘;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(255, 255, 255, 0.25);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

.button8:hover::after {
opacity: 0;
-webkit-transform: scale(0.1, 1);
transform: scale(0.1, 1);
}
/* 效果九 */

.button9 {
color: rgba(255, 255, 255, 1);
border: none;
position: relative;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: rgba(255, 255, 255, 0.5);
border-bottom-color: rgba(255, 255, 255, 0.5);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

.button9:hover span {
letter-spacing: 2px;
}

.button9:hover {
border-top-color: rgba(255, 255, 255, 0);
border-bottom-color: rgba(255, 255, 255, 0);
}

.button9::before {
content: ‘‘;
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
z-index: 1;
-webkit-transition: all 0.3s;
transition: all 0.3s;
background-color: rgba(255, 255, 255, 0.5);
}

.button9:hover::before {
-webkit-transform: translate(-76px, 0) rotate(270deg);
transform: translate(-76px, 0)rotate(270deg);
}

.button9::after {
content: ‘‘;
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
z-index: 1;
-webkit-transition: all 0.3s;
transition: all 0.3s;
background-color: rgba(255, 255, 255, 0.5);
}

.button9:hover::after {
-webkit-transform: translate(76px, 0) rotate(180deg);
transform: translate(76px, 0) rotate(180deg);
}
/* 效果十 */

.button10 {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

.button10:hover {
-webkit-animation-name: move;
animation-name: move;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
background-color: rgba(255, 255, 255, 0.2);
}

@-webkit-keyframes move {
from,
11.1%,
to {
-webkit-transform: none;
transform: none;
}
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg)skewY(-12.5deg);
}
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg)skewY(6.25deg);
}
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg)skewY(-3.125deg);
}
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg)skewY(1.5625deg);
}
66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}

@keyframes move {
from,
11.1%,
to {
-webkit-transform: none;
transform: none;
}
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg)skewY(-12.5deg);
}
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg)skewY(6.25deg);
}
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg)skewY(-3.125deg);
}
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg)skewY(1.5625deg);
}
66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
</style>

</head>

<body>

<div class="warp">
<div class="sim-button button1">
<span>login1</span>
</div>
</div>
<div class="warp">
<div class="sim-button button2" data-text="login2">
<span>login2</span>
</div>
</div>
<div class="warp">
<div class="sim-button button3" data-text="login3">
<span>login3</span>
</div>
</div>
<div class="warp">
<div class="sim-button button4">
<span>login4</span>
</div>
</div>
<div class="warp">
<div class="sim-button button5">
<span>login5</span>
</div>
</div>
<div class="warp">
<div class="sim-button button6">
<span>login6</span>
</div>
</div>
<div class="warp">
<div class="sim-button button7">
<span>login7</span>
</div>
</div>
<div class="warp">
<div class="sim-button button8">
<span>login8</span>
</div>
</div>
<div class="warp">
<div class="sim-button button9">
<span>login9</span>
</div>
</div>
<div class="warp">
<div class="sim-button button10">
<span>login10</span>
</div>
</div>
</body>

</html>

时间： 2024-12-09 08:49:08

10种非常值得收藏的csshover效果的相关文章

Python爬虫解析网页的4种方式 值得收藏

用Python写爬虫工具在现在是一种司空见惯的事情,每个人都希望能够写一段程序去互联网上扒一点资料下来,用于数据分析或者干点别的事情. ? 我们知道,爬虫的原理无非是把目标网址的内容下载下来存储到内存中,这个时候它的内容其实是一堆HTML,然后再对这些HTML内容进行解析,按照自己的想法提取出想要的数据,所以今天我们主要来讲四种在Python中解析网页HTML内容的方法,各有千秋,适合在不同的场合下使用. 首先我们随意找到一个网址,这时我脑子里闪过了豆瓣这个网站.嗯,毕竟是用Python构建的网

10个Web前端值得收藏的背景全屏效果展示（附源码）（上）

作为一个前沿的 Web 开发者,对于 HTML5 和 现在流行的3D技术或多或少都有掌握.特别是在移动端大显身手.这篇文章挑选了10个绚丽的背景全景展示效果,希望对你有所帮助. 1.  JS图片背景全屏代码实现物理效果 玩法介绍:可以随意拖动鼠标.按住鼠标左键选中旋转物体.或者按住鼠标滑轮放大或者缩小,有不同的效果,赶紧来体验一下. 源码下载  /  在线演示 2.  CSS3学习 - 网站背景拉伸平铺jQuery插件 这个插件集成了一些非常好的 JavaScript 库,提供一个方便使用的文本

6种值得收藏的Web前端多彩按钮组件（上）

1. jQuery模拟skype按钮效果 源码下载/  在线演示 2.  CSS3动画暗角按钮 源码下载 /  在线演示 3.CSS3实现彩色凹凸按钮 源码下载/   在线演示 6种值得收藏的Web前端多彩按钮组件(上)

CSS3实现10种Loading效果

原文:CSS3实现10种Loading效果 昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… 第1种效果: 代码如下: <div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> &

分享10种风格迥异的全屏遮罩层效果

今天,我们想给大家分享一些全屏遮罩效果的灵感.像任何其它的UI组件一样,网页设计不断有新的趋势和风格出现,我们想尝试的遮罩有一些微妙的,还有奇特的效果.这些遮罩的特别之处在于,他们没有像模态窗口那样固定大小而是占据整个屏幕,因此创建效果时,人们必须考虑到这一点. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10

6种值得收藏的Web前端多彩按钮组件（下）

4.CSS3实现超酷下载按钮 能在支持 FireFox.Chrome.Safari.傲游.搜狗.360浏览器. 源码下载/   在线演示 5.  CSS3按钮生成器jQuery插件 源码下载 /  在线演示 6.  CSS3实现创意链接样式 源码下载/  在线演示 6种值得收藏的Web前端多彩按钮组件(下)

排毒清肠9个小偏方，值得收藏！

排毒清肠9个小偏方,值得收藏!上海疝气医院医生介绍:排毒清肠不一定要动刀,下面为大家介绍9种排毒清肠的小偏方,不妨来看一下. 1.早餐喝咖啡 (1)早上喝咖啡消肿:咖啡具有利尿的效果. (2)咖啡因刺激副交感神经,促进肠道的蠕动. (3)有些人喝冲泡式咖啡会觉得效果比较明显,因为冲泡式的咖啡因含量较高的关系. 2.早上空腹喝水法 (1)夜间肠胃都处于休息状态,早上未进食前喝水肠胃运作会比平常快速.建议早上空腹时喝两杯的温开水,一杯约240cc. (2)将玫瑰花和蜜枣干加开水泡开当水喝.蜜枣和玫瑰

mac设计师系列 Adobe “全家桶” 15款设计软件 值得收藏！

文章素材来源:风云社区.简书 文章收录于:风云社区 www.scoee.com,提供1700多款mac软件下载 Adobe Creative Cloud 全线产品均可开放下载(简称Adobe CC 全家桶),Adobe Creative Cloud 为多国语言版本,支持:中文,英文,韩文,日本等多国语言, 在安装的时候可以选择自己需要的语言安装. 下面,给大家简单介绍一下adobe全家桶. 1.Photoshop Adobe Photoshop,简称“PS”,是一个由Adobe Systems开

21个值得收藏的javas技巧

在本文中列出了21个值得收藏的Javascript技巧,在实际工作中,如果能适当运用,则大大提高工作效率. 1 Javascript数组转换为CSV格式 首先考虑如下的应用场景,有一个Javscript的字符型(或者数值型)数组,现在需要转换为以逗号分割的CSV格式文件.则我们可以使用如下的小技巧,代码如下: var fruits = ['apple', 'peaches', 'oranges', 'mangoes']; var str = fruits.valueOf(); 输出:apple,