"CSS3 анимация эффекты"
Bootstrap 3.3.0 Snippet by ASDAFF

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <link href='http://fonts.googleapis.com/css?family=Lato:900' rel='stylesheet' type='text/css'> <style type="text/css"> body > div { margin:121px 149px; width:483px; height:298px; background:#676470; color:#fff; font-family:Lato; font-weight:900; font-size:3.4em; text-align:center; line-height:298px; transition:all 0.3s ease; } .border:hover { box-shadow: inset 0 0 0 25px #53a7ea; } .circle:hover { border-radius:50%; } @-webkit-keyframes swing { 15% { -webkit-transform: translateX(5px); transform: translateX(5px); } 30% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 50% { -webkit-transform: translateX(3px); transform: translateX(3px); } 65% { -webkit-transform: translateX(-3px); transform: translateX(-3px); } 80% { -webkit-transform: translateX(2px); transform: translateX(2px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes swing { 15% { -webkit-transform: translateX(5px); transform: translateX(5px); } 30% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 50% { -webkit-transform: translateX(3px); transform: translateX(3px); } 65% { -webkit-transform: translateX(-3px); transform: translateX(-3px); } 80% { -webkit-transform: translateX(2px); transform: translateX(2px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .swing:hover { -webkit-animation: swing 1s ease; animation: swing 1s ease; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .shrink:hover { -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } .threed:hover { box-shadow: 1px 1px #53a7ea, 2px 2px #53a7ea, 3px 3px #53a7ea; -webkit-transform: translateX(-3px); transform: translateX(-3px); } .rotate:hover { -webkit-transform: rotateZ(-30deg); -ms-transform: rotateZ(-30deg); transform: rotateZ(-30deg); } .grow:hover { -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); } .fade { opacity:0.5; } .fade:hover { opacity:1; } .color:hover { background:#53a7ea; } </style> </head> <body> <div class="border">Inset Border</div> <div class="color">Change Color</div> <div class="fade">Fade in</div> <div class="grow">Grow</div> <div class="shrink">Shrink</div> <div class="rotate">Rotate</div> <div class="threed">3D Shadow</div> <div class="swing">Swing</div> <div class="circle">Square to Circle</div> </body> </html>

Related: See More

Vue Material Kit PRO

Questions / Comments: