House Decorating Fish Tank by Codding(HTML & CSS)

Ticker

10/recent/ticker-posts

House Decorating Fish Tank by Codding(HTML & CSS)

AK Creative 12/09/2020 03:20:00 PM

Animated Fish With Tank


HTML Code

 <!DOCTYPE html>
<html>
<head>
<title>Animate FIsh With Bowl</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="bowl">
<div class="water">
<img src="fish.png" class="fish">
<img src="fish1.png" class="fish1">
<img src="fish3.png" class="fish3">
</div>
</div>
<div class="shadow">
</body>
</html>

CSS Code

body
{
margin: 0;
padding: 0;
background: #262626;
}
.bowl
{
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
width: 500px;
height: 500px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
border: 4px solid #fbb;
transform-origin: bottom center;
animation: animate 5s linear infinite
}
.bowl:before
{
content: '';
position: absolute;
top: -10px;
left: 50%;
transform: translate(-50%);
width: 40%;
height: 30px;
background: rgba(66,66,66);
border: 4px solid #fff;
border-radius: 50%;
}
.bowl:after
{
content: '';
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%,-50%);top width: 150px;
height: 80px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
}
.water
{
position: absolute;
top: 50%;
left: 5px;
right: 5px;
bottom: 1px;
background: rgba(65,193,251,0.5);
border-bottom-right-radius: 230px;
border-bottom-left-radius: 230px;
transform-origin: top center;
animation: animateWater 5s linear infinite
}
.water:before
{
content: '';
position: absolute;
top: -10px;
left: 0;
width: 100%;
height: 20px;
border-radius: 50%;
background: #1fa4e0;
}
.shadow
{
position: absolute;
top: calc(50% + 150px);
left: 50%;
transform: translate(-50%,-50%);
width: 300px;
height: 30px;
background: rgba(0,0,0,.5);
z-index: -1;
border-radius: 50%;
}
img.fish
{
width: 100px;
animation: animateFish 4s linear infinite;
}
@keyframes animateFish
{
0%
{
transform: translate(0,0) rotateY(180deg);
}
50%
{
transform: translate(180px,0) rotateY(180deg);
}
51%
{
transform: translate(180px,0) rotateY(0deg);
}
100%
{
transform: translate(0,0) rotateY(0deg);
}
}
img.fish1
{
width: 100px;
animation: animateFish 8s linear infinite;
}
@keyframes animateFish
{
0%
{
transform: translate(0,0) rotateY(180deg);
}
50%
{
transform: translate(180px,0) rotateY(180deg);
}
51%
{
transform: translate(180px,0) rotateY(0deg);
}
100%
{
transform: translate(0,0) rotateY(0deg);
}
}
img.fish3
{
width: 75px;
animation: animateFish 6s linear infinite;
}
@keyframes animateFish
{
0%
{
transform: translate(0,0) rotateY(180deg);
}
50%
{
transform: translate(180px,0) rotateY(180deg);
}
51%
{
transform: translate(180px,0) rotateY(0deg);
}
100%
{
transform: translate(0,0) rotateY(0deg);
}
}
@keyframes animate
{
0%
{
transform: translate(-50%,-50%) rotate(0deg);
}
25%
{
transform: translate(-50%,-50%) rotate(15deg);
}
50%
{
transform: translate(-50%,-50%) rotate(0deg);
}
100%
{
transform: translate(-50%,-50%) rotate(0deg);
}
}
@keyframes animateWater
{
0%
{
transform: rotate(0deg);
}
25%
{
transform: rotate(-20deg);
}
50%
{
transform: rotate(0deg);
}
75%
{
transform: rotate(20deg);
}
100%
{
transform: rotate(20deg);
}
}

OUTPUT



Post a Comment

