html动态泡泡,动态气泡菜单.html
HTML5+CSS3气泡式图标菜单特效 - 站长素材
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
font-size: calc(16px + (20 - 16) * (100vw - 320px)/(980 - 320));
--rotateTimes: 0;
}
body {
background-color: #002;
background-image: radial-gradient(circle at center, #045, #002);
color: #fff;
font: 1em "Open Sans", sans-serif;
height: 100vh;
line-height: 1.5;
}
nav, ul, li {
transform-style: preserve-3d;
}
nav, li {
position: absolute;
top: 50%;
left: 50%;
}
nav, li a {
border-radius: 50%;
}
nav {
width: 18em;
height: 18em;
transform: translate(-50%, -50%) rotateX(75deg);
}
ul, li a {
width: 100%;
height: 100%;
}
ul {
list-style: none;
}
li {
animation: idle 4s ease-in-out infinite;
text-align: center;
width: 5em;
height: 5em;
transform: translate(-50%, -50%);
}
li a {
box-shadow: 0 0 0 0.1em #0cf inset, 0 0 1em #0cf inset;
color: currentColor;
display: inline-block;
text-decoration: none;
transition: transform 0.4s linear, box-shadow 0.15s linear, margin 0.1s linear, width 0.1s linear, height 0.1s linear;
}
li a span {
transition: color 0.15s linear;
}
li a:before {
background-color: #fff;
border-radius: 50%;
content: "";
display: block;
opacity: 0.5;
position: absolute;
top: 0.75em;
left: 0.75em;
width: 1em;
height: 0.5em;
transform: rotate(-45deg);
}
li a:focus, li a.current {
box-shadow: 0 0 0 0.1em #ff0 inset, 0 0 1em #ff0 inset;
outline: 0;
}
li a:focus span, li a.current span {
color: #ff0;
}
li a:hover {
margin: -5% 0 0 -5%;
width: 110%;
height: 110%;
}
li a:hover svg {
width: 3em;
height: 3em;
}
@media (prefers-reduced-motion) {
li {
animation: none;
}
}
svg {
display: block;
margin: 1.25em auto 1.5em auto;
transition: width 0.1s linear, height 0.1s linear;
width: 2.5em;
height: 2.5em;
}
/* Position bubbles */
li:nth-of-type(1) {
animation-delay: 0s;
}
li:nth-of-type(1) a {
transform: rotate(calc(0deg + var(--rotateTimes) * 51.4285714286deg)) translateY(9em) rotate(calc(0deg - var(--rotateTimes) * 51.4285714286deg)) rotateX(-75deg);
}
li:nth-of-type(2) {
animation-delay: -0.5s;
}
li:nth-of-type(2) a {
transform: rotate(calc(-51.4285714286deg + var(--rotateTimes) * 51.4285714286deg)) translateY(9em) rotate(calc(51.4285714286deg - var(--rotateTimes) * 51.4285714286deg)) rotateX(-75deg);
}
li:nth-of-type(3) {
animation-delay: -1s;
}
li:nth-of-type(3) a {
transform: rotate(calc(-102.8571428571deg + var(--rotateTimes) * 51.4285714286deg)) translateY(9em) rotate(calc(102.8571428571deg - var(--rotateTimes) * 51.4285714286deg)) rotateX(-75deg);
}
li:nth-of-type(4) {
animation-delay: -1.5s;
}
li:nth-of-type(4) a {
transform: rotate(calc(-154.2857142857deg + var(--rotateTimes) * 51.4285714286deg)) translateY(9em) rotate(calc(154.2857142857deg - var(--rotateTimes) * 51.4285714286deg)) rotateX(-75deg);
}
li:nth-of-type(5) {
animation-delay: -2s;
}
li:nth-of-type(5) a {
transform: rotate(calc(-205.7142857143deg + var(--rotateTimes) * 51.4285714286deg)) translateY(9em) rotate(calc(205.7142857143deg - var(--rotateTimes) * 51.4285714286deg)) rotateX(-75deg);
}
/* Animations */
.rise {
animation: rise 1s ease-out;
}
.rise a {
animation: fadeOut 1s ease-out;
}
.rise a.pop {
animation: pop 1s linear;
}
.rise a.pop svg, .rise a.pop span {
visibility: hidden;
}
@keyframes rise {
from {
transform: translateZ(0);
}
15% {
transform: translateZ(-1em);
}
to {
transform: translateZ(35em);
}
}
@keyframes fadeOut {
from, 15% {
opacity: 1;
}
50%, to {
opacity: 0;
}
}
@keyframes pop {
from {
margin: -5% 0 0 -5%;
width: 110%;
height: 110%;
opacity: 1;
}
10%, to {
margin: -20% 0 0 -20%;
width: 140%;
height: 140%;
opacity: 0;
}
}
@keyframes idle {
from, to {
transform: translate(-50%, -48%);
}
25% {
transform: translate(-52%, -50%);
}
50% {
transform: translate(-50%, -52%);
}
75% {
transform: translate(-48%, -50%);
}
}
Phone
Music
Map
Wi-Fi
Settings
document.addEventListener("DOMContentLoaded", function(){
let rise = function(trigEl) {
trigEl.blur();
let ul = document.querySelector("ul");
ul.classList.add("rise");
trigEl.classList.add("pop");
setTimeout(function(){
trigEl.focus();
ul.classList.remove("rise");
trigEl.classList.remove("pop");
}, 1000);
};
this.querySelectorAll("li a").forEach(function(el){
let rt = document.querySelector(":root"),
di = +el.getAttribute("data-item");
el.addEventListener("blur",function(){
//var getRt = +window.getComputedStyle(el).getPropertyValue('--rotateTimes');
//console.log(getRt);
//this.classList.add("current");
});
el.addEventListener("focus",function(){
rt.style.setProperty("--rotateTimes",di);
//this.classList.remove("current");
});
el.addEventListener("dblclick",function(){
rise(this);
});
el.addEventListener("keyup",function(e){
if (e.keyCode === 13) {
rise(this);
}
});
});
});
适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。
来源:站长素材
一键复制
编辑
Web IDE
原始数据
按行查看
历史
html动态泡泡,动态气泡菜单.html相关推荐
- js动态改变下拉菜单内容示例 .
<HTML><HEAD><TITLE>动态改变下拉菜单内容示例</TITLE></HEAD><SCRIPT LANGUAGE=java ...
- 一款jQuery立体感动态下拉导航菜单特效
一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...
- JavaScript+Css实现的鼠标悬停时动态翻滚的紫色菜单导航
代码简介: 鼠标悬停时动态翻滚的导航条,这个是使用JavaScript实现的,不过代码好像是从jQuery里摘出来的,有点像. 代码内容: <!DOCTYPE html PUBLIC " ...
- mybatis 操作动态表+动态字段+存储过程
mybatis 操作动态表+动态字段+存储过程 存储过程 statementType="CALLABLE" <!-- 计算金额存储过程--> <upd ...
- 【Android NDK 开发】Android.mk 配置动态库 ( Android Studio 配置动态库 | 动态库加载版本限制 | 本章仅做参考推荐使用 CMake 配置动态库 )
文章目录 I . Android Studio 中使用 Android.mk 配置动态库 总结 II . 第三方动态库来源 III . 配置 Android.mk 构建脚本路径 IV . 预编译 第三 ...
- 【Android NDK 开发】JNI 动态注册 ( 动态注册流程 | JNI_OnLoad 方法 | JNINativeMethod 结构体 | GetEnv | RegisterNatives )
文章目录 I . 动态注册流程 ( 总结 ) II . JNI_OnLoad 方法 III . 被注册的本地 C/C++ 方法参数 IV . JNINativeMethod 结构体 ( 核心重点 ) ...
- 【Android NDK 开发】Visual Studio 2019 使用 CMake 开发 JNI 动态库 ( 动态库编译配置 | JNI 头文件导入 | JNI 方法命名规范 )
文章目录 I . JNI 与 NDK 区别 II . Visual Studio 编译动态库 III. 配置 导入 jni.h 头文件 IV . IntelliJ IDEA Community Edi ...
- Oracle优化07-分析及动态采样-动态采样
思维导图 07系列文章 Oracle优化07-分析及动态采样-直方图 Oracle优化07-分析及动态采样-DBMS_STATS 包 Oracle优化07-分析及动态采样-动态采样 动态采样Dynam ...
- P4719 【模板】“动态 DP“动态树分治(矩阵/轻重链剖分/ddp)
P4719 [模板]"动态 DP"&动态树分治 求解树上最大权独立集,但是需要支持修改. https://www.luogu.com.cn/problem/solution ...
最新文章
- 毕业设计(3)基于MicroPython的篮球计时计分器模型的设计与实现
- 基于Gitolite的Git服务架设
- adminlte+layui框架搭建3 - layui弹出层
- windows一个目录下最大文件数目
- Linux之父为过去的言行道歉,宣布离开社区反思
- 8uftp如何创建php,从零搭建php环境-php8
- python inspect.stack() 的简单使用
- python能不能自动写代码_微软最强 Python 自动化工具开源了!不用写一行代码
- Drools可执行模型还活着
- JavaMail可能是邪恶的(并迫使您重新启动应用程序服务器)
- 我是如何解决gitlab 命令行上传需要输密码
- 《HTML5和JavaScript Web应用开发》——第 2 章 移动Web 2.1移动优先
- AndroidStudio_Base64图片的解码_编码_要注意的地方---Android原生开发工作笔记223
- 19 岁就在南大读博的“00 后”女生:这是我的学习经历...
- 显示器屏幕尺寸及分辨率
- 2015061403 - firebug下载地址
- vue3中的beforeEach里面的next函数---刷新页面导致白页
- 郭天祥的10天学会51单片机_第六节
- 5G通信技术解读:波束成形如何为5G添翼?
- 消防工程师 第二篇 建筑防火 1.厂房和仓库的火灾危险性分类