資訊專欄INFORMATION COLUMN
摘要：今天是我第一次寫博客，因?yàn)闆](méi)經(jīng)驗(yàn)嘛，我就隨便寫寫，我也希望自己以后能堅(jiān)持寫下去，不為別的，就為了自己能夠更好地學(xué)習(xí)編程，能夠追隨行業(yè)大牛的腳步，從此贏取白富美，走上人生巔峰額，理想遠(yuǎn)大呵好吧，步入正題，因?yàn)槟壳霸趯W(xué)加了一些
2018-11-10
今天是我第一次寫博客，因?yàn)闆](méi)經(jīng)驗(yàn)嘛，我就隨便寫寫，我也希望自己以后能堅(jiān)持寫下去，不為別的，就為了自己能夠更好地學(xué)習(xí)編程，能夠追隨行業(yè)大牛的腳步，從此贏取白富美，走上人生巔峰（額，理想遠(yuǎn)大呵！）
好吧，步入正題，因?yàn)槟壳霸趯W(xué)java,加了一些培訓(xùn)機(jī)構(gòu)的群，跟著做了一個(gè)小項(xiàng)目，就是做個(gè)頁(yè)面，當(dāng)鼠標(biāo)懸浮于圖片之上的時(shí)候，圖片會(huì)實(shí)現(xiàn)一個(gè)放大旋轉(zhuǎn)的效果，經(jīng)簡(jiǎn)單的，具體演示看下圖：
我覺(jué)得這個(gè)項(xiàng)目的難點(diǎn)有兩點(diǎn)：
一，首先講一下如何做背景六邊形
這個(gè)六邊形其實(shí)是在li標(biāo)簽中，放置兩個(gè)div標(biāo)簽，并且都是用rgba設(shè)置成黑色半透明，在正常情況下我們都知道，一個(gè)li標(biāo)簽里放兩個(gè)與li標(biāo)簽一樣大的div標(biāo)簽，肯定會(huì)放不下，這樣，有一個(gè)div會(huì)被擠出去，如圖所示
為了把兩個(gè)div都放入li中，就需要讓另一個(gè)div飄起來(lái)，覆蓋在上面，這里就需要介紹一下絕對(duì)位置 ，
position:absolute;
left: 0;
top: 0;
然后在div的父標(biāo)簽li中調(diào)用相對(duì)位置，將飄在外邊的的div拉回去，
position:relative;
這樣，我們就可以使用css3的transform屬性來(lái)旋轉(zhuǎn)兩個(gè)div，這樣就可以得到一個(gè)六邊形
二，鼠標(biāo)放置圖片上，圖片顯示旋轉(zhuǎn)放大效果
要實(shí)現(xiàn)這個(gè)功能，要用到css中的hover選擇器，用法如下
選擇鼠標(biāo)指針浮動(dòng)在其上的元素，并設(shè)置其樣式：
image:hover
{
transform：scale（1.4） rotate（360deg）;
}
當(dāng)然了，如果僅僅這樣就結(jié)束了，你是看不出效果的，因?yàn)楫嬅媲袚Q太快了，所以再此要用到css3 過(guò)渡屬性transition，讓css效果轉(zhuǎn)換，持續(xù)1秒
transition-duration:1s
就這些吧，再附個(gè)源碼（有些改動(dòng)）
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多邊形旋轉(zhuǎn)放大title>
head>
<body>
<div class="box">
<ul>
<li><img src="images/1.png">li>
<li><img src="images/2.png">li>
<li><img src="images/3.png">li>
<li><img src="images/4.png">li>
<li><img src="images/5.png">li>
<li class="cols2"><img src="images/6.png">li>
<li><img src="images/7.png">li>
<li><img src="images/8.png">li>
<li><img src="images/9.png">li>
<li><img src="images/10.png">li>
<li><img src="images/11.png">li>
<li><img src="images/12.png">li>
<li><img src="images/13.png">li>
<li><img src="images/14.png">li>
ul>
div>
body>
<style type="text/css">
body{
margin: 0;
background-image: url("images/bodyBg.jpg");
}
.box{
background-color: #d09324;
width:1000px;
height: 550px;
margin:100px auto;
background-image: url("images/bodyBg.jpg");
}
ul{
margin:0;
padding:18px;
list-style: none;
}
li{
position:relative;
background-color:rgba(0,0,0,0.5);
height: 105px;
width: 180px;
float: left;
margin:30px 5px;
}
li:before, li:after{
content: "";
background-color:rgba(0,0,0,0.5);
height: 100px;
width: 180px;
position:absolute;
left: 0;
top: 0;
}
li:before{
transform:rotate(60deg);
}
li:after{
transform:rotate(-60deg);
}
.cols2{
margin-left:100px;
}
img{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
z-index: 9;
transition-duration:1s;
}
.box img:hover {
transform:scale(1.4) rotate(360deg);
}
style>
html>
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/1566.html
摘要：在使用上述模板，默認(rèn)從下加載。介紹是現(xiàn)代化服務(wù)器端的模板引擎，不同與其它幾種模板的是的語(yǔ)法更加接近，并且具有很高的擴(kuò)展性。特點(diǎn)支持無(wú)網(wǎng)絡(luò)環(huán)境下運(yùn)行，由于它支持原型，然后在標(biāo)簽里增加額外的屬性來(lái)達(dá)到模板數(shù)據(jù)的展示方式。 SpringBoot 是為了簡(jiǎn)化 Spring 應(yīng)用的創(chuàng)建、運(yùn)行、調(diào)試、部署等一系列問(wèn)題而誕生的產(chǎn)物，自動(dòng)裝配的特性讓我們可以更好的關(guān)注業(yè)務(wù)本身而不是外部的XML配置，...
摘要：可行性分析是通過(guò)來(lái)判定百度爬蟲(chóng)并返回的。然而并沒(méi)有卵用參考資料如何解決百度爬蟲(chóng)無(wú)法爬取搭建在上的個(gè)人博客的問(wèn)題 本文最初發(fā)布于我的個(gè)人博客：咀嚼之味 我寫技術(shù)博客有兩個(gè)原因：一是總結(jié)自己近日的研究成果，二是將這些成果分享給大家。所以就我個(gè)人來(lái)說(shuō)，還是比較希望寫出來(lái)的文章有更多的人能夠看到的。我最近注意到我的博客的流量大多來(lái)自于谷歌，而幾乎沒(méi)有來(lái)源于百度的。而本文就旨在提出這個(gè)...
摘要：原文鏈接恰當(dāng)?shù)貙W(xué)習(xí)適合第一次編程和非的程序員持續(xù)時(shí)間到周前提無(wú)需編程經(jīng)驗(yàn)繼續(xù)下面的課程。如果你沒(méi)有足夠的時(shí)間在周內(nèi)完成全部的章節(jié)，學(xué)習(xí)時(shí)間盡力不要超過(guò)周。你還不是一個(gè)絕地武士，必須持續(xù)使用你最新學(xué)到的知識(shí)和技能，盡可能地經(jīng)常持續(xù)學(xué)習(xí)和提高。 原文鏈接：How to Learn JavaScript Properly 恰當(dāng)?shù)貙W(xué)習(xí) JavaScript （適合第一次編程和非 JavaSc...
閱讀 724·2023-04-25 19:43
閱讀 3921·2021-11-30 14:52
閱讀 3794·2021-11-30 14:52
閱讀 3859·2021-11-29 11:00
閱讀 3790·2021-11-29 11:00
閱讀 3882·2021-11-29 11:00
閱讀 3562·2021-11-29 11:00
閱讀 6138·2021-11-29 11:00
