html 配置文件卡与渐变背景动画
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 配置文件卡与渐变背景动画相关的知识，希望对你有一定的参考价值。
// Import google fonts
@import url("//fonts.googleapis.com/css?family=Merriweather:400,300italic,300,400italic,700|Montserrat:400,700");
// list of fonts
$primary-font : "Merriweather", serif;
$secondary-font : "Montserrat", sans-serif;
// Colors
$white : rgb(255,255,255);
$black : rgb(0,0,0);
$beige : rgb(240,240,236);
$indigo-500 : #3f51b5;
$indigo-700 : #303f9f;
$blue-50 : #e3f2fd;
$blue-500 : #2196f3;
$blue-700 : #1976d2;
$light-blue-500 : #03a9f4;
$background-color : $blue-500;
$body-color : $beige;
$accent-color : $blue-700;
$accent-active : $blue-500;
$gradient-1: $indigo-500;
$gradient-2: $blue-500;
$gradient-3: $light-blue-500;
// Animations
@keyframes opacity {
0% { opacity: 0; }
33% { opacity: 0; }
66% { opacity: 1; }
100% { opacity: 0;}
}
@keyframes opacity-2 {
0% { opacity: 0; }
33% { opacity: 1; }
66% { opacity: 0; }
100% { opacity: 0; }
}
// Typography setup
body {
font-family: $primary-font;
color: darken($accent-color, 25%);
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-family: $secondary-font;
}
h1, h2, h3 {
margin: .625em 0;
text-transform: uppercase;
}
p { margin: 1em 0; }
// Styles
.gradient {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
height: 100%;
margin: 0;
background: {
image: linear-gradient(to bottom right, $gradient-1, $gradient-2);
position: center center;
repeat: no-repeat;
size: cover;
color: $white;
}//background
&:before, &:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 100vh;
animation-iteration-count: infinite;
}// before & after
&:before {
background: {
image: linear-gradient(to bottom right, $gradient-2, $gradient-3);
position: center center;
repeat: no-repeat;
}
animation-name: opacity;
animation-duration: 6s;
}//before
&:after {
background: {
image: linear-gradient(to bottom right, $gradient-3, $gradient-1);
position: center center;
repeat: no-repeat;
}
animation-name: opacity-2;
animation-duration: 6s;
}//after
}//.gradient
#card {
width: 100%;
max-width: 28.125em;
// makes lines by profile transparent for image backgrounds
background: {
image: linear-gradient($body-color, $body-color), linear-gradient($body-color, $body-color);
size: 100% 25%, 100% 74%;
position: top left, bottom left;
repeat: no-repeat;
}
padding: 2.5em;
text-align: center;
box-sizing: border-box;
border-radius: .25em;
box-shadow: 0 0 .375em rgba($black, .35);
z-index: 99;
}
// Header
// ------------------------------------------------------------
.profile {
position: relative;
display: block;
margin: 0 auto;
border-radius: 50%;
}
img {
width: 12.5em;
height: auto;
border-radius: 50%;
box-shadow: 0 0 0 .625em $body-color;
}
// Footer
// ------------------------------------------------------------
.social {
margin-bottom: 1.875em;
a {
display: inline-block;
svg {
width: 1.5em;
height: 1.25em;
padding: .625em;
margin: .625em;
border: .0625em solid $accent-color;
border-radius: 5px;
fill: $accent-color;
transition: all 350ms ease;
&:hover {
fill: $accent-active;
border-color: $accent-active;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
}
}
.contact-button {
display: inline-block;
padding: 10px 50px;
font-family: $secondary-font;
color: $white;
text: {
decoration: none;
transform: uppercase;
}
background: $accent-color;
border-radius: 5px;
transition: all 350ms ease;
&:hover {
background: $accent-active;
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
}Profile Card with Gradient Background Animation
-----------------------------------------------
Simple profile card with social media links and a gradient background which is animated using pseudo content.
A [Pen](https://codepen.io/harunpehlivan/pen/GQOKgO) by [HARUN PEHLİVAN](https://codepen.io/harunpehlivan) on [CodePen](https://codepen.io).
[License](https://codepen.io/harunpehlivan/pen/GQOKgO/license).<main class="gradient">
<article id="card">
<header>
<div class="profile">
<img src="http://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_big.jpg?t=1518705692" alt="Profile Picture"></div>
<h1 class="name">HARUN PEHLİVAN</h1>
<h4 class="location"><a href="https://tercumaneducationsciencetechni1.godaddysites.com/" target="_blank"> HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP</a></h4>
<p class="title">FOUNDER – CEO – BLOGGER</p>
</header>
<footer>
<nav class="social">
<a href="https://www.facebook.com/100008152065270" target="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 26">
<path d="M9,4h5V0H9C6.2,0,4,2.2,4,4.9V8H0v4h4v14h4V12h4.5l1-4H8V4.9C8,4.4,8.4,4,9,4z"/>
</svg>
</a>
<a href="https://www.twitter.com/HTERCUMANP" target="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 16.3"><g transform="translate(160 2016)"><path d="M-140-2014.1c-0.7,0.3-1.5,0.5-2.4,0.6c0.8-0.5,1.5-1.3,1.8-2.3c-0.8,0.5-1.7,0.8-2.6,1c-0.7-0.8-1.8-1.3-3-1.3
c-2.3,0-4.1,1.8-4.1,4.1c0,0.3,0,0.6,0.1,0.9c-3.4-0.2-6.4-1.8-8.5-4.3c-0.4,0.6-0.6,1.3-0.6,2.1c0,1.4,0.7,2.7,1.8,3.4
c-0.7,0-1.3-0.2-1.9-0.5c0,0,0,0,0,0.1c0,2,1.4,3.6,3.3,4c-0.3,0.1-0.7,0.1-1.1,0.1c-0.3,0-0.5,0-0.8-0.1c0.5,1.6,2,2.8,3.8,2.9
c-1.4,1.1-3.2,1.8-5.1,1.8c-0.3,0-0.7,0-1-0.1c1.8,1.2,4,1.8,6.3,1.8c7.5,0,11.7-6.3,11.7-11.7c0-0.2,0-0.4,0-0.5
C-141.2-2012.5-140.6-2013.3-140-2014.1L-140-2014.1z"/> </g>
</svg>
</a>
<a href="https://www.instagram.com/harunpehlivantebimtebitagem/" target="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <path d="M16.7,0H3.3C1.5,0,0,1.5,0,3.3v13.4C0,18.5,1.5,20,3.3,20h13.4c1.8,0,3.3-1.5,3.3-3.3V3.3C20,1.5,18.5,0,16.7,0z M6.4,8.7
h7.2c0.1,0.4,0.2,0.8,0.2,1.3c0,2.1-1.7,3.8-3.8,3.8S6.2,12.1,6.2,10C6.2,9.6,6.3,9.1,6.4,8.7z M17.5,16.3c0,0.7-0.5,1.3-1.2,1.3
H3.7c-0.7,0-1.3-0.6-1.3-1.3V8.7h2C4.3,9.1,4.3,9.6,4.3,10c0,3.1,2.6,5.7,5.7,5.7s5.7-2.5,5.7-5.7c0-0.4-0.1-0.8-0.2-1.2h1.9
L17.5,16.3L17.5,16.3z M17.5,4.4c0,0.3-0.2,0.6-0.6,0.6h-1.3C15.3,5,15,4.7,15,4.4V3.1c0-0.3,0.3-0.6,0.6-0.6h1.3
c0.3,0,0.6,0.2,0.6,0.6V4.4z"/>
</svg>
</a>
</nav>
<a class="contact-button" href="mailto:trcmnhp@hotmail.com">Email Me</a>
</footer>
</article>
</main>以上是关于html 配置文件卡与渐变背景动画的主要内容，如果未能解决你的问题，请参考以下文章