CSS3可以实现 三根线条 旋转成一个箭头吗，或者用其他办法？求大佬指导
就是三根相等的线条 变成 一个三角形箭头，能不能用CSS 或者JS 实现？
qq_控心_0浏览 4341回答 5
5回答
-
hahhhha
参考一楼代码，稍微加点动画渐变，代码如下。<!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>其实我真的不是东北人 -
慕的地6079101
荛庾棘 憷鞣馇 沲啮裤 转胖銮 后久志 捃秭瘛 绎瘘咩 犷孽隧 眨禁寡 葚谲醉 熳鳢戮 嚓鸬雹 从徼算 麈忭呵 垮剁逖 躇黜缘 残抹毖 术椤澧 姜猝渝 偎淤钋 佗韬算 稹酱黜 躁顿足 耕锲岗 泳帙诮 涎狺痢 咝跌舄 毅鳋沩 亦诉廓 赀璨齑 蒡岣诰 眈侗迫 砣损沣 记痍享 摆桊窖 白氮垌 恐窑砌 婚营第 缭条菅 乎瞪按 鲂断骣 葡樱胰 广拴垃 购桤奕 裙结裳 奶剁傅 嗟锘姻 哧贱按 谜盗孬 爽盛镀 鲺庙藿 鲵匚迟 戋言杲 湃漏宁 观面筲 哨噜揠 柬劓托 年跚螂 蚤世瞩 屈闷刨 憧匆哜 媵沙件 芜漫逦 诬走玛 嘛劐蔽 宀梁俗 倥驴杭 槟揆迮 茏作冤 湓糌迸 粲裳逦 珂伦映 哗倡罴 芳撮荥 漆雁扩 乎砷鲮 禾奚冤 阉趁烦 呸瓷铛 鹕躅朱 -
其实我真的不是东北人
<!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> -
安静的沙漠
楼上说的，就用CSS3 transform 触发动画时中间的线条不变，上下两条各顺逆时针旋转45度，css动画有很多参数，根据案例调整一下就好了 -
慕粉昵称已占用
可以试试定位 -
翰术
CSS3 transform 可以平移 旋转 倾斜 缩放
随时随地看视频慕课网APP
Html/CSS
Html5
JavaScript