溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么用css3+html5實(shí)現(xiàn)VCD包裝盒

發(fā)布時(shí)間：2021-07-28 18:09:12 來源：億速云 閱讀：123 作者：chen 欄目：web開發(fā)

本篇內(nèi)容主要講解“怎么用css3+html5實(shí)現(xiàn)VCD包裝盒”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么用css3+html5實(shí)現(xiàn)VCD包裝盒”吧!



好了，這次給發(fā)夾分享一個(gè)CSS3+Javascript VCD包裝盒個(gè)性幻燈片的一個(gè)案例。

效果圖：
怎么用css3+html5實(shí)現(xiàn)VCD包裝盒 
圖片切換是不是很個(gè)性，效果也很不錯(cuò)，大家可以將其使用到自己的網(wǎng)站上。

先看下html：

代碼如下:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta content="text/html;charset=utf-8" http-equiv="content-type">
<link type="text/css" href="reset.css" rel="stylesheet">
<link type="text/css" href="main.css" rel="stylesheet">
<script type="text/javascript" src="../../jquery-1.8.3.js"></script>
<script type="text/javascript" src="vcd.js"></script>
<script type="text/javascript">
$(function ()
{
vcd.init();
vcd.autoPlay();
});
</script>
</head>
<body>
<div id="vcd">
<i id="cd"></i>
<ul>
<li class="active"><a><img alt="超人歸來" src="ad/1.jpg"/></a></li>
<li><a><img alt="超凡蜘蛛俠" src="ad/2.jpg"/></a></li>
<li><a><img alt="黑暗騎士：蝙蝠俠" src="ad/3.jpg"/></a></li>
<li><a><img alt="美國隊(duì)長" src="ad/4.jpg"/></a></li>
<li><a><img alt="雷神托兒" src="ad/5.jpg"/></a></li>
<li><a><img alt="金剛狼" src="ad/6.jpg"/></a></li>
</ul>
<a id="wrapPager" title="超人歸來" target="_blank"></a>
<div id="indexBar">
<a class="active">0</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</div>
</div>

</body>
</html>


可以看到div#vcd是最外層容器，給它設(shè)置了一個(gè)背景；ul li 分別設(shè)置圖片元素；i#cd設(shè)置背景為光盤，然后設(shè)置顯示位置；div#indexBar中顯示圖片的索引，供點(diǎn)擊。

CSS：

代碼如下:


#vcd, #vcd ul, #vcd #wrapPager
{
width: 200px;
height: 272px;
}
#vcd, #vcd ul, #vcd #wrapPager, #cd
{
background: url("images/disk.png") no-repeat 0 0;
}
#vcd
{
position: relative;
margin: 20px auto 0;
}
#vcd ul, #vcd #wrapPager, #cd
{
position: absolute;
}
#vcd ul
{
background-position: -263px 3px;
}
#vcd ul li, #vcd ul li a, #vcd ul li a img
{
display: block;
width: 178px;
height: 264px;
overflow: hidden;
}
#vcd ul li
{
top: 5px;
left: 2px;
opacity: 0;
/*visibility: hidden;*/
-webkit-transition: opacity linear .6s;
/*-webkit-transition: visibility linear .6s;*/
-moz-transition: opacity linear .6s;
-ms-transition: opacity linear .6s;
transition: opacity linear .6s;
position: absolute;
}
#vcd ul li.active
{
opacity: 1;
/*visibility: visible;*/
}
#vcd #cd
{
top: 64px;
left: 78px;
width: 146px;
height: 146px;
background-position: -510px 0;
-webkit-transition: left ease .4s, -webkit-transform ease 1.2s .44s;
-moz-transition: left ease .4s, -moz-transform ease 1.2s .44s;
-ms-transition: left ease .4s, -ms-transform ease 1.2s .44s;
transition: left ease .4s, transform ease 1.2s .44s;
}
#vcd #cd.switch
{
left: 120px;
-webkit-transform: rotate(2520deg);
-moz-transform: rotate(2520deg);
-ms-transform: rotate(2520deg);
transform: rotate(2520deg);
}
#vcd #wrapPager
{
display: block;
left: 0;
top: 2px;
}
#vcd #indexBar
{
top: 235px;
left: 25px;
text-align: center;
overflow: hidden;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity linear .6s;
-moz-transition: opacity linear .6s;
-ms-transition: opacity linear .6s;
transition: opacity linear .6s;
position: absolute;
}
#vcd:hover #indexBar
{
opacity: 1;
visibility: visible;
}
#vcd #indexBar a
{
display: inline-block;
margin: 0 4px;
height: 0;
width: 0;
border: 4px #9f9f9f solid;
border-radius: 100%;
text-indent: -200px;
overflow: hidden;
}
#vcd #indexBar a:hover, #vcd #indexBar a.active
{
width: 4px;
height: 4px;
border-color: #05c7fe;
border-width: 2px;
}


