тема хтмл

Поделиться1Воскресенье, 9 мая 15:11

Автор: Ghost
Администратор
Сообщений: 45
Уважение: +0
Последний визит:
Пятница, 10 декабря 09:58
Обо мне: Lorem ipsum dolor sit amet
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu

[html]
<style>
#slider {
background: #000;
border: 5px solid #eaeaea;
box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
height: 200px;
width: 400px;
margin: 40px auto 0;
overflow: visible;
position: relative;
}
#mask {
overflow: hidden;
height: 200px;
}
/* IMAGE LIST */

#slider ul {
margin: 0;
padding: 0;
position: relative;
}

#slider li {
width: 400px; /* Width Image */
height: 200px; /* Height Image */
position: absolute;
top: 0px; /* Original Position - Outside of the Slider */
list-style: none;
}
#slider li.firstanimation {
animation: cycle 25s linear infinite;
}
#slider li.secondanimation {
animation: cycletwo 25s linear infinite;
}
#slider li.thirdanimation {
animation: cyclethree 25s linear infinite;
}
#slider li.fourthanimation {
animation: cyclefour 25s linear infinite;
}
#slider li.fifthanimation {
animation: cyclefive 25s linear infinite;
}
/* ANIMATION */

@keyframes cycle {
0% { top: 0px; } /* When you start the slide, the first image is already visible */
4% { top: 0px; } /* Original Position */
16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
20% { top: 325px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
21% { top: -325px; opacity: 0; z-index: -1; } /* Return to Original Position */
92% { top: -325px; opacity: 0; z-index: 0; }
96% { top: -325px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
100%{ top: 0px; opacity: 1; }
}
@keyframes cycletwo {
0% { top: -325px; opacity: 0; } /* Original Position */
16% { top: -325px; opacity: 0; }/* Starts moving after 16% to this position */
20% { top: 0px; opacity: 1; }
24% { top: 0px; opacity: 1; } /* From 20% to 24% = for 1 second enter image*/
36% { top: 0px; opacity: 1; z-index: 0; } /* From 24% to 36 % = for 3 seconds the image is visible */
40% { top: 325px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
41% { top: -325px; opacity: 0; z-index: -1; } /* Return to Original Position */
100%{ top: -325px; opacity: 0; z-index: -1; }
}
@keyframes cyclethree {
0% { top: -325px; opacity: 0; }
36% { top: -325px; opacity: 0; }
40% { top: 0px; opacity: 1; }
44% { top: 0px; opacity: 1; }
56% { top: 0px; opacity: 1; }
60% { top: 325px; opacity: 0; z-index: 0; }
61% { top: -325px; opacity: 0; z-index: -1; }
100%{ top: -325px; opacity: 0; z-index: -1; }
}
@keyframes cyclefour {
0% { top: -325px; opacity: 0; }
56% { top: -325px; opacity: 0; }
60% { top: 0px; opacity: 1; }
64% { top: 0px; opacity: 1; }
76% { top: 0px; opacity: 1; z-index: 0; }
80% { top: 325px; opacity: 0; z-index: 0; }
81% { top: -325px; opacity: 0; z-index: -1; }
100%{ top: -325px; opacity: 0; z-index: -1; }
}
@keyframes cyclefive {
0% { top: -325px; opacity: 0; }
76% { top: -325px; opacity: 0; }
80% { top: 0px; opacity: 1; }
84% { top: 0px; opacity: 1; }
96% { top: 0px; opacity: 1; z-index: 0; }
100%{ top: 325px; opacity: 0; z-index: 0; }
}
/* PROGRESS BAR */

.progress-bar {
position: absolute;
top: 1;
width: 400px;
height: 5px;
background: #000;
animation: fullexpand 25s ease-out infinite;
}
/* ANIMATION BAR */

@keyframes fullexpand {
/* In these keyframes, the progress-bar is stationary */
0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }

/* In these keyframes, the progress-bar starts to come alive */
4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }

/* In these keyframes, the progress-bar moves forward for 3 seconds */
16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }

/* In these keyframes, the progress-bar has finished his path */
17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }

/* In these keyframes, the progress-bar will disappear and then resume the cycle */
18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}
#slider .tooltip {
background: rgba(255,255,255,0.75);
width: 100%;
height: 20px;
position: relative;
bottom: 1px;
left: 0px;
text-align: center;
margin-top: -200px;
}

#slider .tooltip h1 {
color: #0000008a;;
font-family: 'Pattaya', sans-serif;
font-size: 22px;
font-weight: 900;
line-height: 20px;
padding: 0 0 0 10px;
text-shadow: 2px 2px 2px #fff;
}
#slider .tooltip {
transition: all 0.7s ease-in-out;
}

