HTML5文章内部链接悬停时弹出媒体浮层动画特效大全

包含图片、动图、视频、全屏展示、波浪展示背景图等各种媒体悬停动效。可用于丰富文章阅读体验，也可以用于文字链接内嵌多媒体广告。

html5, hover, popup

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2307
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<body class="loading">
    <svg class="hidden">
        <defs>
            <symbol id="icon-arrow" viewBox="0 0 24 24">
                <title>arrow</title>
                <polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 " />
            </symbol>
            <symbol id="icon-drop" viewBox="0 0 24 24">
                <title>drop</title>
                <path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z" />
                <path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z" />
            </symbol>
        </defs>
    </svg>
    <main>
        <div class="content content--blended">
            
            <div data-pop-media="media1" class="pop-media" style="background-image: url(https://tympanus.net/Development/MediaPopUpEffect/img/11.jpg);">
                <div class="pop-media__overlay pop-media__overlay--c1"></div>
            </div>
            
            <div data-pop-media="media2" class="pop-media" style="background-image: url(https://tympanus.net/Development/MediaPopUpEffect/img/2.jpg);">
                <div class="pop-media__overlay pop-media__overlay--c2"></div>
            </div>
            
            <div data-pop-media="media3" class="pop-media pop-media--circle" style="background-image: url(https://tympanus.net/Development/MediaPopUpEffect/img/3.jpg);">
                <div class="pop-media__overlay pop-media__overlay--c3"></div>
            </div>
            
            <div data-pop-media="media4" class="pop-media" style="background-image: url(https://tympanus.net/Development/MediaPopUpEffect/img/4.jpg);"></div>
            
            <div data-pop-media="media5" class="pop-media" style="background-image: url(https://tympanus.net/Development/MediaPopUpEffect/img/5.jpg);">
                <div class="pop-media__overlay pop-media__overlay--c5"></div>
            </div>
            
            <div data-pop-media="media6" class="pop-media pop-media--slideshow">
                <div class="pop-media__slide pop-media__slide--current"><img src="https://tympanus.net/Development/MediaPopUpEffect/img/6.jpg" alt="A bird" />
                </div>
                <div class="pop-media__slide"><img src="https://tympanus.net/Development/MediaPopUpEffect/img/8.jpg" alt="Another bird" />
                </div>
                <div class="pop-media__slide"><img src="https://tympanus.net/Development/MediaPopUpEffect/img/10.jpg" alt="The ultimate bird" />
                </div>
            </div>
            
            <video data-pop-media="media7" class="pop-media" poster="videos/duck.jpg">
                <source src="videos/duck.mp4" type="video/mp4">
                    <source src="videos/duck.webm" type="video/webm">
                        <source src="videos/duck.ogg" type="video/ogg">
            </video>
            
            <div data-pop-media="media8" class="pop-media pop-media--reveal" style="background-image: url(https://tympanus.net/Development/MediaPopUpEffect/img/9.jpg);"></div>
            
            <div data-pop-media="media9" class="pop-media pop-media--full" style="background-image: url(https://tympanus.net/Development/MediaPopUpEffect/img/12.jpg);"></div>
            
            <div data-pop-media="media10" class="pop-media pop-media--circle pop-media--audio" style="background-image: url(https://tympanus.net/Development/MediaPopUpEffect/img/vinyl.svg);"></div>
            
            <div data-pop-media="media11" class="pop-media pop-media--fulltext">
                <div class="pop-media__overlay pop-media__overlay--c4"></div>
                <img class="pop-media__image" src="https://tympanus.net/Development/MediaPopUpEffect/img/8.jpg" alt="Great bird" />
                <span class="pop-media__text">alkaline</span>
            </div>
            
            <div data-pop-media="media12" class="pop-media pop-media--mask" style="background-image: url(https://tympanus.net/Development/MediaPopUpEffect/img/7.jpg);"></div>
            
            <div data-pop-media="media13" class="pop-media pop-media--mask pop-media--maskfull" style="background-image: url(https://tympanus.net/Development/MediaPopUpEffect/img/13.jpg);"></div>
            
            <div data-pop-media="media14" class="pop-media" style="background-image: url(https://tympanus.net/Development/MediaPopUpEffect/img/1.jpg);">
                <div class="pop-media__overlay pop-media__overlay--c7"></div>
            </div>
            
            <div data-pop-media="media15" class="pop-media pop-media--shadow" style="background-image: url(https://tympanus.net/Development/MediaPopUpEffect/img/giphy.gif);">
                <div class="pop-media__overlay pop-media__overlay--c6"></div>
            </div>
            
            <div data-pop-media="media16" class="pop-media pop-media--revealfull" style="background-image: url(https://tympanus.net/Development/MediaPopUpEffect/img/14.jpg);"></div>
            
            <div data-pop-media="media17" class="pop-media pop-media--split">
                <div class="pop-media__image pop-media__image--split" style="background-image: url(https://tympanus.net/Development/MediaPopUpEffect/img/15.jpg);">
                    <div class="pop-media__overlay pop-media__overlay--c8"></div>
                </div>
                <span class="pop-text__split pop-text__split--up">tor</span>
                <span class="pop-text__split pop-text__split--down">nado</span>
            </div>
            
            <p class="content__paragraph content__paragraph--c1">Much of the topography of North Dakota can be traced to the effects of Wisconsin-age glaciation, particularly in the north and east. Large portions of these <span id="trigger-1" class="pop-text" data-pop-text-out data-pop-media="media1">glaciated</span>                areas are peppered by countless ponds and lakes. A frightening number have been drained; nevertheless, these wetlands constitute one of the most important waterfowl production areas in the country.</p>
            <p class="content__paragraph content__paragraph--c2">Although North Dakota cannot boast of large <span id="trigger-2" class="pop-text" data-pop-media="media2">mountain ranges</span> like the states farther west, it is anything but a flat, monotonous state. Much of the state is characterized
                by gently rolling prairie.</p>
            <p class="content__paragraph content__paragraph--c3">Further, beach lines and <span id="trigger-3" class="pop-text" data-pop-media="media3">sandhills</span> left over from the last ice age provide a somewhat local variation to the level topography of some areas. The most rugged terrain occurs
                in the Little Missouri badlands, which are characterized by numerous steep slopes, severely eroded buttes, and arroyos.</p>
            <p class="content__paragraph content__paragraph--c4">A large percentage of the state is occupied by agricultural land. This category includes not only actively <span id="trigger-4" class="pop-text" data-pop-media="media4">farmed land</span>, but also retired croplands, domestic hayfields, fence
                rows, wood lots (referred to as tree claims), shelterbelts, orchards, and farmyards. While many of these areas are almost devoid of wildlife, others provide suitable habitat for a number of species.</p>
            <p class="content__paragraph content__paragraph--c5">Mixed-grass prairie is the predominant natural <span id="trigger-5" class="pop-text pop-text--s1" data-pop-media="media5">habitat</span>, and it supports the largest numbers of many of the prairie specialties which nest in the state. Both
                tall-grass prairie and short-grass prairie also exist locally.</p>
            <p class="content__paragraph content__paragraph--c6">A prairie habitat which is quite limited in the state is the sage-prairie found in the <span id="trigger-6" class="pop-text" data-pop-media="media6">southwest</span> corner (primarily in the western portions of Bowman and Slope Counties).
                Xeric in character, it is composed mostly of buffalo and blue grama grasses peppered with sage flats and clumps of prickly pear cactus.</p>
            <p class="content__paragraph content__paragraph--c7">Many prairie areas are punctuated by woody thickets, which host a number of species that are characteristic of woodland-edge habitats. These <span id="trigger-7" class="pop-text pop-text--s3" data-pop-media="media7">thickets</span> are composed
                mostly of large shrubs (wolfberry and silverberry are commonly found) in combination with a few small trees.</p>
            <p class="content__paragraph content__paragraph--c9">Most <span id="trigger-9" class="pop-text pop-text--s2" data-pop-media="media9">birders</span>, will be interested in breeding populations of marsh and prairie species. For these it would be best to come in June, preferably during the first
                three weeks.</p>
            <p class="content__paragraph content__paragraph--c8">With few exceptions, the <span id="trigger-8" class="pop-text pop-text--s4" data-pop-media="media8">birds</span> of the eastern half (especially along the Red, James, and Sheyenne Rivers) are the same species found in similar <span id="trigger-16"
                class="pop-text pop-text--s4" data-pop-media="media16">habitats</span> throughout eastern North America.</p>
            <p class="content__paragraph content__paragraph--c10"><span class="sound"><strong>Turn on your sound &#9836;</strong></span> You may have to walk south into the field where the grass gets a little taller to find the Baird’s Sparrow. It likes to <span id="trigger-10" class="pop-text" data-pop-media="media10">sing</span>                from the patches of wolfberry and silverberry. During the early stages of the nesting season, it is quite conspicuous. Later in summer singing diminishes, and the bird becomes a little harder to find. </p>
            <p class="content__paragraph content__paragraph--c11">One of the better places is a large <span id="trigger-11" class="pop-text" data-pop-media="media11">alkaline</span> lake near Westby on the Montana-North Dakota line. To find it, start in the center of town (by the large grain elevator), and
                drive east on State Highway 5 for 2.3 miles before turning left (north) on a gravel road. </p>
            <p class="content__paragraph content__paragraph--c12">Many local <span id="trigger-12" class="pop-text pop-text--s1" data-pop-media="media12">birders</span> and others who bird the area frequently were consulted in determining the status of each bird. Since these people are familiar with the
                birds, their songs, habits, and <span id="trigger-13" class="pop-text" data-pop-media="media13">habitats</span>, they are good at finding the more elusive species. On your first trip to the area, you may think that some birds are harder
                to find than is indicated here.</p>
            <p class="content__paragraph content__paragraph--c4">The shallow marsh can be productive in <span id="trigger-14" class="pop-text" data-pop-media="media14">migration</span> and late summer for shorebirds. In the drier fields watch for Bobolink and Grasshopper Sparrow. The wetter edges are good
                for Marsh and Sedge Wrens, Common Yellowthroat, and Savannah, Le Conte’s, and sometimes Sharp-tailed Sparrows. The lake attracts migrating waterfowl, shorebirds, gulls, and terns.</p>
            <p class="content__paragraph content__paragraph--c1">This large lake has <span id="trigger-15" class="pop-text pop-text--s5" data-pop-media="media15">little</span> vegetation around the perimeter, so few ducks or marsh species actually nest, but some use the area from spring through fall. You
                may expect lots of grebes (especially Western), American White Pelicans, Double-crested Cormorants, and Ring-billed and Franklin’s Gulls. </p>
            <p class="content__paragraph content__paragraph--c13">At times the wind never seems to quit blowing (especially in the winter), and summer storms can come up fast. Remember, North Dakota is one of the states occupying the <span id="trigger-17" class="pop-text" data-pop-media="media17">tornado</span>                belt. If violent weather hits, head for shelter immediately. Do not let all of this scare you off; most Dakotans have been easily surviving such weather for years.</p>
        </div>

