I've created an "aquarium" via html and css,
I would like to turn all of the current page to responsive, that will make the "draws" shrink and grow according to the browser resolution.
For start, how the container should look like?
And is it ok to have value like PX inside the primary warp(for example: .Fish or .JellyFish)?
body{
width:100%;
margin:100px auto;
}
div#container{
width:100%;
text-align:center;
}
div.Fish{
position:absolute;
width:200px;
height:120px;
float:left;
}
div.Fish div.fishBody{
width:150px;
height:70px;
border-radius:50%;
border:solid 1px silver;
background-color:silver;
margin: 0 0 0 25px;
}
div.Fish div.fishBody div.fishEye {
float:right;
margin:25px;
width:15px;
height:15px;
border-radius:50%;
background-color:#000000;
}
div.Fish div.fishBody div.fishEye div.fishEyePupil {
float:right;
width:5px;
height:5px;
margin:5px 2px 0 0;
border-radius:50%;
background-color:#fff;
}
div.Fish div.fishMouth{
float:right;
position:relative;
width: 0;
height: 0;
margin:40px 20px 0 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid #fff;
}
div.Fish div.topFin {
position:relative;
width: 0;
height: 0;
margin:-10px 0 0 70px;
top:10px;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid silver;
}
div.Fish div.bottomFin {
position:relative;
width: 0;
height: 0;
margin:0 0 0 70px;
bottom:10px;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid silver;
}
div.Fish div.backFin {
float:left;
position:relative;
width: 0;
height: 0;
margin:35px 0 0 0px;
bottom:10px;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid silver;
}
.fish1{
left:800px;
top: 300px;
animation: myFishmove1 5s infinite;
animation-direction: alternate;
}
.fish2{
left:1200px;
top: 600px;
animation: myFishmove2 5s infinite;
animation-direction: alternate;
}
.fish3{
left:1600px;
top: 200px;
animation: myFishmove3 5s infinite;
animation-direction: alternate;
}
.fish4{
left:400px;
top: 500px;
animation: myFishmove4 5s infinite;
animation-direction: alternate;
}
#keyframes myFishmove1 {
from {left: 800px;,top:300px;}
to {left:200px;top: 500px;}
}
#keyframes myFishmove2 {
from {left: 1200px;,top:600px;}
to {left:400px;top: 900px;}
}
#keyframes myFishmove3 {
from {left: 1600px;,top:200px;}
to {left:2000px;top: 600px;}
}
#keyframes myFishmove4 {
from {left: 400px;,top:500px;}
to {left:1200px;top: 100px;}
}
div.JellyFish{
position:absolute;
width:250px;
height:600px;
float:left;
}
div.JellyFish div.jellyHead{
width:200px;
height:100px;
background-color:lightblue;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
}
div.JellyFish div.legType1 {
float:left;
width: 40px;
height: 170px;
border-right: solid 8px lightblue;
border-radius: 0 0 50%/100px 100px;
}
div.JellyFish div.legType2 {
margin: 0 0 0 15px;
float:left;
width: 40px;
height: 230px;
border-right: solid 8px lightblue;
border-radius: 0 0 50%/100px 100px;
}
div.JellyFish div.legType3 {
margin: 0 0 0 50px;
float:left;
width: 50px;
height: 120px;
border-left: solid 8px lightblue;
border-radius: 0 0 0 50%/100px;
}
#keyframes myJellymove1 {
from {top: 180px;}
to {top: 400px;}
}
#keyframes myJellymove2 {
from {top: 300px;}
to {top: 600px;}
}
#keyframes myJellymove3 {
from {top: 100px;}
to {top: 700px;}
}
#keyframes myJellymove4 {
from {top: 400px;}
to {top: 800px;}
}
#keyframes myJellymove5 {
from {top: 600px;}
to {top: 200px;}
}
.jelly1{
left:500px;
top:180px;
animation: myJellymove1 5s infinite;
animation-direction: alternate;
}
.jelly2{
left:800px;
top:300px;
animation: myJellymove2 5s infinite;
animation-direction: alternate;
}
.jelly3{
left:1100px;
top:100px;
animation: myJellymove3 5s infinite;
animation-direction: alternate;
}
.jelly4{
left:1400px;
top:400px;
animation: myJellymove4 5s infinite;
animation-direction: alternate;
}
.jelly5{
left:1800px;
top:600px;
animation: myJellymove5 5s infinite;
animation-direction: alternate;
}
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="container">
<div class="Fish fish1">
<div class="backFin"></div>
<div class="fishMouth"></div>
<div class="topFin"></div>
<div class="fishBody">
<div class="fishEye">
<div class="fishEyePupil"></div>
</div>
</div>
<div class="bottomFin"></div>
</div>
<div class="Fish fish2">
<div class="backFin"></div>
<div class="fishMouth"></div>
<div class="topFin"></div>
<div class="fishBody">
<div class="fishEye">
<div class="fishEyePupil"></div>
</div>
</div>
<div class="bottomFin"></div>
</div>
<div class="Fish fish3">
<div class="backFin"></div>
<div class="fishMouth"></div>
<div class="topFin"></div>
<div class="fishBody">
<div class="fishEye">
<div class="fishEyePupil"></div>
</div>
</div>
<div class="bottomFin"></div>
</div>
<div class="Fish fish4">
<div class="backFin"></div>
<div class="fishMouth"></div>
<div class="topFin"></div>
<div class="fishBody">
<div class="fishEye">
<div class="fishEyePupil"></div>
</div>
</div>
<div class="bottomFin"></div>
</div>
<div class="JellyFish jelly1">
<div class="jellyHead"></div>
<div class="legType1"></div>
<div class="legType2"></div>
<div class="legType3"></div>
</div>
<div class="JellyFish jelly2">
<div class="jellyHead"></div>
<div class="legType2" style="margin: 0;"></div>
<div class="legType1"></div>
<div class="legType3"></div>
</div>
<div class="JellyFish jelly3">
<div class="jellyHead"></div>
<div class="legType2" style="margin: 0 50px 0 0;"></div>
<div class="legType3" style="margin: 0 0 0 0;"></div>
<div class="legType1"
style="border-radius: 0 50%/100px 100px 0;border-right:none;border-left:solid 8px lightblue;"></div>
</div>
<div class="JellyFish jelly4">
<div class="jellyHead"></div>
<div class="legType1"></div>
<div class="legType2"></div>
<div class="legType3"></div>
</div>
<div class="JellyFish jelly5">
<div class="jellyHead"></div>
<div class="legType2" style="margin: 0;"></div>
<div class="legType1"></div>
<div class="legType3"></div>
</div>
</div>
</body>
</html>
what is the best option to do that?
Thanks!
As I can see you have used px units to move your objects in keyframes.
Either you should use percentage % based units to move objects.
To make the current page working in all viewports just add:
body{
overflow:none;
}
add the overflow: none property to your body tag to remove horizontal and vertical scrollbars from the page, but your some fishes will be cropped out based on the size of the viewport.
Hope I Helped 😅
Related
Basically, I have created a loader and logo for my website. However, I have an issue with my logo, which is at the top of the website. The logo is not responsive. I would like my logo to be at the top middle of my website, but, when someone goes to view it on their window screen, the logo moves to somewhere other than the middle. I have tried adding a display: flex; and justify content; on my load class, but it does not work and the 3D effect goes away. How can I prevent the logo from moving and let it stay in the top middle regardless of someone's window size? Any help would be appreciated. Thanks. Here is my code.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Hind&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div class="load">
<p id = "spinner">M</p>
<div class="container">
<div class="loader">
<div class="loader">
<div class="loader">
<div class="loader">
<div class="loader">
<div class="loader">
<div class="loader">
<div class="loader">
<div class="loader">
<div class="loader">
<div class="loader">
<div class="loader">
<div class="loader">
<div class="loader">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body{
background: #21312F;
}
.container{
position: absolute;
height: 400px;
width: 200px;
top: 20%;
left: 43%;
}
.loader{
height: 95%;
width: 95%;
margin: 2.5%;
border-top: 3px solid #49D49F;
border-bottom: 3px solid #FF6542;
border-radius: 50%;
animation: 30s rotate linear infinite;
}
.load {
width: 100%;
position: fixed;
height: 100vh;
z-index: 99;
overflow: hidden;
background: #21312F;
}
#keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(810deg);
}
}
#spinner{
font-size: 50px;
text-align: center;
animation-name: spin, depth;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 3s;
transform-style: preserve-3d;
position: relative;
top: 20px;
left: -40px;
color: #49D49F;
font-family: 'Hind', sans-serif;
margin: 0 auto;
}
#spinner::before, #spinner::after{
content: "M";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
transform: rotateY(0.5deg);
transform-origin: 0 50%;
color: #FF6542;
}
#spinner::after{
transform: rotateY(-0.5deg);
transform-origin: 100% 50%;
}
#keyframes spin{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(-360deg)
}
}
#keyframes depth {
0% { text-shadow: 0 0 black; }
25% { text-shadow: 1px 0 black, 2px 0 black, 3px 0 black, 4px 0 black, 5px 0 black, 6px 0 black; }
50% { text-shadow: 0 0 black; }
75% { text-shadow: -1px 0 black, -2px 0 black, -3px 0 black, -4px 0 black, -5px 0 black, -6px 0 black; }
100% { text-shadow: 0 0 black; }
}
I am not sure but do you want like this? :
body{
margin: 0;
padding: 0;
background: #21312F;
}
.container{
position: absolute;
height: 400px;
width: 200px;
top: 20%;
left: 50%;
transform: translateX(-50%);
}
.loader{
height: 95%;
width: 95%;
margin: 2.5%;
border-top: 3px solid #49D49F;
border-bottom: 3px solid #FF6542;
border-radius: 50%;
animation: 30s rotate linear infinite;
}
.load {
width: 100%;
position: fixed;
height: 100vh;
z-index: 99;
overflow: hidden;
background: #21312F;
}
#keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(810deg);
}
}
#spinner{
font-size: 50px;
text-align: center;
animation-name: spin, depth;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 3s;
transform-style: preserve-3d;
position: relative;
top: 20px;
color: #49D49F;
font-family: 'Hind', sans-serif;
margin: 0 auto;
}
#spinner::before, #spinner::after{
content: "M";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
transform: rotateY(0.5deg);
transform-origin: 0 50%;
color: #FF6542;
}
#spinner::after{
transform: rotateY(-0.5deg);
transform-origin: 100% 50%;
}
#keyframes spin{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(-360deg)
}
}
#keyframes depth {
0% { text-shadow: 0 0 black; }
25% { text-shadow: 1px 0 black, 2px 0 black, 3px 0 black, 4px 0 black, 5px 0 black, 6px 0 black; }
50% { text-shadow: 0 0 black; }
75% { text-shadow: -1px 0 black, -2px 0 black, -3px 0 black, -4px 0 black, -5px 0 black, -6px 0 black; }
100% { text-shadow: 0 0 black; }
}
<body>
<div class="load">
<p id = "spinner">M</p>
<div class="container">
<div class="loader">
<div class="loader">
<div class="loader">
<div class="loader">
<div class="loader">
<div class="loader">
<div class="loader">
<div class="loader">
<div class="loader">
<div class="loader">
<div class="loader">
<div class="loader">
<div class="loader">
<div class="loader">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
I want to get the following effect, that the image should appear/revel/fill from bottom to top. So far what I tried (check my code) and it fills from top to bottom, which is the opposite I want. Is there any suggestion or solution to this problem. Is it possible to reserve the animation I already did?
.photo-container{
border: 5px solid red;
height: 400px;
width: 300px;
}
img{
height: 400px;
width: 300px;
object-fit: cover;
}
.fill-image {
overflow: hidden;
border: 1px solid blue;
position: absolute;
animation-name: fillBottomToTop;
animation-duration: 2s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
#keyframes fillBottomToTop {
from {
height: 0;
}
to {
height: 400px;
}
}
.photo-container{
border: 5px solid red;
height: 400px;
width: 300px;
}
img{
height: 400px;
width: 300px;
object-fit: cover;
}
.fill-image {
overflow: hidden;
border: 1px solid blue;
position: absolute;
animation-name: fillBottomToTop;
animation-duration: 2s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
#keyframes fillBottomToTop {
from {
height: 0;
}
to {
height: 400px;
}
}
<div class="photo-container">
<div class="fill-image">
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" >
</div>
</div>
Perhaps use an overlay to cover the image and have it reveal the picture underneath? Like this:
.photo-container{
border: 5px solid red;
height: 400px;
width: 300px;
}
img{
height: 400px;
width: 300px;
object-fit: cover;
}
.overlay {
border: 1px solid blue;
position: absolute;
height: 400px;
width: 300px;
animation-name: fillBottomToTop;
animation-duration: 2s;
animation-delay: 2s;
animation-fill-mode: forwards;
background: #fff;
}
#keyframes fillBottomToTop {
from {
height: 400px;
}
to {
height: 0;
}
}
<div class="photo-container">
<div class="fill-image">
<div class="overlay"></div>
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" >
</div>
</div>
Here is an idea with background-image and one element:
.photo-container{
border: 5px solid red;
height: 400px;
width: 300px;
box-sizing:border-box;
background:
url(https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg)
center/cover padding-box content-box;
padding-top:400px;
animation: fillBottomToTop 2s 2s forwards;
}
#keyframes fillBottomToTop {
to {
padding-top:0;
}
}
<div class="photo-container">
</div>
I have a html and in this html i have created a pacman game. In this game my pacman is eating a div having yellow background. But i want my pacman to eat image instead of div.For example on first div food-1 i want to place image abc1.jpg and for food-2 div the image should be abc2.jpg and so on.I tried my best but not able to do so. Please help me to achieve this.
Here my code.
pakman.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="pac.css" />
<body>
<div class="display">
<div class="overlay"></div>
<div class="pacman pacman-real">
<div class="pacman-mask">
<div class="pacman-inner"></div>
</div>
</div>
<div class="pacman pacman-mirror">
<div class="pacman-mask">
<div class="pacman-inner"></div>
</div>
<div id="circle"></div>
</div>
<div class="food food-1"></div>
<div class="food food-2"></div>
<div class="food food-3"></div>
<div class="food food-4"></div>
<div class="food food-5"></div>
<div class="food food-6"></div>
<div class="food food-7"></div>
<div class="food food-8"></div>
<div class="food food-9"></div>
<div class="food food-10"></div>
<div class="food food-11"></div>
</div>
</body>
</head>
</html>
and my css file is
pac.css
body {
width:100%;
height:100%;
background:black;
overflow:hidden;
margin:0;
padding:0;
}
.display {
height:120px;
width:600px;
position:absolute;
top:50%;
left:50%;
overflow:hidden;
border-top:6px solid #2121de;
border-bottom:6px solid #2121de;
margin:0 auto;
margin-top:-66px;
margin-left:-300px;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay {
position:absolute;
z-index:999;
top:0;
left:0;
height:100%;
width:0;
background:black;
-moz-animation: eat 5s linear infinite;
-webkit-animation: eat 5s linear infinite;
animation: eat 5s linear infinite;
}
.pacman {
position:absolute;
z-index:1000;
top:50%;
margin-top:-50px;
width: 100px;
height: 100px;
background-color:yellow;
border-radius: 100%;
}
.pacman-mask {
width: 100px;
height: 100px;
margin-left:1px;
overflow:hidden;
border-radius: 100%;
position:relative;
-moz-background-clip:border;
-webkit-background-clip:border;
background-clip:border-box;
}
.pacman-inner {
position:absolute;
top:50%;
right:0;
margin-top:-50px;
width: 100px;
height: 100px;
}
.pacman-inner:after {
display:block;
position:absolute;
top:50px;
left:-50px;
content:" ";
width:0;
height:0;
border-top:50px solid transparent;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid black;
-moz-animation: border 0.25s linear infinite;
-webkit-animation: border 0.25s linear infinite;
animation: border 0.25s linear infinite;
-moz-transform-origin:50% 0;
-webkit-transform-origin:50% 0;
transform-origin:50% 0;
-moz-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
transform:rotate(-90deg);
}
.pacman-real {
-moz-animation: move 5s linear infinite;
-webkit-animation: move 5s linear infinite;
animation: move 5s linear infinite;
}
.pacman-mirror {
-moz-animation: move2 5s linear infinite;
-webkit-animation: move2 5s linear infinite;
animation: move2 5s linear infinite;
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
.pacman-mirror .pacman-inner:after {
-moz-animation-delay:0.25s ;
-webkit-animation-delay:0.25s ;
animation-delay: 0.25s;
}
.circle {
width: 120px;
height: 120px;
background: #7fee1d;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
.food {
background-color:#ffb897;
width:10px;
height:10px;
position:absolute;
top:50%;
margin-top:-5px;
margin-left:-5px;
}
.food-1 {
left:50px;
}
.food-2 {
left:100px;
}
.food-3 {
left:150px;
}
.food-4 {
left:200px;
}
.food-5 {
left:250px;
}
.food-6 {
left:300px;
}
.food-7 {
left:350px;
}
.food-8 {
left:400px;
}
.food-9 {
left:450px;
}
.food-10 {
left:500px;
}
.food-11 {
left:550px;
}
.food-12 {
left:600px;
}
#-moz-keyframes border {
0% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
50% {
margin-left:50px;
border-left:0 solid transparent;
border-right:0 solid transparent;
}
100% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
}
#-webkit-keyframes border {
0% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
50% {
margin-left:50px;
border-left:0 solid transparent;
border-right:0 solid transparent;
}
100% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
}
#keyframes border {
0% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
50% {
margin-left:50px;
border-left:0 solid transparent;
border-right:0 solid transparent;
}
100% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
}
#-moz-keyframes move {
0% {
left:-100px;
}
50% {
left:600px;
}
100% {
left:600px;
}
}
#-webkit-keyframes move {
0% {
left:-100px;
}
50% {
left:600px;
}
100% {
left:600px;
}
}
#keyframes move {
0% {
left:-100px;
}
50% {
left:600px;
}
100% {
left:600px;
}
}
#-moz-keyframes move2 {
0% {
left:-100px;
}
50% {
left:-100px;
}
100% {
left:600px;
}
}
#-webkit-keyframes move2 {
0% {
left:-100px;
}
50% {
left:-100px;
}
100% {
left:600px;
}
}
#keyframes move2 {
0% {
left:-100px;
}
50% {
left:-100px;
}
100% {
left:600px;
}
}
#-moz-keyframes eat {
0% {
width:0;
margin-left:0;
}
50% {
width:600px;
margin-left:0;
}
100% {
width:0;
margin-left:600px;
}
}
#-webkit-keyframes eat {
0% {
width:0;
margin-left:0;
}
50% {
width:600px;
margin-left:0;
}
100% {
width:0;
margin-left:600px;
}
}
#keyframes eat {
0% {
width:0;
margin-left:0;
}
50% {
width:600px;
margin-left:0;
}
100% {
width:0;
margin-left:600px;
}
}
Here is my jsfiddle
Should be as easy as changing the div to and img tag and adding a src attribute:
<img src="http://www.gatewayvancouver.com/new/images/detail_dot_blue.gif" class="food food-1"/>
See the leftmost one: https://jsfiddle.net/4xLu5szz/5/
"Use Image tag"
Example :
<img src="smiley.gif" alt="Smiley face" height="42" width="42">
CODE HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="pac.css" />
<body>
<div class="display">
<div class="overlay"></div>
<div class="pacman pacman-real">
<div class="pacman-mask">
<div class="pacman-inner"></div>
</div>
</div>
<div class="pacman pacman-mirror">
<div class="pacman-mask">
<div class="pacman-inner"></div>
</div>
<div id="circle"></div>
</div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSTVAbva29vJgnTKwTJmda-Rvod1hxx0NyCV_m9eeSNXJotaBD-" class="food food-1"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMR5x8vDhDIz7ydtIsCGjOg8HY30fCfW-eEFsI7kydkv93yQJq " class="food food-2"/>
<img src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKovb82eqcasgtuu1vNMcQrwmno1ebHR6_OGhQKN2Ahq2edADr" class="food food-3"/>
<img src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5xr4UoU50LojizDjBXPiWodrHzKALt_AwQvWbRyZuu5j-itGZ" class="food food-4"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTlP6-Z7AX4P-0HCFN2RCiBMQo-H6ljKWBX84DN-Jl92tzRPiCnww " class="food food-5"/>
<img src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_D8ibrS1OwZKqeHeA_8jl4dFcWPqHAPZ9hUdClrvDZvyhaFID" class="food food-6"/>
<img src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwib9lxt-zKm9NOqIJzRR8UOCiIv03si25pS3x5_iuJejoaZLv" class="food food-7"/>
<img src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvjZH6-vKtV-s2W5cgXTnchAgS9TYAcXj7U48XE_MNxJRe56vS" class="food food-8"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcJSD2u8YexpOp1GL3STmhrYt0LnTDy2o9YhfICu2DX0QCpCIn " class="food food-9"/>
<img src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRdzRd944Fdkw4_fDcmmSH__EqJbItKn9tNoFLu906ZNxxSPvmMdA" class="food food-10"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSY6Z0MZA7eRpyMln8oWWszO-uDAI5be3omIn0BhmB1YNEXH80tg " class="food food-11"/>
</div>
</body>
</head>
</html>
CSS:
body {
width:100%;
height:100%;
background:black;
overflow:hidden;
margin:0;
padding:0;
}
.display {
height:120px;
width:600px;
position:absolute;
top:50%;
left:50%;
overflow:hidden;
border-top:6px solid #2121de;
border-bottom:6px solid #2121de;
margin:0 auto;
margin-top:-66px;
margin-left:-300px;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay {
position:absolute;
z-index:999;
top:0;
left:0;
height:100%;
width:0;
background:black;
-moz-animation: eat 5s linear infinite;
-webkit-animation: eat 5s linear infinite;
animation: eat 5s linear infinite;
}
.pacman {
position:absolute;
z-index:1000;
top:50%;
margin-top:-50px;
width: 100px;
height: 100px;
background-color:yellow;
border-radius: 100%;
}
.pacman-mask {
width: 100px;
height: 100px;
margin-left:1px;
overflow:hidden;
border-radius: 100%;
position:relative;
-moz-background-clip:border;
-webkit-background-clip:border;
background-clip:border-box;
}
.pacman-inner {
position:absolute;
top:50%;
right:0;
margin-top:-50px;
width: 100px;
height: 100px;
}
.pacman-inner:after {
display:block;
position:absolute;
top:50px;
left:-50px;
content:" ";
width:0;
height:0;
border-top:50px solid transparent;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid black;
-moz-animation: border 0.25s linear infinite;
-webkit-animation: border 0.25s linear infinite;
animation: border 0.25s linear infinite;
-moz-transform-origin:50% 0;
-webkit-transform-origin:50% 0;
transform-origin:50% 0;
-moz-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
transform:rotate(-90deg);
}
.pacman-real {
-moz-animation: move 5s linear infinite;
-webkit-animation: move 5s linear infinite;
animation: move 5s linear infinite;
}
.pacman-mirror {
-moz-animation: move2 5s linear infinite;
-webkit-animation: move2 5s linear infinite;
animation: move2 5s linear infinite;
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
.pacman-mirror .pacman-inner:after {
-moz-animation-delay:0.25s ;
-webkit-animation-delay:0.25s ;
animation-delay: 0.25s;
}
.circle {
width: 120px;
height: 120px;
background: #7fee1d;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
.food {
background-color:#ffb897;
width:20px;
height:20px;
position:absolute;
top:50%;
margin-top:-5px;
margin-left:-5px;
}
.food-1 {
left:50px;
}
.food-2 {
left:100px;
}
.food-3 {
left:150px;
}
.food-4 {
left:200px;
}
.food-5 {
left:250px;
}
.food-6 {
left:300px;
}
.food-7 {
left:350px;
}
.food-8 {
left:400px;
}
.food-9 {
left:450px;
}
.food-10 {
left:500px;
}
.food-11 {
left:550px;
}
.food-12 {
left:600px;
}
#-moz-keyframes border {
0% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
50% {
margin-left:50px;
border-left:0 solid transparent;
border-right:0 solid transparent;
}
100% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
}
#-webkit-keyframes border {
0% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
50% {
margin-left:50px;
border-left:0 solid transparent;
border-right:0 solid transparent;
}
100% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
}
#keyframes border {
0% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
50% {
margin-left:50px;
border-left:0 solid transparent;
border-right:0 solid transparent;
}
100% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
}
#-moz-keyframes move {
0% {
left:-100px;
}
50% {
left:600px;
}
100% {
left:600px;
}
}
#-webkit-keyframes move {
0% {
left:-100px;
}
50% {
left:600px;
}
100% {
left:600px;
}
}
#keyframes move {
0% {
left:-100px;
}
50% {
left:600px;
}
100% {
left:600px;
}
}
#-moz-keyframes move2 {
0% {
left:-100px;
}
50% {
left:-100px;
}
100% {
left:600px;
}
}
#-webkit-keyframes move2 {
0% {
left:-100px;
}
50% {
left:-100px;
}
100% {
left:600px;
}
}
#keyframes move2 {
0% {
left:-100px;
}
50% {
left:-100px;
}
100% {
left:600px;
}
}
#-moz-keyframes eat {
0% {
width:0;
margin-left:0;
}
50% {
width:600px;
margin-left:0;
}
100% {
width:0;
margin-left:600px;
}
}
#-webkit-keyframes eat {
0% {
width:0;
margin-left:0;
}
50% {
width:600px;
margin-left:0;
}
100% {
width:0;
margin-left:600px;
}
}
#keyframes eat {
0% {
width:0;
margin-left:0;
}
50% {
width:600px;
margin-left:0;
}
100% {
width:0;
margin-left:600px;
}
}
Here is the code:
HTML:
<div class="connectContainer">
<div class="outerCircle">
<div class="innerCircle">
<div class="imgDiv">
<img class="connectLink" src="car.png">
</div>
</div>
</div>
</div>
CSS:
.connectContainer {
position:relative;
height:200px;
width:200px;
margin-left:auto;
margin-right:auto;
margin-bottom:30px;
margin-top:30px;
}
.imgDiv {
width:150px;
height:150px;
position:absolute;
}
.connectLink {
position:absolute;
height:67px;
width:110px;
top:41px;
left:20px;
}
.innerCircle {
position:absolute;
border:2px solid #43cee6;
width:150px;
height:150px;
border-radius:100%;
left:20px;
top:20px;
-webkit-animation-name: changeInnerBorderColor;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
.outerCircle {
position:absolute;
border:2px solid #43cee6;
width:190px;
height:190px;
border-radius:100%;
margin:0 auto;
-webkit-animation-name:changeOuterBorderColor;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count: infinite;
}
I'm using Google Chrome Version 47.0.2526.73 (64-bit).
All the animation and other properties are working absolutely fine.
I tried changing the border-width and it changes as well.
Only the border-radius doesn't work. I'm getting squares instead of circles.
Also, the ionic version of this code for a mobile app gives me the circles!
Please help.
For making any circle you have to change your border-radius property 50% then it will works as circle.
Your .innerCircle and .outerCircle class exists with 100% of border radius value change it to 50% for getting circle.
.innerCircle {
position:absolute;
border:2px solid #43cee6;
width:150px;
height:150px;
border-radius:50%;
left:20px;
top:20px;
-webkit-animation-name: changeInnerBorderColor;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
.outerCircle {
position:absolute;
border:2px solid #43cee6;
width:190px;
height:190px;
border-radius:50%;
margin:0 auto;
-webkit-animation-name:changeOuterBorderColor;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count: infinite;
}
This is your fiddle http://jsfiddle.net/7xewv0f5
I see it works normally. Try inspect elements to find other css which is overwriting your border-radius
<div class="connectContainer">
<div class="outerCircle">
<div class="innerCircle">
<div class="imgDiv">
<img class="connectLink" src="car.png">
</div>
</div>
</div>
</div>
Try This in your code to get proper output. you can change top,left,width,height according to your requirement.
.connectContainer {
position: relative;
height: 200px;
width: 200px;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
margin-top: 30px;
}
.outerCircle {
position: absolute;
border: 2px solid #43cee6;
width: 190px;
height: 190px;
border-radius: 100%;
margin: 0 auto;
-webkit-animation-name: changeOuterBorderColor;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
.innerCircle {
position: absolute;
border: 2px solid #43cee6;
width: 150px;
height: 150px;
border-radius: 100%;
left: 20px;
top: 20px;
-webkit-animation-name: changeInnerBorderColor;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
.imgDiv {
width: 150px;
height: 150px;
position: relative;
border-radius: 10px;
}
.connectLink {
position: absolute;
height: 110px;
width: 110px;
top: 20px;
left: 20px;
border-radius: 100%;
}
I am doing a website project and I would like to have this cool hover effect but I can't seem to get it to work right?
I have a vinyl record case image that slides to the left with a title (overflow:hidden) to reveal the record image behind it. At the same time from the left I want a description of the record to slid out from behind the vinly record case thats moving to the left and be on top of the record image with a little opacity so you can still see the record(this part is easy)
Here is the html code:
<div id="stations">
<div class="grid_3">
<div class="records"><!-- sleeve -->
<h3>Groove Salad</h3>
<div class="recordsinfo">Station description.</div>
</div>
</div>
</div>
and here is the css code:
#stations>div {
background-image: url(http://benlevywebdesign.com/somafm/images/SomaFMrecord.png);
background-repeat:no-repeat;
height: 220px;
margin-bottom: 20px;
position: relative;
overflow:hidden;
}
#stations>div>.records{
background-image: url(http://benlevywebdesign.com/somafm/images/SomaFM.png);
background-repeat:no-repeat;
height: 220px;
margin-bottom: 20px;
overflow:hidden;
position:relative;
}
#stations>div>.records>h3 {
color: #FFF;
background-color: rgba(255,255,255, 0.45);
width:200px;
margin-top:0px;
margin-bottom:-5px;
padding: 10px 10px 3px;
}
#stations>div>.records>.recordsinfo{
position: absolute;
left:-150px;
bottom: 0;
margin: 5px 10px;
}
#-moz-keyframes slideout {
0% { left:0; }
100% { left:-100px; }
}
#-webkit-keyframes slideout {
0% { left:0; }
100% { left:-100px; }
}
#keyframes slideout {
0% { left:0; }
100% { left:-100px; }
}
#stations>div>.records:hover{
height: 220px;
width:220%;
margin-bottom: 20px;
left:-100px;
overflow:hidden;
position: relative;
-moz-animation: slideout 0.75s 1;
-webkit-animation: slideout 0.75s 1;
animation: slideout 0.75s 1;
}
#stations>div>.records>.recordsinfo:hover{
height: 220px;
width:220%;
left:150px;
overflow:hidden;
position: relative;
-moz-animation: slidein 0.75s 1;
-webkit-animation: slidein 0.75s 1;
animation: slidein 0.75s 1;
}
and here is a fiddle of it working up until the last part which is the description not working and sliding out left!
Updated fiddle
http://jsfiddle.net/Xc9U6/11/
Try this - DEMO
HTML
<div id="stations">
<div class="grid_3">
<div class="records"><!-- sleeve -->
<h3>Groove Salad</h3>
</div>
<div class="recordsinfo">Station description.</div>
</div>
</div>
CSS
#stations > div {
background-image: url(http://benlevywebdesign.com/somafm/images/SomaFMrecord.png);
background-repeat:no-repeat;
height: 220px;
margin-bottom: 20px;
position: relative;
overflow:hidden;
}
#stations > div:hover .records {
margin-left: -110px;
}
#stations .records{
background-image: url(http://benlevywebdesign.com/somafm/images/SomaFM.png);
background-repeat:no-repeat;
height: 220px;
margin: 0 0 20px 0;
overflow:hidden;
position:relative;
-webkit-transition: all .75s;
-moz-transition: all .75s;
transition: all .75s;
}
#stations h3 {
color: #FFF;
background-color: rgba(255,255,255, 0.45);
width:200px;
margin-top:0px;
margin-bottom:-5px;
padding: 10px 10px 3px;
}
#stations > div:hover .recordsinfo {
margin-left: 0;
}
#stations .recordsinfo {
background: rgba(0, 0, 0, .8);
color: #fff;
position: absolute;
width: 150px;
bottom: 0;
margin: 5px 10px 5px -150px;
-webkit-transition: all .75s;
-moz-transition: all .75s;
transition: all .75s;
}
If I understood well you want the title to remain where it is? if so here you go:
#stations > div > .records:hover h3 {
margin-left: 100px;
}
Finally! You had lots of different issues here, from setting a width of 220%, instead of px, To trying to animate a child of an animation (so it's positions were off), to not defining the slidein animation you wanted to use.
Try this: jsFiddle