Floating image Sliding CSS image Animation

Floating CSS image Animation

Creating Webpage Floating Images Animation With CSS Coding

Floating CSS image Animation HTML

<div class="container">
<div class="avatar">
<a href="https://codepen.io/MarioDesigns/">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/skytsunami.png" alt="Skytsunami" />
</a>
</div>
<div class="content">
<h1>Floating CSS animation</h1>
<p>Follow me on:</p>
<p>
<span><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></span>
<span><a href="#" target="_blank"><i class="fa fa-github"></i></a></span>
<span><a href="#" target="_blank"><i class="fa fa-bitbucket"></i></a></span>
<span><a href="#" target="_blank"><i class="fa fa-codepen"></i></a></span>
</p>
<p>Website Deign/p>
</div>
</div>

Floating CSS image Animation CSS

body,
html {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Helvetica', sans-serif;
background: rgb(26, 188, 156);
background: -moz-linear-gradient(-45deg, rgba(26, 188, 156, 1) 0%, rgba(142, 68, 173, 1) 100%);
background: -webkit-linear-gradient(-45deg, rgba(26, 188, 156, 1) 0%, rgba(142, 68, 173, 1) 100%);
background: linear-gradient(135deg, rgba(26, 188, 156, 1) 0%, rgba(142, 68, 173, 1) 100%);
}
h1 {
font-size: 24px;
margin: 10px 0 0 0;
font-weight: lighter;
text-transform: uppercase;
color: #eeeeee;
}
p {
font-size: 12px;
font-weight: light;
color: #333333;
}
span a {
font-size: 18px;
color: #cccccc;
text-decoration: none;
margin: 0 10px;
transition: all 0.4s ease-in-out;
&:hover {
color: #ffffff;
}
}
@keyframes float {
0% {
box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
transform: translatey(0px);
}
50% {
box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
transform: translatey(-20px);
}
100% {
box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
transform: translatey(0px);
}
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.avatar {
width: 150px;
height: 150px;
box-sizing: border-box;
border: 5px white solid;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
transform: translatey(0px);
animation: float 6s ease-in-out infinite;
img { width: 100%; height: auto; }
}
.content {
width: 100%;
max-width: 600px;
padding: 20px 40px;
box-sizing: border-box;
text-align: center;
}
.suppoprt-me {
display: inline-block;
position: fixed;
bottom: 10px;
left: 10px;
width: 20vw;
max-width: 250px;
min-width: 200px;
z-index: 9;
img {
width: 100%;
height: auto;
}
}

Minimal pure CSS slider

Minimal pure CSS slider HTML

Minimal pure CSS slider CSS

//how many images we have
$slides: 4;
// how much we want each slide to show
$time_per_slide: 4;
// total time needed for full animation
$total_animation_time: $time_per_slide * $slides;
body{
background:#000;
}
.container{
margin:50px auto;
width:500px;
height:300px;
overflow:hidden;
border:10px solid;
border-top-color:#856036;
border-left-color:#5d4426;
border-bottom-color:#856036;
border-right-color:#5d4426;
position:relative;
}
.photo{
position:absolute;
animation:round #{$total_animation_time}s infinite;
opacity:0;

}
@keyframes round{
25%{
opacity:1;
}
40%{
opacity:0;
}
}
@for $index from 1 to $slides + 1{
img:nth-child(#{$index}){
animation-delay:#{$total_animation_time - $time_per_slide * $index}s
}
}

Website Design99