</main>
    <a href="https://github.com/codrops/MediaPopUpEffect/" class="github-corner">
        <svg width="80" height="80" viewBox="0 0 250 250" class="github-icon">
            <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
            <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" class="octo-arm"></path>
            <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
            fill="currentColor" class="octo-body"></path>
        </svg>
    </a>
    <script src="https://tympanus.net/Development/MediaPopUpEffect/js/anime.min.js"></script>
    <script src="https://tympanus.net/Development/MediaPopUpEffect/js/imagesloaded.pkgd.min.js"></script>
    <script src="https://tympanus.net/Development/MediaPopUpEffect/js/plyr.js"></script>
    <script src="https://tympanus.net/Development/MediaPopUpEffect/js/main.js"></script>

</body>

包含图片、动图、视频、全屏展示、波浪展示背景图等各种媒体悬停动效。可用于丰富文章阅读体验，也可以用于文字链接内嵌多媒体广告。

html5, hover, popup

编辑器支持Emmet

快捷键

包含图片、动图、视频、全屏展示、波浪展示背景图等各种媒体悬停动效。可用于丰富文章阅读体验，也可以用于文字链接内嵌多媒体广告。

html5, hover, popup

HTML5悬停时文本3D翻转剥落并伴有碎片飞出的动画特效

HTML5悬停时文本弹性拉伸并冒泡的动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：