Skip to content

Instantly share code, notes, and snippets.

@joseph45666

joseph45666/index.html

Forked from anonymous/index.html
Created December 10, 2015 21:55
Show Gist options
  • Save joseph45666/eb97cc4a5b6199d479f7 to your computer and use it in GitHub Desktop.
Save joseph45666/eb97cc4a5b6199d479f7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<style id="jsbin-css">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
/* fallback rainbow image */
background: #F66 url(rainbow-gradient.jpg);
/*mozilla rainbow gradient*/
background-image: -moz-linear-gradient( left top, right bottom ,
from(red),
color-stop(16%, orange),
color-stop(32%, yellow),
color-stop(48%, green),
color-stop(60%, blue),
color-stop(76%, indigo),
to(violet));
/*webkit rainbow gradient*/
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0.00, red),
color-stop(16%, orange),
color-stop(32%, yellow),
color-stop(48%, green),
color-stop(60%, blue),
color-stop(76%, indigo),
color-stop(1.00, violet));
}
background: #;
}
.pic {
border: 10px solid #fff;
float: left;
height: 300px;
width: 400px;
margin: 20px;
overflow: hidden;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
}
/*MORPH*/
.morph {
-webkit-transition: all 5s ease;
-moz-transition: all 5s ease;
-o-transition: all 5s ease;
-ms-transition: all 5s ease;
transition: all 5s ease;
}
.morph:hover {
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
/* -webkit-transform: rotate(-360deg); */
}
</style>
<html>
<body>
<div class="morph pic">
<img src=http://ak-hdl.buzzfed.com/static/2014-04/enhanced/webdr02/11/10/anigif_enhanced-9390-1397224837-24.gif>
</div>
<script id="jsbin-source-html" type="text/html">
<html>
<body>
<div class="morph pic">
<img src=http://ak-hdl.buzzfed.com/static/2014-04/enhanced/webdr02/11/10/anigif_enhanced-9390-1397224837-24.gif>
</div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css"> * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
/* fallback rainbow image */
background: #F66 url(rainbow-gradient.jpg);
/*mozilla rainbow gradient*/
background-image: -moz-linear-gradient( left top, right bottom ,
from(red),
color-stop(16%, orange),
color-stop(32%, yellow),
color-stop(48%, green),
color-stop(60%, blue),
color-stop(76%, indigo),
to(violet));
/*webkit rainbow gradient*/
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0.00, red),
color-stop(16%, orange),
color-stop(32%, yellow),
color-stop(48%, green),
color-stop(60%, blue),
color-stop(76%, indigo),
color-stop(1.00, violet));
}
background: #;
}
.pic {
border: 10px solid #fff;
float: left;
height: 300px;
width: 400px;
margin: 20px;
overflow: hidden;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
}
/*MORPH*/
.morph {
-webkit-transition: all 5s ease;
-moz-transition: all 5s ease;
-o-transition: all 5s ease;
-ms-transition: all 5s ease;
transition: all 5s ease;
}
.morph:hover {
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
/* -webkit-transform: rotate(-360deg); */
}
</script>
</body>
</html>
Raw
jsbin.guzubu.css
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
/* fallback rainbow image */
background: #F66 url(rainbow-gradient.jpg);
/*mozilla rainbow gradient*/
background-image: -moz-linear-gradient( left top, right bottom ,
from(red),
color-stop(16%, orange),
color-stop(32%, yellow),
color-stop(48%, green),
color-stop(60%, blue),
color-stop(76%, indigo),
to(violet));
/*webkit rainbow gradient*/
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0.00, red),
color-stop(16%, orange),
color-stop(32%, yellow),
color-stop(48%, green),
color-stop(60%, blue),
color-stop(76%, indigo),
color-stop(1.00, violet));
}
background: #;
}
.pic {
border: 10px solid #fff;
float: left;
height: 300px;
width: 400px;
margin: 20px;
overflow: hidden;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
}
/*MORPH*/
.morph {
-webkit-transition: all 5s ease;
-moz-transition: all 5s ease;
-o-transition: all 5s ease;
-ms-transition: all 5s ease;
transition: all 5s ease;
}
.morph:hover {
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
/* -webkit-transform: rotate(-360deg); */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment