在前端编程中，经常用到箭头，有的人习惯于插入图片 ，这里提供代码的实现方法。去掉代码中所有注释内容，就显示为书名号了。还有下面那个就是就用了CSS3中动画的平移，各位看官就当闲来无事看着玩，这个效果没有什么技术含量的。```html:run<!DOCTYPE html><html lang="en"><head> <Meta charset="UTF-8"> <title>Title</title> <style> *{ padding:0; margin:0; } .arrow1 { /*position: relative;*/ margin: 50px auto; width: 100px; height: 100px; border: 20px solid red; border-left: none; border-bottom: none; transform: rotate(45deg); } /*.arrow2{ transform: translate(-60px,-9px); position: absolute; }*/ #div{ width:900px; height:400px; border:2px solid black; margin: 100px auto; } #span{ float:left; display: block; font-size: 100px; width: 100px; height: 100px; line-height: 80px; text-align: center; border-radius: 50%; background: radial-gradient(blue,green); animation: move 4s ease 0s infinite alternate; } @keyframes move { 0%{ transform: translate(0px,0px); } 25%{ transform: translate(200px,300px); } 50%{ transform: translate(400px,0px); } 75%{ transform: translate(600px,300px); } 100%{ transform: translate(800px,0px); } } </style></head><body><!--去掉所有注释内容，显示为：右侧书名号，即“》”--><div class="arrow1"> <!--<div class="arrow1 arrow2"> </div>--></div><div id="div"> <span id="span">w</span></div></body></html>```
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
