<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3+Owl Carousel插件实现的幻灯片添加镜头拉近特效</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Cantarell:400,400i,700|Fjalla+One|Hind:400,300,600);
body {
-webkit-font-smoothing: antialiased;
font-family: 'Cantarell', sans-serif;
width: 80%;
margin: 20px auto;
}
a:link,
a:visited,
a:active {
color: #9E0009;
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
.owl-item.active .item img {
animation: mobileburns 30s infinite;
}
@media screen and (min-width: 800px) {
.owl-item.active .item img {
animation: kenburns 30s infinite;
}
}
.item {
position: relative;
overflow: hidden;
}
.item .text-container {
position: relative;
background-color: #232323;
width: 100%;
padding: 20px 0;
display: block;
}
@media screen and (min-width: 800px) {
.item .text-container {
position: absolute;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px 0 10px 0;
}
}
.item .text-container.linked-item:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.item .text-container.linked-item:hover span {
text-decoration: underline;
}
.item .text-container > * {
padding: 0 20px 0 20px;
color: #FFFFFF;
margin: 0 0 .3rem 0;
}
.item p {
color: #FFFFFF;
margin: 0 0 .3rem 0;
}
.item h4.list-heading {
font-family: 'Fjalla One', sans-serif;
font-size: 1.3rem;
line-height: 1.7rem;
}
@media screen and (min-width: 800px) {
.item h4.list-heading {
font-size: 2.5rem;
line-height: 3.1rem;
}
}
.item h5.overline {
font-family: 'Cantarell', sans-serif;
font-size: 1.25rem;
line-height: 1.875rem;
text-transform: none;
font-weight: 400;
}
@media screen and (min-width: 800px) {
.item h5.overline {
font-size: 1.5rem;
}
}
.item img {
display: block;
max-height: 300px;
margin: 0 auto;
width: 100%;
}
@media screen and (min-width: 800px) {
.item img {
width: 100%;
max-height: 640px;
}
}
/* ANIMATIONS */
@keyframes kenburns {
5% {
transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
animation-timing-function: ease-in;
}
45% {
transform: scale3d(1.5, 1.5, 1.5) translate3d(-100px, -30px, 0px);
animation-timing-function: ease-in;
}
60% {
transform: scale3d(1.5, 1.5, 1.5) translate3d(-100px, -30px, 0px);
animation-timing-function: ease-in;
}
100% {
transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
animation-timing-function: ease-in;
}
}
@keyframes mobileburns {
5% {
transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
animation-timing-function: ease-in;
}
65% {
transform: scale3d(2.5, 2.5, 2.5) translate3d(-100px, -30px, 0px);
animation-timing-function: ease-in;
}
80% {
transform: scale3d(2.5, 2.5, 2.5) translate3d(-100px, -30px, 0px);
animation-timing-function: ease-in;
}
100% {
transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
animation-timing-function: ease-in;
}
}
@keyframes noburns {
100% {
transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
animation-timing-function: ease-in;
}
}
</style>
</head>
<body>
<script src="js/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="css/owl.carousel.css">
<div class="owl-carousel">
<div class="item">
<img class="owl-lazy" data-src="images/normal1.jpg" alt="An Image">
<span class="text-container">
<h4 class="list-heading">Image title</h4>
<h5 class="overline">A short description</h5>
<div class="rich-text"><p>More stuff about this<br></p></div>
<div class="caption">Image Credit: Froms someone</div>
</span>
</a>
</div>
<div class="item">
<img class="owl-lazy" data-src="images/normal2.jpg" alt="An Image">
<span class="text-container">
<h4 class="list-heading">Another Image title</h4>
<h5 class="overline">A short description</h5>
<div class="rich-text"><p>More stuff about this<br></p></div>
<div class="caption">Image Credit: Froms someone</div>
</span>
</div>
<div class="item">
<img class="owl-lazy" data-src="images/normal3.jpg" alt="An Image">
<span class="text-container">
<h4 class="list-heading">Image title</h4>
<h5 class="overline">A short description</h5>
<div class="rich-text"><p>More stuff about this<br></p></div>
<div class="caption">Image Credit: Froms someone</div>
</span>
</div>
<div class="item">
<img class="owl-lazy" data-src="images/rvc-1.jpg" alt="An Image">
<span class="text-container">
<h4 class="list-heading">Image title</h4>
<h5 class="overline">A short description</h5>
<div class="rich-text"><p>More stuff about this<br></p></div>
<div class="caption">Image Credit: Froms someone</div>
</span>
</div>
</div>
<script src='js/owl.carousel.min.js'></script>
<script>
$(document).ready(function() {
$(".owl-carousel").owlCarousel({
items: 1,
navigation: true,
autoplay: true,
pagination: true,
stopOnHover: true,
//lazyLoad: false
lazyLoad: true,
// addClassActive: true,
loop: true,
afterAction: afterAction
});
});
function changeClass(slide) {
setTimeout(function() {
$(".owl-item").each(function() {
if ($(this).index() === slide) {
$(this).addClass("active");
} else {
$(this).removeClass("active");
}
});
}, 500);
}
function afterAction() {
changeClass(this.owl.currentItem);
}
</script>
</body>
</html>
HTML5+CSS3+Owl Carousel插件实现带镜头拉近特效的幻灯片切换功能源码.zip
版权申诉
98 浏览量
2022-11-03
23:41:02
上传
评论
收藏 1.11MB ZIP 举报
HTML5+CSS3+Owl Carousel插件实现带镜头拉近特效的幻灯片切换功能源码.zip （8个子文件） 
132677731725925804 css 
owl.carousel.css 5KB images 
normal1.jpg 159KB normal2.jpg 153KB normal3.jpg 103KB rvc-1.jpg 672KB
index.html 6KB js jquery-1.11.1.min.js 94KB owl.carousel.min.js 39KB资源评论
