svg+jquery+TweenMax实现炫酷视觉差异鼠标交互图文效果代码
代码语言：html
所属分类：视觉差异
代码描述：svg+jquery+TweenMax实现炫酷视觉差异鼠标交互图文效果代码
代码标签： svg jquery TweenMax 炫酷 视觉差异 鼠标 交互 图文
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Lato|Playfair+Display:900" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css">
<link rel='stylesheet' href='https://use.typekit.net/ekp8ytl.css'>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.me-toggle {
position: fixed;
z-index: 9999;
top: 8px;
left: 8px;
display: none;
width: 48px;
height: 48px;
cursor: pointer;
outline: none;
border: none;
background: transparent;
padding: 0;
margin: 0;
overflow: visible;
}
@media only screen and (max-width: 800px) {
.me-toggle {
display: none;
}
}
.me-toggle__info {
position: absolute;
z-index: 2;
top: 30px;
left: 30px;
margin: 0;
color: white;
text-transform: uppercase;
font-size: 10px;
opacity: 0;
letter-spacing: 1px;
font-weight: 300;
}
.me-logo__device--small {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
width: 48px;
height: 48px;
}
.me-close {
visibility: hidden;
opacity: 0;
}
.me-toggle__base {
width: 100%;
height: 48px;
background: black;
background-image: linear-gradient(205deg, #313346 0%, #15161D 76%);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
border-radius: 2px;
}
.me-panel {
position: absolute;
z-index: 9998;
top: 0;
left: 0;
display: flex;
justify-content: center;
width: 50%;
height: 100%;
transform: translateX(-101%);
color: white;
margin: auto;
background-image: linear-gradient(205deg, #313346 0%, #15161D 76%);
box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.3);
font-family: noto-sans-condensed, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
line-height: 1.357;
text-align: center;
-webkit-font-kerning: normal;
font-kerning: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-y: scroll;
overflow: -moz-scrollbars-none;
-ms-overflow-style: none;
scrollbar-width: none;
}
.me-panel::-webkit-scrollbar {
display: none;
}
@media only screen and (max-width: 800px) {
.me-panel {
display: none;
}
}
.me-panel__content {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
width: 90%;
max-width: 376px;
height: 100%;
min-height: 630px;
visibility: hidden;
opacity: 0;
}
.me-panel__content-top {
flex-basis: 60%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.me-panel__content-btm {
flex-basis: 40%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.me-logo {
width: 76px;
height: 66px;
}
.me-logo__device {
opacity: 0;
}
.me-title {
position: relative;
top: auto;
left: auto;
margin: 26px 0 35px;
font-family: noto-sans-extracondensed, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 5px;
}
.me-title span {
display: block;
margin-top: 5px;
opacity: 0.5;
font-family: noto-sans-condensed, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
}
.me-thanks {
margin-bottom: 16px;
overflow: hidden;
}
.me-thanks__title {
margin: 0 0 2px;
font-family: noto-sans-extracondensed, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 104px;
text-transform: uppercase;
letter-spacing: 5px;
line-height: 1;
}
.me-line {
width: 100%;
height: 1px;
background: white;
opacity: 0.16;
}
.me-intro {
margin: 0;
opacity: 0.5;
}
.me-profile {
position: relative;
display: flex;
justify-content: center;
width: 100%;
height: 100%;
margin-top: 18px;
min-height: 20vh;
}
.me-profile__link {
position: absolute;
top: calc(50% - 54px);
left: calc(50% - 132px);
width: 262px;
height: 108px;
border-radius: 50%;
}
.me-profile__link.me-profile__link-disabled {
pointer-events: none;
cursor: default;
}
.me-line-vert {
width: 1px;
height: 100%;
min-height: 20vh;
background: white;
opacity: 0.16;
}
.me-links {
width: 100%;
}
.me-links__list {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
height: 92px;
overflow: hidden;
}
.me-links__item {
list-style-type: none;
}
.me-links__link {
position: relative;
display: flex;
align-items: center;
height: 100%;
color: white;
opacity: 0.5;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
transition: scale 0.2s linear, color 0.2s linear;
}
.me-links__link:hover {
color: #4A90E2;
opacity: 1;
}
.me-links__link:hover .me-links__item-marker {
transform: scale(1);
}
.me-links__item-marker {
position: absolute;
left: 50%;
bottom: 0;
z-index: 1;
width: 1px;
height: 30px;
background-color: #4A90E2;
transform: scale(0);
transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
transform-origin: center bottom;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html, body {
width: 100%;
height: 100%;
}
body {
background-color: #292929;
color: white;
font-size: 18px;
font-feature-settings: "kern" 1, "liga" 1, "frac" 1, "lnum" 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1 {
font-family: "Playfair Display", serif;
font-size: 96px;
}
p {
font-family: "Lato", sans-serif;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 5vh 5%;
}
.panel {
position: relative;
display: flex;
width: 100%;
max-width: 1200px;
height: 466px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
}
.panel__content-col {
flex-basis: 25%;
}
.panel__content {
position: absolute;
top: 26%;
left: 0;
z-index: 2;
width: 100%;
}
.panel__text {
display: inline-block;
text-align: right;
}
.panel__img-col {
flex-basis: 70%;
box-shadow: 0px 20px 100.28px 8.72px rgba(0, 0, 0, 0.35);
}
.panel__title {
margin: 0;
}
.panel__addr {
position: relative;
display: flex;
margin: 16px 0 0;
justify-content: flex-end;
}
.panel__addr span {
display: block;
margin: 9px 14px 0 0;
height: 1px;
width: 30px;
background-color: #fff;
}
.panel__line {
width: 64%;
height: 3px;
margin: 24px 0 0 36%;
background-color: #fff;
}
.panel__img-col {
width: 100%;
}
.panel__img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="wrapper">
<div class="panel">
<div class="panel__content-col">
<div class="panel__content">
<div class="panel__text">
<h1 class="panel__title">Tap House</h1>
<p class="panel__addr"><span></span>60 Ranelagh Village, Dublin</p>
</div>
<div class="panel__line"></div>
</div>
</div>
<div class="panel__img-col">
<img src="//repo.bfw.wiki/bfwrepo/image/637adfaf19449.jpeg" alt="" class="panel__img">
</div>
</div>
</div>
<button class="me-toggle">
<svg class="me-logo__device--small" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<defs>
<filter id="turb">
<feTurbulence id="turbwave" type="fractalNoise" baseFrequency="0" numOctaves="3" result="turbulence_3" data-filterId="3" seed='2' />
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="turbulence_3" scale="40" />
</filter>
</defs>
<g fill="#fff">
<path class="me-logo__device-large" d="M25.33,9h8.1L19.29,36.67a5.83,5.83,0,0,1-5.19,3.19H6L20.14,12.19A5.83,5.83,0,0,1,25.33,9Z"/>
<path class="me-logo__device-small" d="M42,20.43,37.58,29.2a5.83,5.83,0,0,1-5.17,3.23H24.29l4.42-8.77a5.82,5.82,0,0,1,5.17-3.23Z"/>
</g>
<g class="me-close">
<rect class="me-close__line1" x="14" y="23" width="20" height="2" fill="#fff" />
<rect class="me-close__line2" x="14" y="23" width="20" height="2" fill="#fff" />
</g>
</svg>
<p class="me-toggle__info">Info</p>
<div class="me-toggle__base"></div>
</button>
<div class="me-panel">
<div class="me-close-icon">
<div class="me-close-icon__line"></div>
<div class="me-close-icon__line"></div>
</div>
<div class="me-panel__content">
<div class="me-panel__content-top">
<div class="me-logo">
<svg class="me-logo__device" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 306.93 262">
<defs>
<filter id="me-turb2">
<feTurbulence id="turbwave2" type="fractalNoise" baseFrequency="0" numOctaves="3" result="turbulence_3" data-filterId="3" seed='0' />
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="turbulence_3" scale="40" />
</filter>
</defs>
<g filter="url(#me-turb2)">
<path fill="#fff" d="M237.57 100h69.36l-37 72.69A50 50 0 0 1 225.35 200H156l37-72.69A50 50 0 0 1 237.57 100z" class="small"/>
<path fill="#fff" d="M164.24 0h69.37l-119.7 234.72A50 50 0 0 1 69.37 262H0L119.7 27.29A50 50 0 0 1 164.24 0z" class="large"/>
</g>
<!-- <g filter="url(#goo)">
<path fill="#fff" d="M237.57 100h69.36l-37 72.69A50 50 0 0 1 225.35 200H156l37-72.69A50 50 0 0 1 237.57 100z" class="small"/>
<path fill="#fff" d="M164.24 0h69.37l-119.7 234.72A50 50 0 0 1 69.37 262H0L119.7 27.29A50 50 0 0 1 164.24 0z" class="large"/>
</g> -->
</svg>
</div>
<h1 class="me-title">Designer & Coder <span>Peter Barr</span></h1>
<div class="me-thanks">
<div class="me-line me-thanks__line1"></div>
<p class="me-thanks__title">Thanks!</p>
<div class="me-line me-thanks__line2"></div>
</div>
<p class="me-intro">Yeah cheers for checking out this pen, I hope you can give it a like. Take a peek at my profile to see more pens.</p>
</div>
<div class="me-panel__content-btm">
<div class="me-profile">
<div class="me-line-vert"></div>
<a href="" class="me-profile__link me-profile__link-disabled" target="_blank">
<svg class="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 262 108">
<!-- <rect id="stage" width="262" height="108" fill="#dbdbdb"/> -->
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
<g>
<circle class="me-profile__base-circ" cx="131" cy="54" r="53" fill="#4a90e2"/>
<!-- <path d="M131,54.5A10.79,10.79,0,0,0,142,65H250a10.79,10.79,0,0,0,11-10.5A10.79,10.79,0,0,0,250,44H142A10.79,10.79,0,0,0,131,54.5Z" fill="#4a90e2"/>
<path d="M1,54.5A10.79,10.79,0,0,0,12,65H120a10.79,10.79,0,0,0,11-10.5A10.79,10.79,0,0,0,120,44H12A10.79,10.79,0,0,0,1,54.5Z" fill="#4a90e2"/> -->
</g>
<g <!--filter="url(#goo)"-->>
<circle class="me-profile__logo-circ" cx="131" cy="54" r="37" fill="#fff"/>
<!-- <circle id="small-circ-right" cx="164.5" cy="54.5" r="10.5" fill="#fff"/>
<circle id="small-circ-left" cx="97.5" cy="54.5" r="10.5" fill="#fff"/> -->
</g>
<g class="me-profile__text">
<path d="M98.08,27.44a4.53,4.53,0,0,1-.77,1.64,3.16,3.16,0,0,1-4.71.73,3.36,3.36,0,0,1-.85-4.92,3.63,3.63,0,0,1,1.18-1.13l.45.58a3.15,3.15,0,0,0-1,.95A2.49,2.49,0,0,0,93.11,29a2.45,2.45,0,0,0,3.71-.53,3.59,3.59,0,0,0,.59-1.32Z" transform="translate(0 1)" fill="#fff"/>
<path d="M100.64,20.06c1.66,1.62,1.55,3.49.35,4.72s-3.11,1.2-4.57-.23-1.6-3.42-.34-4.71S99.2,18.66,100.64,20.06Zm-3.58,3.82c1,1,2.5,1.35,3.46.37s.6-2.44-.5-3.51-2.45-1.41-3.46-.37S96,22.84,97.06,23.88Z" transform="translate(0 1)" fill="#fff"/>
<path d="M100.51,16a12.32,12.32,0,0,1,1.42-1.19,3.9,3.9.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0