對于CSS大家可以照著敲一下，對于位置的布局主要就是依賴position:relative和position:absolute;然后大家會發(fā)現(xiàn)使用CSS3的過渡和變形：transition和transform 我簡單提一下：

1、transition : left 1s ease 0s ;

參數(shù)1：需要過渡效果的屬性，可以為單個(gè)屬性：width,left等，也可以設(shè)置為all。

參數(shù)2：過渡的持續(xù)時(shí)間

參數(shù)3：過渡的速率動畫，這個(gè)大家有興趣可以查查，就是先慢后快，勻速之類的。

參數(shù)4：過渡開始的延時(shí)時(shí)間

transition也支持如下寫法：

transition-property:border, color , text-shadow ;

transition-duration:2s , 3s , 3s ;

2、transform支持幾種變形

transform:scale(0.5) 縮放

transform:rotate(90deg)旋轉(zhuǎn)90度

transform:skew(10deg 2deg)斜切，矩形轉(zhuǎn)化為平行四邊形

transform:matrix() 這個(gè)矩陣變形 http://www.useragentman.com/matrix/ 這個(gè)網(wǎng)站提供在線設(shè)計(jì)矩陣

transform:translate(40px 20px)平移

例外提供了：transform-origin：20% 20%；用于修改變形效果的起點(diǎn)，默認(rèn)為重點(diǎn)

當(dāng)然我們這個(gè)例子用的是旋轉(zhuǎn)，也就不用修改變形效果起點(diǎn)了。


最后是JS：

代碼如下:


/**
* Created with JetBrains WebStorm.
* User: zhy
* Date: 14-6-15
* Time: 下午6:26
* To change this template use File | Settings | File Templates.
*/
var vcd = {
/**
* 常量
*/
ID_VCD: "vcd",
ID_INDEXBAR: "indexBar",
ID_CD: "cd",
CLASS_ACTIVE: "active",
CLASS_CD_SWITCH: "switch",
currentIndex: 0,
isRunning: false,
timer: null,
init: function ()
{
/**
* 初始化數(shù)據(jù)與事件
*/
vcd.vcd = $("#" + vcd.ID_VCD);
vcd.cd = $("#" + vcd.ID_CD);
vcd.imgs = $("li", vcd.vcd);
vcd.indexBar = $("#" + vcd.ID_INDEXBAR);
vcd.vcd.mouseover(function (event)
{
clearInterval(vcd.timer);
});
vcd.vcd.mouseout(function ()
{
vcd.autoPlay();
})
;
$("a", vcd.indexBar).click(vcd.dotClick);
},
/**
* 按鈕點(diǎn)擊切換
* @param event
*/
dotClick: function (event)
{
//如果當(dāng)前動畫還在運(yùn)行，則直接返回
if (vcd.isRunning)return;
vcd.isRunning = true;
$("a", vcd.indexBar).removeClass(vcd.CLASS_ACTIVE);
$(this).addClass(vcd.CLASS_ACTIVE);
vcd.currentIndex = $(this).text();
vcd.cd.addClass(vcd.CLASS_CD_SWITCH);
setTimeout(vcd.resetDotClick, 1500);
event.preventDefault();//阻止a的默認(rèn)跳轉(zhuǎn)頁面
},
/**
* 當(dāng)cd動畫結(jié)束后，更新圖片
*/
resetDotClick: function ()
{
vcd.cd.removeClass(vcd.CLASS_CD_SWITCH);
vcd.imgs.removeClass(vcd.CLASS_ACTIVE);
vcd.imgs.eq(vcd.currentIndex).addClass(vcd.CLASS_ACTIVE);
vcd.isRunning = false;
},
autoClick: function ()
{
var as = $("a", vcd.indexBar);
vcd.currentIndex++;
if (vcd.currentIndex == as.length)
{
vcd.currentIndex = 0;
}
as.removeClass(vcd.CLASS_ACTIVE);
as.eq(vcd.currentIndex).addClass(vcd.CLASS_ACTIVE);
vcd.cd.addClass(vcd.CLASS_CD_SWITCH);
setTimeout(vcd.resetDotClick, 1500);
},
/**
* 自動播放
*/
autoPlay: function ()
{
vcd.timer = setInterval(function ()
{
vcd.autoClick();
}, 3000);
}
}
;


單例的寫法，定義了一個(gè)對象，然后用戶通過vcd.init() ;vsd.autoPlay()調(diào)用、

代碼如下:


<script type="text/javascript">
$(function ()
{
vcd.init();
vcd.autoPlay();
});
</script>

到此，相信大家對“怎么用css3+html5實(shí)現(xiàn)VCD包裝盒”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手