52 Comments

  1. TanviDecember 9, 2020 at 3:21 PM

    Wow 😊😊😊😊😊

    ReplyDelete
  2. TanviDecember 9, 2020 at 3:22 PM

    Amazing😊😊😊

    ReplyDelete
  3. Unique KnowDecember 9, 2020 at 3:22 PM

    Wowwww
    Nice fish tank

    ReplyDelete
  4. ArzuDecember 9, 2020 at 3:28 PM

    Superb Fish Tank

    ReplyDelete
  5. UnknownDecember 9, 2020 at 3:29 PM

    Amazing

    ReplyDelete
  6. UnknownDecember 9, 2020 at 3:30 PM

    Very Very Interesting

    ReplyDelete
  7. UnknownDecember 9, 2020 at 3:30 PM

    Wonderful
    Tank

    ReplyDelete
  8. UnknownDecember 9, 2020 at 3:31 PM

    Very Very Nice

    ReplyDelete
  9. UnknownDecember 9, 2020 at 3:32 PM

    Good Animation

    ReplyDelete
  10. AnonymousDecember 9, 2020 at 3:32 PM

    Wow 🌼🌺🌼🌺

    ReplyDelete
  11. UnknownDecember 9, 2020 at 3:32 PM

    Attractive

    ReplyDelete
  12. AnonymousDecember 9, 2020 at 3:33 PM

    Wonderful 🌺😊🌼

    ReplyDelete
  13. UnknownDecember 9, 2020 at 3:34 PM

    Fantastic Fish

    ReplyDelete
  14. UnknownDecember 9, 2020 at 3:34 PM

    Superb quality and excellent

    ReplyDelete
  15. UnknownDecember 9, 2020 at 3:35 PM

    Gazab

    ReplyDelete
  16. UnknownDecember 9, 2020 at 3:36 PM

    Excellent and Brilliant

    ReplyDelete
  17. KritikaDecember 9, 2020 at 3:37 PM

    Wonderful

    ReplyDelete
  18. UnknownDecember 9, 2020 at 3:38 PM

    Nice Post Guys

    ReplyDelete
  19. UnknownDecember 9, 2020 at 3:38 PM

    Very Stylish

    ReplyDelete
  20. UnknownDecember 9, 2020 at 3:39 PM

    Lovely

    ReplyDelete
  21. UnknownDecember 9, 2020 at 3:40 PM

    Fabulous idea

    ReplyDelete
  22. KKDecember 9, 2020 at 3:41 PM

    Osm

    ReplyDelete
  23. UnknownDecember 9, 2020 at 3:41 PM

    Great

    ReplyDelete
  24. UnknownDecember 9, 2020 at 3:42 PM

    Intelligent work with HTML

    ReplyDelete
  25. UnknownDecember 9, 2020 at 3:42 PM

    Kallu
    Beautiful😍😍😍😍😍

    ReplyDelete
  26. UnknownDecember 9, 2020 at 3:43 PM

    Best Work

    ReplyDelete
  27. UnknownDecember 9, 2020 at 3:44 PM

    Exclusive

    ReplyDelete
  28. UnknownDecember 9, 2020 at 3:45 PM

    Brilliant work with html

    ReplyDelete
  29. snehaDecember 9, 2020 at 3:46 PM

    Brilliant

    ReplyDelete
  30. son aDecember 9, 2020 at 3:46 PM

    Excellent

    ReplyDelete
  31. UnknownDecember 9, 2020 at 3:47 PM

    Interesting

    ReplyDelete
  32. UnknownDecember 9, 2020 at 3:48 PM

    Awesome

    ReplyDelete
  33. UnknownDecember 9, 2020 at 3:48 PM

    Nice Fish

    ReplyDelete
  34. UnknownDecember 9, 2020 at 3:49 PM

    100%

    ReplyDelete
  35. Rinku rinku upadhyayDecember 9, 2020 at 4:06 PM

    👌👌👌👌

    ReplyDelete
  36. Rinku rinku upadhyayDecember 9, 2020 at 5:08 PM

    ✋✋✋✋✋

    ReplyDelete
  37. Jaunpur GPDecember 9, 2020 at 5:45 PM

    Mind Blowing

    ReplyDelete
  38. WonderingDecember 9, 2020 at 5:48 PM

    Amazing

    ReplyDelete
  39. Excellent workDecember 9, 2020 at 5:49 PM

    Superb

    ReplyDelete
  40. WonderfulDecember 9, 2020 at 5:53 PM

    Good Works

    ReplyDelete
  41. Rock_ArviDecember 9, 2020 at 5:55 PM

    Attractive

    ReplyDelete
  42. A A ADecember 9, 2020 at 5:58 PM

    Mind Blowing

    ReplyDelete
  43. ArviDecember 9, 2020 at 5:58 PM

    Brilliant

    ReplyDelete
  44. UnknownDecember 9, 2020 at 5:59 PM

    Attractive

    ReplyDelete
  45. FabulousDecember 9, 2020 at 5:59 PM

    Excellent

    ReplyDelete
  46. MLLDecember 9, 2020 at 6:00 PM

    Superb

    ReplyDelete
  47. SuperDecember 9, 2020 at 6:19 PM

    interesting

    ReplyDelete
  48. UnknownDecember 9, 2020 at 8:52 PM

    Wow
    Brilliant
    Awesome
    Interesting
    Excellent
    Lovely
    😄😄😄😄😀🥰🥰🥰🥰🥰

    ReplyDelete
  49. UnknownDecember 10, 2020 at 6:26 AM

    Kallu
    Wow we👌🏽👌🏽👌🏽👌🏽👌🏽👌🏽👌🏽👌🏽

    ReplyDelete
  50. fitenessupdateDecember 11, 2020 at 12:10 AM

    Very good nice to see sundaram things are good

    ReplyDelete
  51. UnknownDecember 16, 2020 at 8:40 PM

    Wow
    Brilliant
    Awesome
    Interesting

    ReplyDelete