uikit带悬浮抖动的卡片布局效果代码

代码语言:html

所属分类:布局界面

代码描述:uikit带悬浮抖动的卡片布局效果代码

代码标签: uikit 卡片 抖动

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <!-- UIkit CSS -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/uikit.min.css">

    <!-- UIkit JS -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/uikit.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/uikit-icons.min.js"></script>
</head>

<body>
  

    <!-- UIkit SECTION -->
    <div class="uk-section uk-section-default">
        <div class="uk-container">
            <div class="uk-margin uk-grid-small uk-child-width-expand@s uk-text-center" uk-grid>
                <div>
                    <div class="uk-animation-toggle" tabindex="0">
                        <div class="uk-margin uk-card uk-card-default uk-card-hover uk-animation-shake">
                            <div class="uk-card-media-top">
                                <img src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png" alt="">
                            </div>
                            <div class="uk-card-body">
                                <div class="uk-card-badge uk-label">Badge</div>
                                <h3 class="uk-card-title">Media 1</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="uk-animation-toggle" tabindex="0">
                  .........完整代码请登录后点击上方下载按钮下载查看

网友评论0