Question

我试图使用Animated.css库和jquery使这个图像缩放，但我不知道该怎么做。

<html>
  <head>
   <!-- Website Title & Description for Search Engine purposes -->
   <title>Code a Responsive Website with Twitter Bootstrap 3</title>
   <meta name="description" content="Learn how to code your first responsive website with the new Twitter Bootstrap 3.">
   <!-- Mobile viewport optimized -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <!-- Bootstrap CSS -->
   <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet">
   <link rel="stylesheet" href="animate.css-master/animate.min.css">
   <!-- Custom CSS -->
   <link rel="stylesheet" href="includes/css/styles.css">
   <!-- Include Modernizr in the head, before any other Javascript -->
   <script src="includes/js/modernizr-2.6.2.min.js"></script>
  </head>
 <body>
   <div class="row" id="features">
       <div class="col-sm-4 feature">
           <img src="images/badge_css3.jpg" alt="CSS3" class="img-circle">
           <p>90's authentic single-origin coffee stumptown Pinterest. Fap aesthetic dreamcatcher pickled Brooklyn irony.</p>
           <a href="https://www.udemy.com/build-beautiful-html5-website/" target="_blank" class="btn btn-warning btn-block">Learn to code HTML5</a>
       </div>
       <!-- end feature -->
       <div class="col-sm-4 feature">
           <img src="images/badge_css3.jpg" alt="CSS3" class="img-circle">
           <p>90's authentic single-origin coffee stumptown Pinterest. Fap aesthetic dreamcatcher pickled Brooklyn irony.</p>
           <a href="https://www.udemy.com/build-beautiful-html5-website/" target="_blank" class="btn btn-danger btn-block">Style it up with CSS3</a>
       </div>
       <!-- end feature -->
       <div class="col-sm-4 feature">
           <img src="images/badge_bootstrap.jpg" alt="Bootstrap 3" class="img-circle" id="closeButton">
           <p>90's authentic single-origin coffee stumptown Pinterest. Fap aesthetic dreamcatcher pickled Brooklyn irony.</p>
           <a href="http://getbootstrap.com/" target="_blank" class="btn btn-info btn-block">More Bootstrap</a>
       </div>
       <!-- end features -->
     </div>
  </body>
 </html>

当用户点击图像

时，如何使用类img-circle zoomIn制作图像

Answer 1

您需要在头部

中包含animated.css文件

<link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css">

或者你可以从这里获得animated.css。 https://raw.githubusercontent.com/daneden/animate.css/master/animate.css

如何使用animated.css放大此图像

1 个答案: