使用HTML CSS和JavaScript创建图像动画

最新推荐文章于 2021-11-02 15:47:33 发布

X W F

最新推荐文章于 2021-11-02 15:47:33 发布

阅读量239

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_46399258/article/details/106618687

版权

javascript 专栏收录该内容

73 篇文章 1 订阅

订阅专栏

<!DOCTYPE html> 
<html> 

<head> 
    <title>Lightbox Gallery</title> 
</head> 

<body> 
    <h2>GeeksforGeeks</h2> 
    <b>A Computer Science Portal for Geeks</b> 
    <div class="gallery"> 
        <a href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142254/html9.png"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143104/html10.png"> 
        </a> 
        <a href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142245/CSS8.png"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143101/CSS9.png"> 
        </a> 
        <a href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142240/Bootstrap5.png"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143058/Bootstrap6.png"> 
        </a> 
        <a href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142257/JavaScript2.png"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143106/JavaScript3.png"> 
        </a> 
        <a href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142303/jquery.png"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143108/jquery4.png"> 
        </a> 
        <a href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142309/php7.png"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143112/php8.png"> 
        </a> 
    </div> 
</body> 

</html>
通过CSS设计结构：在本部分中，我们将添加一些CSS属性以使图像具有吸引力。

CSS代码如下：

<style> 
    body { 
        text-align: center; 
    } 

    h2 { 
        color: green; 
    } 

    .gallery { 
        margin: 10px 40px; 
    } 

    .gallery img { 
        width: 200px; 
        height: 50px; 
        transition: 1s; 
        padding: 5px; 
    } 

    .gallery img:hover { 
        filter: drop-shadow(4px 4px 6px gray); 
        transform: scale(1.1); 
    } 
</style> 
最终，在这一部分中，你必须将下载的CSS和JS文件链接到你的代码中。你可以通过解压缩文件来简单地链接下载的文件。对于CSS文件，请使用带有href属性的<link>标记作为CSS的地址，对于JS文件，请使用带有src属性的<script>标记作为代码。

最后，我们必须将data-lightbox =“ mygallery”属性放在<a>标记内。下一个和上一个按钮将在JS文件附加期间自动添加。

最终代码如下：

<!DOCTYPE html> 
<html> 

<head> 
    <title>Lightbox Gallery</title> 
    <link rel="stylesheet" 
          type="text/css" 
          href="lightbox2/dist/css/lightbox.min.css"> 
    <script src= 
"lightbox2/dist/js/lightbox-plus-jquery.min.js"> 
</script> 
    <style> 
        body { 
            text-align: center; 
        } 

        h2 { 
            color: green; 
        } 

        .gallery { 
            margin: 10px 40px; 
        } 

        .gallery img { 
            width: 200px; 
            height: 50px; 
            transition: 1s; 
            padding: 5px; 
        } 

        .gallery img:hover { 
            filter: drop-shadow(4px 4px 6px gray); 
            transform: scale(1.1); 
        } 
</style> 
</head> 

<body> 
    <h2>GeeksforGeeks</h2> 
    <b>A Computer Science Portal for Geeks</b> 
    <div class="gallery"> 
        <a href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142254/html9.png"
           data-lightbox="mygallery"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143104/html10.png"> 
        </a> 
        <a href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142245/CSS8.png" 
           data-lightbox="mygallery"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143101/CSS9.png"> 
        </a> 
        <a href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142240/Bootstrap5.png"
           data-lightbox="mygallery"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143058/Bootstrap6.png"> 
        </a> 
        <a href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142257/JavaScript2.png" 
           data-lightbox="mygallery"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143106/JavaScript3.png"> 
        </a> 
        <a href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142303/jquery.png"
           data-lightbox="mygallery"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143108/jquery4.png"> 
        </a> 
        <a href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142309/php7.png"
           data-lightbox="mygallery"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143112/php8.png"> 
        </a> 
    </div> 
</body> 

</html>