HTML5技术

10种非常值得收藏的csshover效果 - 张三木

字号+ 作者：H5之家 来源：H5之家 2017-02-16 12:01 我要评论( )

!DOCTYPE html html lang="en" head meta charset="UTF-8" / titlelogin/title style type="text/css" media="screen" /* 公用样式 */ body { margin: 0; height: 0; background-color: #F1F1F1; } .warp { width: 250px; height: 150px; background-color:

<!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>

　

10种非常值得收藏csshover效果张三木三

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 15款值得开发者一试的最新的前端框架 - 梦想天空（山边小溪）

    15款值得开发者一试的最新的前端框架 - 梦想天空（山边小溪）

    2016-06-01 16:00

  • 几个非常吸引人眼球的CSS3按钮和导航 - jerrylsxu

    几个非常吸引人眼球的CSS3按钮和导航 - jerrylsxu

    2016-05-23 17:00

  • 8个非常个性化的CSS3单/复选框 - 帅的相对论

    8个非常个性化的CSS3单/复选框 - 帅的相对论

    2016-01-26 14:00

  • JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享（你值得拥有） - 懒得安分

    JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享（你值得

    2015-12-20 19:54

网友点评
精彩导读
Omi教程-组件通讯 - 【当耐特】

Omi教程-组件通讯 - 【当耐特】

java 企业网站源码模版 有前后台 springmvc SSM 生成静态化 - 2815147961

java 企业网站源码模版 有前后台 springmvc S

H5 颜色属性 - 甘林梦

H5 颜色属性 - 甘林梦

【Ionic+AngularJS 开发】之『个人日常管理』App（二） - Glife

【Ionic+AngularJS 开发】之『个人日常管理』

[H5]range对象的createRange方法 - Aqiaoba

[H5]range对象的createRange方法 - Aqiaoba

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by H5CN 备案： 黔ICP备15004751-2
HTML5入门 HTML5技术 canvas教程 专题学习