從事網頁設計有一段時間了, 最近有一些學平面設計的朋友也想了解網頁前端設計的一些技巧 , 前端基本工不外乎就是強大的三大語言龍頭, Ｈ.Ｃ.Ｊ , 老實說, 我並沒有很會寫 javascript , jquery 但是html＆ＣＳＳ倒是比較熟練, 今天我來說說 CSS3 當中非常迷人的hover效果 , 這對高手來說易如反掌, 不過對新手來說倒是挑戰性比較高 , 講解前建議你一定要對 html 標籤的父子關係要非常清楚, 不然會學的很痛苦。
（ＰＳ：例如 這個網站所呈現出來的效果）
一般基礎的hover css 就是
<ul>
<li>
<img src="" alt="" />
<span>test</span>
<p> javascript </p>
<a href="#"> hover </a>
</li>
</ul>
<style>
a { color:#eee; }
a:hover { color:#000; }
</style>
這樣是最基本的連結樣式, 等於只指定了a標籤在觸發時顏色由#eee 轉換為#000;
若要做出一個比較華麗的效果是不行的, 有些新手會用這種方式企圖想讓整個 li 裡頭的元素都動起來
<style>
img:hover { opacity:.7;}
span { fon-size:13px;}
span:hover { fon-size:15px;}
p { fon-size:13px;}
p:hover { fon-size:15px;}
</style>
等於是把li裡頭所有的元素都個別添加一個hover , 看起來好像合理, 但這是個致命錯誤 , 因為你指定的是li裡頭的子孫們當觸發時要產生什麼效果
所以正確的做法是要這樣, 你必須將hover事件指派給 li , 讓 li 來告訴他的子孫當觸發時要做些什麼事情
像是這樣
<style>
li:hover span {
fon-size:15px;
}
li:hover p {
fon-size:15px;
}
</style>
這樣子的寫法差別在哪, 原本的寫法是你滑鼠移到span或p的時候他才會產生樣式, 而寫在 li 在指派給裡頭的子孫
這樣你滑鼠移到li 的時候, 所有子元素只要你有設定樣式的都會同時執行hover事件
css選擇器這個邏輯打通之後, 接下來就靠你的創意了, 要加什麼動畫加什麼效果就看你了 , 當然之後我會陸續貼上一些源碼跟教學
歡迎來這裡的初學者一同研究, 當然如果是高手, 也歡迎你的指教！
在此獻上一個效果 , 像是以前flash常用的酷炫遮色閃光片效果 , 落落長呀
.button.cover-color {
position: relative;
overflow: hidden;
text-align: center;
font-size: 13px;
line-height: 40px;
color: #fff;
background: #c22a42;
display: inline-block;
width: 130px;
height: 40px;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-ms-transition: all .2s;
transition: all .2s;
-webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0);
-moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0);
-ms-transition-timing-function: cubic-bezier(0.165, 0.84, 0);
transition-timing-function: cubic-bezier(0.165, 0.84, 0)
}
.button.cover-color:after {
position: absolute;
top: -30px;
left: -145px;
content: '';
background: -moz-linear-gradient(left, rgba(255,255,255,0) 24%, rgba(255,255,255,0.96) 50%, #fff 51%, rgba(255,255,255,0.04) 76%, rgba(255,255,255,0) 77%);
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 24%, rgba(255,255,255,0.96) 50%, #fff 51%, rgba(255,255,255,0.04) 76%, rgba(255,255,255,0) 77%);
background: linear-gradient(to right, rgba(255,255,255,0) 24%, rgba(255,255,255,0.96) 50%, #fff 51%, rgba(255,255,255,0.04) 76%, rgba(255,255,255,0) 77%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );
display: block;
width: 180px;
height: 100px;
-webkit-transform: skew(20deg, 20deg);
transform: skew(20deg, 20deg);
-webkit-transition: all .2s;
-moz-transition: all .2s;
-ms-transition: all .2s;
transition: all .2s;
-webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0);
-moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0);
-ms-transition-timing-function: cubic-bezier(0.165, 0.84, 0);
transition-timing-function: cubic-bezier(0.165, 0.84, 0)
}
.button.cover-color:hover:after {
left: 105px;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-ms-transition: all .2s;
transition: all .2s;
-webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0);
-moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0);
-ms-transition-timing-function: cubic-bezier(0.165, 0.84, 0);
transition-timing-function: cubic-bezier(0.165, 0.84, 0)
}
留言列表
