Web前端特效实例和知识 - CSS3特效 - CSS3特效实例
html+css椭圆形链接示例代码
何问起 hovertree.com
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>椭圆形链接-何问起</title>
<base href="https://hovertree.com/" />
<style>
.hovertreeLink a:hover {
border: solid 1px red;
background-color: white;
}
.hovertreeLink a {
display: inline-block;
width: 300px;
height: 50px;
background-color: gold;
border: solid 1px gold;
text-align: center;
line-height: 50px;
border-radius: 50%;
margin: 2px;
color: blue;
text-decoration: none;
}
.hovertreeLink{height:360px;border:solid 1px silver;overflow:scroll;}
</style>
</head>
<body>
<h2>椭圆形链接</h2>
<div class="hovertreeLink" style="margin:5px;">
<a href="https://hovertree.com/menu/texiao/">网页特效...</a>
<a href="https://hovertree.com/h/bjag/2693y6sd.htm">bootstrap实现下拉菜单效果</a>
<a class="list-group-item" href="https://hovertree.com/h/bjag/4y7erj38.htm">CSS3三种动画相关属性的介绍和示例</a>
<a class="list-group-item" href="https://hovertree.com/h/bjag/gd5qsnd1.htm">CSS代码实现过山车加载中动画</a>
<a class="list-group-item" href="https://hovertree.com/h/bjag/oppeym4s.htm">HTML5 Canvas爱心时钟动画</a>
<a class="list-group-item" href="https://hovertree.com/h/bjag/u908oa4r.htm">使用Canvas实现普罗大众表情包</a>
<a class="list-group-item" href="https://hovertree.com/h/bjag/toiq32dh.htm">纯CSS3圆形主菜单展开特效</a>
<a class="list-group-item" href="https://hovertree.com/h/bjag/dn9q6gy3.htm">vue.js表单密码强度验证</a>
<a class="list-group-item" href="https://hovertree.com/h/bjag/l0laod0x.htm">css3 loading等待加载代码</a>
<a class="list-group-item" href="https://hovertree.com/h/bjag/1afxdrm7.htm">CSS3扁平化Loading加载旋转动画</a>
<a class="list-group-item" href="https://hovertree.com/h/bjag/kfq30wnj.htm">jQuery为页面上的图片加水印</a>
</div>
<footer><a href="https://hovertree.com/">何问起</a> © <a href="https://hovertree.com/h/bjag/nvum9cjw.htm">返回</a></footer>
</body>
</html>收藏
列表
评论：
- CSS3特效
- HTML特效
- HTML特效实例
微信公众号：