<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS3弧形曲线循环菜单导航</title>
<style>
body {
background-color: #4682b4;
}
a:hover,
a {
color: inherit;
text-decoration: inherit;
}
.c-menu {
position: relative;
height: 440px;
width: 800px;
overflow: hidden;
margin-left: 50px;
margin-top: 50px;
}
.top, .bottom {
position: absolute;
left: 0;
width: 100%;
height: 50px;
background: transparent;
}
.top {
top: 0;
background: linear-gradient(to bottom, steelblue 0%, rgba(70, 130, 180, 0) 100%);
}
.bottom {
bottom: 0;
background: linear-gradient(to bottom, rgba(70, 130, 180, 0) 0%, steelblue 100%);
}
.img-box, .hide {
position: absolute;
left: 7px;
top: 177px;
width: 111px;
height: 82px;
opacity: 1;
transition: opacity, 2s;
}
.hide {
opacity: 0;
transition: opacity, .5s;
}
.items-list {
position: absolute;
left: -400px;
top: -101px;
width: 500px;
height: 498px;
border: 2px solid #a2c0d9;
border-radius: 50%;
margin: 70px;
}
.item {
position: absolute;
width: 600px;
padding-left: 25px;
font-size: 18px;
transition: font-size 1s;
text-align: left;
cursor: pointer;
}
.item:nth-child(7) {
font-size: 28px;
margin-top: -4px;
transition: font-size .5s;
}
.item:before {
content: "";
position: absolute;
width: 10px;
height: 10px;
background-color: #dae6ef;
border-radius: 50%;
left: 5px;
top: 4px;
}
.item:nth-child(7):before {
top: 10px;
}
.item a {
color: #dae6ef;
transition: color 0.5s;
}
.item a:hover {
color: white;
transition: color 0.5s;
}
.item:nth-child(2), .item:nth-child(3), .item:nth-child(11), .item:nth-child(12) {
opacity: 0.7;
}
.btn {
position: absolute;
width: 20px;
height: 20px;
cursor: pointer;
left: 60px;
font-size: 20pt;
color: #dae6ef;
-webkit-transform: scale(3, 1);
transform: scale(3, 1);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.btn:hover {
color: white;
transition: color 0.5s;
}
.prev {
top: 110px;
}
.next {
bottom: 120px;
}
</style>
</head>
<body>
<div class="container" style="padding-left: 0px;">
<div class="c-menu">
<div id="list" class="items-list">
<div class="item">
<a href=""
data-img="http://blog.img.duanshuilu.com/youhui20160256.png"
target="_blank"
rel="noopener">
Sass: Документация на русском языке
</a>
</div>
<div class="item">
<a href=""
data-img="http://blog.img.duanshuilu.com/youhui20160256.png"
target="_blank"
rel="noopener">
Color Hex Color Codes
</a>
</div>
<div class="item">
<a href=""
data-img="http://blog.img.duanshuilu.com/youhui20160256.png"
target="_blank"
rel="noopener">
WebReference
</a>
</div>
<div class="item">
<a href=""
data-img="http://blog.img.duanshuilu.com/youhui20160256.png"
target="_blank"
rel="noopener">
W3Schools Online Web Tutorials
</a>
</div>
<div class="item">
<a href=""
data-img="http://blog.img.duanshuilu.com/youhui20160256.png"
target="_blank"
rel="noopener">
Современный учебник Javascript
</a>
</div>
<div class="item">
<a href=""
data-img="http://blog.img.duanshuilu.com/youhui20160256.png"
target="_blank"
rel="noopener">
Can I use... Support tables for HTML5, CSS3, etc
</a>
</div>
<div class="item">
<a href=""
data-img="http://blog.img.duanshuilu.com/youhui20160256.png"
target="_blank"
rel="noopener">
CSS-Tricks
</a>
</div>
<div class="item">
<a href=""
data-img="http://blog.img.duanshuilu.com/youhui20160256.png"
target="_blank"
rel="noopener">
CodePen
</a>
</div>
<div class="item">
<a href=""
data-img="http://blog.img.duanshuilu.com/youhui20160256.png"
target="_blank"
rel="noopener">
Таблица символов Юникода®
</a>
</div>
<div class="item">
<a ref=""
data-img="http://blog.img.duanshuilu.com/youhui20160256.png"
target="_blank"
rel="noopener">
Font Awesome
</a>
</div>
<div class="item">
<a href=""
data-img="http://blog.img.duanshuilu.com/youhui20160256.png"
target="_blank"
rel="noopener">
Vue.js
</a>
</div>
<div class="item">
<a href=""
data-img="http://blog.img.duanshuilu.com/youhui20160256.png"
target="_blank"
rel="noopener">
PHP: Что такое PHP? - Manual
</a>
</div>
<div class="item">
<a href=""
data-img="http://blog.img.duanshuilu.com/youhui20160256.png"
target="_blank"
rel="noopener">
SQL.ru - все про SQL
</a>
</div>
</div>
<div class="top"></div>
<div class="btn prev" onClick="animation({}, 1);">˄</div>
<div id="pic" class="img-box"></div>
<div class="btn next" onClick="animation({}, 0);">˅</div>
<div class="bottom"></div>
</div>
</div>
<script>
const srart_pos = 90.75;
const item_count = 13;
const s = 0.52 * Math.PI / 180; //袙褘褔懈褋谢懈屑 褍谐芯谢 褋屑械褖械薪懈褟
var pos = [];
var elem = document.getElementsByClassName('item');
function allocationItems() {
var i;
var pp = elem[6].getElementsByTagName('a')[0].getAttribute('data-img');
document.getElementById("pic").style.backgroundImage = "url('"+pp+"')";
document.getElementById("pic").className = "img-box";
pos[0] = srart_pos;
for (i = 1; i < item_count; i++) {
pos[i] = pos[i - 1] - 0.2;
last_pos=pos[i];
}
for (i = 0; i < item_count+1; i++) {
elem[i].style.left = 240 + 250 * Math.sin(pos[i]) + 'px';
elem[i].style.top = 240 + 250 * Math.cos(pos[i]) + 'px';
}
}
allocationItems();
function animation(args, flag) { // 薪械泻芯褌芯褉褘械 邪褉谐褍屑械薪褌褘 芯锌褉械写械谢懈屑 薪邪 斜褍写褍褖械械
var $ = {
radius: 250, // 褉邪写懈褍褋 芯泻褉褍卸薪芯褋褌懈
speed: 10 // 褋泻芯褉芯褋褌褜/蟹邪写械褉卸泻邪 ( 胁 js 褝褌芯 屑褋, 薪邪锌褉懈屑械褉 10 屑褋 = 100 泻邪写褉芯胁 胁 褋械泻褍薪写褍)
};
var e = elem;
document.getElementById("pic").className = "hide";
function animate(draw, duration, callback) {
var start = performance.now();
requestAnimationFrame(function animate(time) {
// 芯锌褉械写械谢懈褌褜, 褋泻芯谢褜泻芯 锌褉芯褕谢芯 胁褉械屑械薪懈 褋 薪邪褔邪谢邪 邪薪懈屑邪褑懈懈
var timePassed = time - start;
console.log(time, start)
// 胁芯蟹屑芯卸薪芯 薪械斜芯谢褜褕芯械 锌褉械胁褘褕械薪懈械 胁褉械屑械薪懈, 胁 褝褌芯屑 褋谢褍褔邪械 蟹邪褎懈泻褋懈褉芯胁邪褌褜 泻芯薪械褑
if (timePassed > duration)
timePassed = duration;
// 薪邪褉懈褋芯胁邪褌褜 褋芯褋褌芯褟薪懈械 邪薪懈屑邪褑懈懈 胁 屑芯屑械薪褌 timePassed
draw(timePassed);
// 械褋谢懈 胁褉械屑褟 邪薪懈屑邪褑懈懈 薪械 蟹邪泻芯薪褔懈谢芯褋褜 - 蟹邪锌谢邪薪懈褉芯胁邪褌褜 械褖褢 泻邪写褉
if (timePassed < duration) {
requestAnimationFrame(animate);
} else callback();
});
}
animate(function (timePassed) {
var i;
for (i = 0; i < item_count; i++) {
e[i].style.left = 240 + $.radius * Math.sin(pos[i]) + 'px';
e[i].style.top = 240 + $.radius * Math.cos(pos[i]) + 'px';
if (flag) {
pos[i] += s;
} else {
pos[i] -= s;
}
} /* callback function */
}, 400, function changeItems() {
var list = document.getElementById('list');
var ch = flag ? list.firstElementChild : list.lastElementChild
ch.remove();
if (flag) {
list.appendChild(ch);
} else {
list.insertBefore(ch, list.firstChild);
}
allocationItems();
});
}
</script>
</body>
</html>CSS3弧形曲线循环菜单导航
标签：
评论者:[[ schemeInfo.user.username ]]
评论内容:[[ schemeInfo.pbody ]]
评论时间:[[ schemeInfo.ptime ]]
发表你的评论:
提交评论
上一篇：
admin左侧边栏多级菜单
下一篇：
HTML5/CSS3超链接图片弹出动画