#slider li#first: hover .tooltip,
#slider li#second: hover .tooltip,
#slider li#third: hover .tooltip,
#slider li#fourth: hover .tooltip,
#slider li#fifth: hover .tooltip {
left: 100px;
}
#slider: hover li,
#slider: hover .progress-bar {
animation-play-state: paused;
}
</style>
<div class="container">
<div id="carousel">
<div id="slider">

<div id="mask">

<ul>
<li id="first" class="firstanimation">

<a href="#"> <img src="https://unsplash.it/1170/300?image=1059" alt="Clark Street Mercantile" /> </a>
<div class="tooltip">
<h1>Mercantile</h1> </div>
</li>

<li id="second" class="secondanimation">
<a href="#"> <img src="https://unsplash.it/1170/300?image=1060" alt="Coffee Shop" /> </a>
<div class="tooltip">
<h1>Coffee</h1></div>
</li>

<li id="third" class="thirdanimation">
<a href="#"> <img src="https://unsplash.it/1170/300?image=533" alt ="Rulers" /> </a>
<div class="tooltip">
<h1>Measuring</h1> </div>
</li>

<li id="fourth" class="fourthanimation">
<a href="#"> <img src="https://unsplash.it/1170/300?image=531" alt="Cameras" /> </a>
<div class="tooltip">
<h1>Cameras</h1> </div>
</li>

<li id="fifth" class="fifthanimation">
<a href="#"> <img src="https://unsplash.it/1170/300?image=526" alt="Designs" /> </a>
<div class="tooltip">
<h1>Designs</h1> </div>
</li>
</ul>

</div>

<div class="progress-bar"></div>

</div>

</div>
</div>
[/html]

0

Поделиться2Воскресенье, 9 мая 19:43

Автор: Ghost
Администратор
Сообщений: 45
Уважение: +0
Последний визит:
Пятница, 10 декабря 09:58
Обо мне: Lorem ipsum dolor sit amet
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu

[html]<style>/**/
body {
color: #333;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
h1,
h1+p {
margin: 30px 15px 0;
font-weight: 300;
}
h1+p a {
color: #333;
}
h1+p a:hover {
text-decoration: none;
}
h2 {
margin: 60px 15px 0;
padding: 0;
font-weight: 300;
}
h2 span {
margin-left: 1em;
color: #aaa;
font-size: 85%;
}
.column {
margin: 15px 15px 0;
padding: 0;
}
.column:last-child {
padding-bottom: 60px;
}
.column::after {
content: '';
clear: both;
display: block;
}
.column div {
position: relative;
float: left;
width: 300px;
height: 200px;
margin: 0 0 0 25px;
padding: 0;
}
.column div:first-child {
margin-left: 0;
}
.column div span {
position: absolute;
bottom: -20px;
left: 0;
z-index: -1;
display: block;
width: 300px;
margin: 0;
padding: 0;
color: #444;
font-size: 18px;
text-decoration: none;
text-align: center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
opacity: 0;
}
figure {
width: 300px;
height: 200px;
margin: 0;
padding: 0;
background: #fff;
overflow: hidden;
}
figure:hover+span {
bottom: -36px;
opacity: 1;
}

/* Shine */
.hover14 figure {
position: relative;
}
.hover14 figure::before {
position: absolute;
top: 0;
left: -75%;
z-index: 2;
display: block;
content: '';
width: 50%;
height: 100%;
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
}
.hover14 figure:hover::before {
-webkit-animation: shine .75s;
animation: shine .75s;
}
@-webkit-keyframes shine {
100% {
left: 125%;
}
}
@keyframes shine {
100% {
left: 125%;
}
}

/* Circle */
.hover15 figure {
position: relative;
}
.hover15 figure::before {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
display: block;
content: '';
width: 0;
height: 0;
background: rgba(255,255,255,.2);
border-radius: 100%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
}
.hover15 figure:hover::before {
-webkit-animation: circle .75s;
animation: circle .75s;
}
@-webkit-keyframes circle {
0% {
opacity: 1;
}
40% {
opacity: 1;
}
100% {
width: 200%;
height: 200%;
opacity: 0;
}
}
@keyframes circle {
0% {
opacity: 1;
}
40% {
opacity: 1;
}
100% {
width: 200%;
height: 200%;
opacity: 0;
}
}

</style>

<h2 id="demo14">14. Shine</h2>
<div class="hover14 column">
<div>
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
<span>Hover</span>
</div>

</div>

<h2 id="demo15">15. Circle</h2>
<div class="hover15 column">
<div>
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
<span>Hover</span>
</div>

</div>
[/html]

0

Поделиться3Четверг, 1 июля 12:09

Автор: Ghost
Администратор
Сообщений: 45
Уважение: +0
Последний визит:
Пятница, 10 декабря 09:58
Обо мне: Lorem ipsum dolor sit amet
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu