Advertisement
Guest User

CSS

a guest
Apr 4th, 2020
2,192
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.21 KB | None | 0 0
  1. @font-face {font-family: Lato; src: url(http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext);}
  2.  
  3. body{
  4.   display: -webkit-flex;
  5.   display: -moz-flex;
  6.   display: -ms-flex;
  7.   display: -o-flex;
  8.   display: flex;
  9.   justify-content: center;
  10.   background-color: #696969;
  11.   align-items: center;
  12.   height:100vh;
  13. }
  14.  
  15. .box{
  16.   position:relative;
  17.   overflow:hidden;
  18.   display: -webkit-flex;
  19.   display: -moz-flex;
  20.   display: -ms-flex;
  21.   display: -o-flex;
  22.   padding:100px;
  23.   margin: auto;
  24. }
  25.  
  26. .box li{
  27.   list-style-type: none;
  28.   transition: all 2s;
  29.   letter-spacing:12px;
  30.   font-size:120px;
  31.   font-family: Lato;
  32.   font-weight: bold;
  33. }
  34.  
  35. .box:hover li{
  36.   transform: rotate(55deg) translateY(-300px);
  37.   opacity:0;
  38.   filter: blur(30px);
  39. }
  40.  
  41. .box:hover::after {
  42.   transform: scale(0.8);
  43.   transition-delay: 2.4s;
  44.   opacity: 0.8;
  45. }
  46. li:nth-child(1){
  47.   transition-delay: 0;
  48. }
  49. li:nth-child(2){
  50.   transition-delay: 0.1s;
  51. }
  52. li:nth-child(3){
  53.   transition-delay: 0.2s;
  54. }
  55. li:nth-child(4){
  56.   transition-delay: 0.3s;
  57. }
  58. li:nth-child(5){
  59.   transition-delay: 0.4s;
  60. }
  61. li:nth-child(6){
  62.   transition-delay: 0.5;
  63. }
  64. li:nth-child(7){
  65.   transition-delay: 0.6;
  66. }
  67. li:nth-child(8){
  68.   transition-delay: 0.7;
  69. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement