效果图

各位长友，大家好！

今天给大家带来的源码是 13款鼠标划过特效CSS3样式源码！

大家可以自己搭配修改，应用到自己的项目中！

• 有想要文件版源码的朋友 可以来我的HTML5学习交流：581549454 里面都是做前端开发的，拒绝卖课和广告！纯学习交流，每天会上传一些优秀的作品和源码，欢迎初学者和大神们。

废话不多说，上源码！

CSS：

@import url(http://fonts.googleapis.com/css?family=Raleway:400,500,700,900|Dosis:800|Playfair+Display:400,400italic,900italic|Lora:700|Syncopate:700|Roboto+Condensed:300italic|Oswald:700);

@font-face {

font-weight: normal;

font-style: normal;

font-family: 'codropsicons';

src:url('../fonts/codropsicons/codropsicons.eot');

src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),

url('../fonts/codropsicons/codropsicons.woff') format('woff'),

url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),

url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');

}

*, *:after, *:before { box-sizing: border-box; }

.clearfix:before, .clearfix:after {display: table; content: ''; }

.clearfix:after { clear: both; }

body {

background: #fff;

color: #1e1a1b;

font-weight: 500;

font-size: 1em;

font-family: 'Raleway', Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

a {

outline: none;

color: #dd3e62;

text-decoration: none;

}

a:hover {

color: #1e1a1b;

}

a:focus {

outline: none;

}

.hidden {

height: 0;

width: 0;

overflow: hidden;

position: absolute;

}

/* Header */

.codrops-header {

padding: 2em 1em 4em;

text-align: center;

height: calc(100vh - 40px);

margin: 20px 20px 20px;

overflow: hidden;

position: relative;

display: -webkit-flex;

display: flex;

-webkit-flex-direction: column;

flex-direction: column;

-webkit-align-items: center;

align-items: center;

-webkit-justify-content: center;

justify-content: center;

background: url(../img/mouse.svg) no-repeat left 50% bottom 40px;

}

.codrops-header::before,

.codrops-header::after {

content: 'Lorizzleipsizzledolorcrazy amizzlefoshizzleizzleelit Nullizzlesapienvelizzle aliquetvolutpatfoshizzlefo shizzlemynizzlegravidafoshizzle Lorizzleipsizzledolorcrazy amizzlefoshizzleizzleelit Nullizzlesapienvelizzle aliquetvolutpatfoshizzlefo shizzlemynizzlegravidafoshizzle';

font-size: 13em;

line-height: 0.5;

letter-spacing: -15px;

z-index: 10;

text-align: justify;

pointer-events: none;

position: absolute;

background: #cdced2;

color: rgba(255,255,255,0.15);

font-family: 'Playfair Display', cursive;

font-weight: 900;

font-style: italic;

z-index: -1;

width: 120%;

height: 120%;

top: -10%;

left: -10%;

}

.codrops-header h1 {

margin: 0;

padding: 0 0 1em;

font-weight: 800;

font-size: 2.75em;

line-height: 1;

text-transform: uppercase;

letter-spacing: 3px;

color: #49484a;

}

.codrops-header h1 span {

font-style: italic;

font-family: 'Playfair Display', serif;

}

.codrops-header h1 .sub {

display: block;

padding: 0.75em 0;

color: #F9F9F9;

font-weight: 400;

font-size: 68%;

text-transform: none;

}

/* Top Navigation Style */

.codrops-links {

position: relative;

display: inline-block;

text-align: center;

white-space: nowrap;

-webkit-flex: none;

flex: none;

}

.codrops-links::after {

position: absolute;

top: 0;

left: 50%;

width: 1px;

height: 100%;

background: #fff;

content: '';

-webkit-transform: rotate3d(0,0,1,22.5deg);

transform: rotate3d(0,0,1,22.5deg);

}

.codrops-icon {

display: inline-block;

margin: 15px;

text-decoration: none;

}

.codrops-icon span {

display: none;

}

.codrops-icon:before {

margin: 0 5px;

text-transform: none;

font-weight: normal;

font-style: normal;

font-variant: normal;

font-family: 'codropsicons';

line-height: 1;

speak: none;

-webkit-font-smoothing: antialiased;

}

.codrops-icon--drop:before {

content: "\e001";

}

.codrops-icon--prev:before {

content: "\e004";

}

/* Grid */

.grid__item {

height: calc(100vh - 40px);

min-height: 460px;

max-width: calc(100vw - 40px);

background: #DDD;

margin: 20px;

padding: 100px 0;

z-index: 1;

position: relative;

text-align: center;

display: -webkit-flex;

display: flex;

-webkit-align-items: center;

align-items: center;

-webkit-justify-content: center;

justify-content: center;

-webkit-transform: translate3d(0,0,0); /* Solves Safari bug because of SVG clipping mask */

}

.grid__item p {

font-size: 1.5em;

font-weight: bold;

color: #777;

}

/* Background colors */

.color-1 { background: #E8E0DA; }

.color-2 { background: #576b67; }

.color-3 { background: #383A35; }

.color-4 { background: #333; }

.color-5 { background: #fda9a9; }

.color-7 { background: #cde7d3; }

.color-8 { background: #DCECDD; }

.color-9 { background: #dedbba; }

.color-10 { background: #222; }

.color-11 { background: #515151; }

/* Related demos */

.content--related {

padding: 3em 0;

text-align: center;

font-weight: bold;

}

.media-item {

display: inline-block;

padding: 1em;

vertical-align: top;

-webkit-transition: color 0.3s;

transition: color 0.3s;

}

.media-item__img {

max-width: 100%;

opacity: 0.3;

-webkit-transition: opacity 0.3s;

transition: opacity 0.3s;

}

.media-item:hover .media-item__img,

.media-item:focus .media-item__img {

opacity: 1;

}

.media-item__title {

margin: 0;

padding: 0.5em;

font-size: 1em;

}

@media screen and (max-width: 50em) {

.codrops-header {

padding: 3em 10% 4em;

}

.grid__item {

width: 100%;

}

}

@media screen and (max-width: 40em) {

.codrops-header h1 {

font-size: 1.85em;

}

}