quill鼠标悬浮 出现提示_HTML5 鼠标进入方向敏感的悬停填充动效

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Ubuntu:700);

* {

margin: 0;

padding: 0;

border: 0;

text-decoration: none;

box-sizing: border-box;

overflow: auto;

}

body {

font: 2vw 'Ubuntu', sans-serif;

width: 100%;

height: 100%;

background: #be374e;

background-repeat: no-repeat;

background-attachment: fixed;

background-image: -webkit-linear-gradient(left bottom, rgba(44, 33, 33, 0.5), #0f0b0b);

background-image: linear-gradient(to right top, rgba(44, 33, 33, 0.5), #0f0b0b);

background-image: -moz-linear-gradient(to right top, rgba(44, 33, 33, 0.5), #0f0b0b);

}

h3 {

color: #8c8c8c;

text-align: center;

margin-top: 5%;

text-shadow: 1px 1px rgba(13, 12, 12, .1), 2px -2px rgba(13, 12, 12, .1);

}

button {

display: block;

text-transform: uppercase;

position: relative;

margin: 5% auto;

width: 15%;

cursor: pointer;

color: #8c8c8c;

background: transparent;

border: 1px solid rgba(64, 64, 64, .5);

text-align: center;

font-size: 1.5vw;

font-weight: bold;

padding: 1.5vw 0;

text-shadow: 1px 1px rgba(13, 12, 12, .3), 2px 2px rgba(13, 12, 12, .3);

overflow: hidden;

-webkit-transition: all 0.3s ease-in;

transition: all 0.3s ease-in;

}

button:hover {

color: rgba(38, 38, 38, .5);

}

button:focus {

color: #0d0d0d;

}

.blob {

z-index: -1;

position: absolute;

width: 2px;

height: 2px;

margin-left: 0;

margin-top: 0;

background: #fbe151;

border-radius: 50%;

border-color: #fbe151;

border-width: 1px;

border-style: solid;

-webkit-transition: border-width 0.7s ease-in-out, margin-left 0.7s ease-in-out, margin-top 0.7s ease-in-out;

transition: border-width 0.7s ease-in-out, margin-left 0.7s ease-in-out, margin-top 0.7s ease-in-out;

}

.expand {

border-color: #fbe151;

border-width: 300px;

border-style: solid;

-webkit-transition: border-width 0.7s ease-in-out, margin-left 0.7s ease-in-out, margin-top 0.7s ease-in-out;

transition: border-width 0.7s ease-in-out, margin-left 0.7s ease-in-out, margin-top 0.7s ease-in-out;

margin-left: -300px;

margin-top: -300px;

}

.green {

border-color: #04ae5f;

}

.pink {

border-color: #bd0f77;

}