revision:
code:
<div class="container">
<h3 class="heading">Armand Pien</h3>
</div>
<style>
.container {background-color: skyblue; display: flex; height: 40%; width: 90%;
padding: 1rem; justify-content: center; align-items: center; }
.heading {font-size: 10vw; text-shadow: 4px 4px 0px #3F7FBF; mix-blend-mode: screen;
animation: fadeIn 10s linear forwards infinite;}
@keyframes fadeIn {
0%, 100% {opacity: 0.2; color: red;}
50% {opacity: 1; color: green; }
}
</style>
code:
<div class="patterns">
<svg width="100%" height="50%">
<defs>
<pattern id="polka-dots" x="0" y="0" width="100" height="100"
patternUnits="userSpaceOnUse">
<circle fill="red" cx="25" cy="25" r="7"></circle>
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#polka-dots)"> </rect>
<text x="50%" y="60%" text-anchor="middle">Thank you </text>
</svg>
</div>
<style>
.patterns {background-color: #2e4057; margin:0; height: 30vh;}
svg text {margin-top: 5vw; font-family: Arial, Helvetica, sans-serif;
letter-spacing: 10px; stroke: #ffa5d8; font-size: 100px;font-weight: 700;
stroke-width: 3; animation: textAnimate 5s infinite alternate; }
@keyframes textAnimate {
0% {stroke-dasharray: 0 50%; stroke-dashoffset: 20%; fill:hsl(189, 68%, 75%) }
100% {stroke-dasharray: 50% 0; stroke-dashoffstet: -20%; fill: hsla(189, 68%, 75%,0%)}
}
</style>
code:
<div class="disappear">
<span>d</span> <span>i</span> <span>s</span> <span>
a</span> <span>p</span> <span>p</span> <span>e</span>
<span>a</span> <span>r</span>
</div>
<style>
.disappear{ height:100vh; font-family: Arial, Helvetica, sans-serif; font-size: 6vw;
text-transform: uppercase; overflow: hidden; background: blue; position: relative;
left:0; right:0; margin: auto; width:100%; text-align: center; height:fit-content;
bottom:0; top:0;}
.disappear span {display: inline-block; color:transparent; text-shadow: 0px 0px 0px gold;
animation-duration: 3s; animation-iteration-count: infinite; }
.disappear span:nth-child(1){animation-name: disappearleft;}
.disappear span:nth-child(2){animation-name: disappearleft; animation-delay: .3s;}
.disappear span:nth-child(3){animation-name: disappearight; animation-delay: .6s;}
.disappear span:nth-child(4){animation-name: disappearleft; animation-delay: .8s;}
.disappear span:nth-child(5){animation-name: disappearight; animation-delay: 1s;}
.disappear span:nth-child(6){animation-name: disappearight; animation-delay: 1.3s;}
.disappear span:nth-child(7){animation-name: disappearleft; animation-delay: 1.6s;}
.disappear span:nth-child(8){animation-name: disappearight; animation-delay: 2s;}
.disappear span:nth-child(9){animation-name: disappearight; animation-delay: 2.3s;}
@keyframes disappearleft{
50% {transform: skew(50deg) translateY(-200%); text-shadow: 0px 0px 50px; opacity: 0; }
}
@keyframes disappearight{
50% {transform: skew(-50deg) translateY(-200%); text-shadow: 0px 0px 50px; opacity: 0;}
}
</style>
<div class="two">
My website is made for
<div class="dropping-texts">
<div>travellers</div>
<div>photographers</div>
<div>coders</div>
<div>street artists</div>
<div>EVERYONE!</div>
</div>
</div>
<style>
.two {margin:0px; text-align:center; padding-top:4vh; color:#fff; font-family: Arial, Helvetica, sans-serif;
font-size:36px; font-weight:100; overflow:hidden; animation:bg 5s linear infinite;}
.dropping-texts {display: inline-block; width: 180px; text-align: left; height: 36px; vertical-align: -2px;}
.dropping-texts > div {font-size:0px; opacity:0; margin-left:-30px; position:absolute; font-weight:300;
box-shadow: 0px 60px 25px -20px rgba(0,0,0,0.5); }
.dropping-texts > div:nth-child(1) {animation: roll 5s linear infinite 0s;}
.dropping-texts > div:nth-child(2) {animation: roll 5s linear infinite 1s;}
.dropping-texts > div:nth-child(3) {animation: roll 5s linear infinite 2s;}
.dropping-texts > div:nth-child(4) {animation: roll 5s linear infinite 3s;}
.dropping-texts > div:nth-child(5) {animation: roll2 5s linear infinite 4s;}
@keyframes roll {
0% {font-size:0px; opacity:0; margin-left:-30px; margin-top:0px; transform: rotate(-25deg);}
3% {opacity:1; transform: rotate(0deg);}
5% {font-size:inherit; opacity:1; margin-left:0px; margin-top:0px;}
20% {font-size:inherit; opacity:1; margin-left:0px; margin-top:0px; transform: rotate(0deg);}
27% {font-size:0px; opacity:0.5; margin-left:20px; margin-top:100px;}
100% {font-size:0px; opacity:0; margin-left:-30px; margin-top:0px; transform: rotate(15deg);}
}
@keyframes roll2 {
0% {font-size:0px;opacity:0; margin-left:-30px; margin-top:0px; transform: rotate(-25deg);}
3% {opacity:1; transform: rotate(0deg);}
5% {font-size:inherit; opacity:1; margin-left:0px; margin-top:0px;}
20% {font-size:inherit; opacity:1; margin-left:0px; margin-top:0px; transform: rotate(0deg);}
27% {font-size:1500px; opacity:0; margin-left:-1000px; margin-top:-800px;}
100% {font-size:0px; opacity:0; margin-left:-30px; margin-top:0px;transform: rotate(15deg);}
}
@keyframes bg {
0% {background: #ff0075;}
3% {background: #0094ff;}
20% {background: #0094ff;}
23% {background: #b200ff;}
40% {background: #b200ff;}
43% {background: #8BC34A;}
60% {background: #8BC34A;}
63% {background: #F44336;}
80% {background: #F44336;}
83% {background: #F44336;}
100% {background: #F44336;}
}
</style>
A wonderful world!
code:
<div id="first">
<p>A wonderful world!</p>
</div>
<style>
#first {margin: 0;padding: 0; display: flex; justify-content: center; align-items: center;
height: 20vh; background-color: #000;}
p:not(.date){position: relative; font-family: sans-serif; text-transform: uppercase;
font-size: 2em; letter-spacing: 4px; overflow: hidden;
background: linear-gradient(90deg, #000, #fff, #000); background-repeat: no-repeat;
background-size: 80%; animation: animate 3s linear infinite; -webkit-background-clip: text;
background-clip: text; -webkit-text-fill-color: rgba(255, 255, 255, 0);}
@keyframes animate {
0% {background-position: -500%; }
100% {background-position: 500%;}
}
</style>