TA貢獻50條經驗 獲得超32個贊
參考一樓代碼，稍微加點動畫漸變，代碼如下。
<!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>
其實我真的不是東北人
TA貢獻3593條經驗 獲得超1個贊
TA貢獻105條經驗 獲得超66個贊
<!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>
舉報
