TA貢獻(xiàn)50條經(jīng)驗(yàn) 獲得超32個(gè)贊
參考一樓代碼，稍微加點(diǎn)動(dòng)畫漸變，代碼如下。
<!DOCTYPE?html>
<html>
<head>
????<style>
????????.arrow?{
????????????width:?65px;
????????????height:?50px;
????????????background:?#000;
????????????padding:?30px?0?0?30px;
????????????margin:30px?auto?0;
????????????position:?relative;
????????}
????????.arrow?i?{
????????????display:?block;
????????????width:?50px;
????????????height:?5px;
????????????background:?#fff;
????????????position:?absolute;
????????????border-radius:?10px?0?0?10px;
????????????transition:all?300ms;
????????}
????????.arrow?i:nth-of-type(1)?{
????????????width:?35px;
????????????top:20px;
????????}
????????.arrow?i:nth-of-type(2)?{
????????????width:?35px;
????????????top:35px;
????????}
????????.arrow?i:nth-of-type(3)?{
????????????width:?35px;
????????????top:50px;
????????}
????????.arrow:hover?i{
????????????border-radius:?0;
????????????height:?3px;
????????}
????????.arrow:hover?i:nth-of-type(1){
????????????top:35px;
????????????transform-origin:?left?center;
????????????transform:?rotate(-45deg);
????????}
????????.arrow:hover?i:nth-of-type(2){
????????????width:?55px;
????????????margin-left:-1px;
????????????border-radius:?10px?0?0?10px;
????????}
????????.arrow:hover?i:nth-of-type(3){
????????????top:35px;
????????????transform-origin:?left?center;
????????????transform:?rotate(45deg);
????????}
????</style>
</head>
</body>
????<div?class="arrow">
????????<i></i>
????????<i></i>
????????<i></i>
????</div>
</body>
</html>
其實(shí)我真的不是東北人
TA貢獻(xiàn)3593條經(jīng)驗(yàn) 獲得超1個(gè)贊
TA貢獻(xiàn)105條經(jīng)驗(yàn) 獲得超66個(gè)贊
<!DOCTYPE html>
<html>
<head>
? ? <style>
? ? ? ? * {
? ? ? ? ? ? margin:0;
? ? ? ? ? ? padding:0;
? ? ? ? }
? ? ? ? .arrow {
? ? ? ? ? ? width: 80px;
? ? ? ? ? ? height: 50px;
? ? ? ? ? ? background: #000;
? ? ? ? ? ? padding: 30px 0 0 30px;
? ? ? ? ? ? margin:30px auto 0;
? ? ? ? ? ? position: relative;
? ? ? ? }
? ? ? ? .arrow i {
? ? ? ? ? ? display: block;
? ? ? ? ? ? width: 50px;
? ? ? ? ? ? height: 5px;
? ? ? ? ? ? background: #fff;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? border-radius: 10px 0 0 10px;
? ? ? ? }
? ? ? ? .arrow i:nth-of-type(1) {
? ? ? ? ? ? width: 35px;
? ? ? ? ? ? transform-origin: left center;
? ? ? ? ? ? transform: rotate(-35deg);
? ? ? ? }
? ? ? ? .arrow i:nth-of-type(3) {
? ? ? ? ? ? width: 35px;
? ? ? ? ? ? transform-origin: left center;
? ? ? ? ? ? transform: rotate(35deg);
? ? ? ? }
? ? </style>
</head>
</body>
<div class="arrow">
? ? <i></i>
? ? <i></i>
? ? <i></i>
</div>
</body>
</html>
TA貢獻(xiàn)3條經(jīng)驗(yàn) 獲得超0個(gè)贊
樓上說的，就用CSS3 transform?
觸發(fā)動(dòng)畫時(shí)中間的線條不變，上下兩條各順逆時(shí)針旋轉(zhuǎn)45度，css動(dòng)畫有很多參數(shù)，根據(jù)案例調(diào)整一下就好了
舉報(bào)
