Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @font-face {font-family: Lato; src: url(http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext);}
- body{
- display: -webkit-flex;
- display: -moz-flex;
- display: -ms-flex;
- display: -o-flex;
- display: flex;
- justify-content: center;
- background-color: #696969;
- align-items: center;
- height:100vh;
- }
- .box{
- position:relative;
- overflow:hidden;
- display: -webkit-flex;
- display: -moz-flex;
- display: -ms-flex;
- display: -o-flex;
- padding:100px;
- margin: auto;
- }
- .box li{
- list-style-type: none;
- transition: all 2s;
- letter-spacing:12px;
- font-size:120px;
- font-family: Lato;
- font-weight: bold;
- }
- .box:hover li{
- transform: rotate(55deg) translateY(-300px);
- opacity:0;
- filter: blur(30px);
- }
- .box:hover::after {
- transform: scale(0.8);
- transition-delay: 2.4s;
- opacity: 0.8;
- }
- li:nth-child(1){
- transition-delay: 0;
- }
- li:nth-child(2){
- transition-delay: 0.1s;
- }
- li:nth-child(3){
- transition-delay: 0.2s;
- }
- li:nth-child(4){
- transition-delay: 0.3s;
- }
- li:nth-child(5){
- transition-delay: 0.4s;
- }
- li:nth-child(6){
- transition-delay: 0.5;
- }
- li:nth-child(7){
- transition-delay: 0.6;
- }
- li:nth-child(8){
- transition-delay: 0.7;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement