<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="gb2312">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<title>Ink Transition Effect | CodyHouse</title>
</head>
<body>
<main class="cd-main-content">
<div class="center">
<a href="#0" class="cd-btn cd-modal-trigger">点击试试</a><br><br><br>
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p><br><br><br>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p><br><br>
</div>
</main> <!-- .cd-main-content -->
<div class="cd-modal">
<div class="modal-content">
<h1>My Modal Content</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad modi repellendus, optio eveniet eligendi molestiae? Fugiat, temporibus! A rerum pariatur neque laborum earum, illum voluptatibus eum voluptatem fugiat, porro animi tempora? Sit harum nulla, nesciunt molestias, iusto aliquam aperiam est qui possimus reprehenderit ipsam ea aut assumenda inventore iste! Animi quaerat facere repudiandae earum quisquam accusamus tempora, delectus nesciunt, provident quae aliquam, voluptatum beatae quis similique in maiores repellat eligendi voluptas veniam optio illum vero! Eius, dignissimos esse eligendi veniam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis saepe amet sit fugit rerum, corporis minus vitae officia quaerat incidunt voluptate, blanditiis ea est quibusdam voluptas animi quasi totam magni, commodi praesentium. Possimus quam illo ipsam iste unde totam cupiditate deleniti, impedit assumenda hic eligendi natus tempora dolores quod mollitia ab non sunt eaque adipisci, suscipit quas aliquid officiis beatae. Necessitatibus voluptatibus, perferendis tenetur perspiciatis adipisci nesciunt eum ex fuga commodi iure numquam enim rem ullam labore nisi magni sint voluptatem quos! Eum iure exercitationem voluptates repellendus culpa doloremque laborum animi illum, sint fugit soluta possimus a fuga veritatis molestias corporis placeat illo pariatur dolor reiciendis earum, sapiente omnis. Placeat maiores omnis, porro officia, laborum eos. Fugiat mollitia inventore consequuntur odit eaque, rerum recusandae, eum sint molestiae consequatur culpa deserunt quae aliquid dolor tempora tenetur architecto repellendus enim quasi atque, odio voluptas. Tenetur repellendus explicabo ipsum inventore quia aut eos expedita necessitatibus asperiores blanditiis! Delectus nisi laudantium ipsum! Quasi blanditiis corrupti dicta maiores placeat laboriosam delectus ipsum facere voluptas, magnam voluptatibus, perferendis alias ullam saepe, perspiciatis recusandae voluptates, dolores praesentium?
</p>
</div> <!-- .modal-content -->
<a href="#0" class="modal-close">Close</a>
</div> <!-- .cd-modal -->
<div class="cd-transition-layer">
<div class="bg-layer"></div>
</div> <!-- .cd-transition-layer -->
<script src="js/jquery-2.1.4.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>
CSS3点击泼墨效果过渡切换特效.zip
版权申诉
10 浏览量
2022-11-16
21:21:30
上传
评论
收藏 571KB ZIP 举报
CSS3点击泼墨效果过渡切换特效.zip （11个子文件） 
CSS3点击泼墨效果过渡切换特效 
CSS3点击泼墨效果过渡切换特效.jpg 31KB jiaoben4262 css 
reset.css 1KB style.css 8KB img 
cd-icon-close.svg 510B
ink.png 380KB ink-separation.svg 3KB modal-bg.jpg 140KB
index.html 3KB js modernizr.js 15KB main.js 2KB jquery-2.1.4.js 82KB资源评论
