分享弹出代码
2016-07-08 22:13
316 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>dom Framework</title> <style> @import "http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"; @import "./www/resources/font-awesome-4.3.0/css/font-awesome.css"; body { background: #39D; } .circular-menu { width: 250px; height: 250px; margin: 0 auto; position: relative; } .circle { width: 250px; height: 250px; opacity: 1; -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .open.circle { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } .circle a { text-decoration: none; color: white; display: block; height: 40px; width: 40px; line-height: 40px; margin-left: -20px; margin-top: -20px; position: absolute; text-align: center; } .circle a:hover { color: #eef; } .menu-button { position: absolute; top: calc(50% - 30px); left: calc(50% - 30px); text-decoration: none; text-align: center; color: #444; border-radius: 50%; display: block; height: 40px; width: 40px; line-height: 40px; padding: 10px; background: #dde; } .menu-button:hover { background-color: #eef; } /* Author stuff */ h1.author { text-align:center; color: white; font-family: Helvetica, Arial, sans-serif; font-weight: 300; } h1.author a { color: #348; text-decoration:none; } h1.author a:hover { color: #ddd; } </style> <script> window.onload=function(){ var items = document.querySelectorAll('.circle a'); for(var i = 0, l = items.length; i < l; i++) { items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%"; items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%"; } document.querySelector('.menu-button').onclick = function(e) { e.preventDefault(); document.querySelector('.circle').classList.toggle('open'); } } </script> </head> <body> <nav class="circular-menu"> <div class="circle"> <a href="" class="fa fa-home fa-2x"></a> <a href="" class="fa fa-facebook fa-2x"></a> <a href="" class="fa fa-twitter fa-2x"></a> <a href="" class="fa fa-linkedin fa-2x"></a> <a href="" class="fa fa-github fa-2x"></a> <a href="" class="fa fa-rss fa-2x"></a> <a href="" class="fa fa-pinterest fa-2x"></a> <a href="" class="fa fa-asterisk fa-2x"></a> </div> <a href="" class="menu-button fa fa-bars fa-2x"></a> </nav> <h1 class="author">Demo by <a href="http://creative-punch.net" target="_blank">Creative Punch</h1> </body> </html>
相关文章推荐
- CUDA入门(二)cuda编程的基本知识与第一个cuda程序
- Mongo配置成系统服务
- Mongo配置成系统服务
- math module
- [python小工具]加减法出题器
- Matlab删除矩阵的一行或一列以及批量注释
- 【棋盘上的BFS】滑旱冰
- day_06python模块学习01
- Java——实现客服端和服务器计算
- eclipse对项目进行分类管理
- 多线程设计模式——Producer-Consumer生产者消费者模式
- yii2-国际化,可参考开发文档权威指南-国际化
- microsoft word 插入代码块
- Spring 入门
- window 安装多个版本的python后 快速切换使用
- Dynamic len 题解+代码 (带修改莫队算法模板)
- 多线程设计模式——Promise(承诺)模式
- php 上传文件 cvs文件
- Java多线程简介
- 百度地图轨迹回放代码