twirl – Thingography.com
https://thingography.com
More than a Photo Gallery
Thu, 13 Feb 2025 20:57:27 +0000
en-US
hourly
1
-
CSS Swirl Animation
https://thingography.com/css-twirl/
Wed, 14 Mar 2018 21:00:22 +0000
http://thingography.com/?p=2060
.ani-box {width: 100%; height: 700px; overflow: hidden;
background-image: url('http://thingography.com/my-things/wp-content/uploads/css-img/twirl/computer-generated-design-123.jpg');
background-position: center center;
background-color: #000000;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#prop {
position: relative;
top: 50%;
left: 50%;
margin-top: -197px;
margin-left: -197px;
}
.ball {
width: 394px;
height: 394px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -197px;
margin-left: -197px;
animation: twirl 50s ease-in-out infinite;
}
@keyframes twirl {
0% {transform:rotateZ( 0deg) scale(0);}
50% {transform:rotateZ(20000deg) scale(5);}
100% {transform:rotateZ( 0deg) scale(0);}
}
]]>
