css动画之旅--弹性菜单效果
2024-05-13 21:04:04
今天学习了一个css实现弹性菜单的效果，感觉还不错。
闲话不说，直接上代码....
下面是页面的HTML代码：
1 <div class="menu"> 2 <div class="btn btn-trigger"> 3 <span class="line"></span> 4 </div> 5 <div class="icons"> 6 <div class="rotater"> 7 <div class="btn btn-icon"> 8 <i class="fa fa-codepen"></i> 9 </div> 10 </div> 11 <div class="rotater"> 12 <div class="btn btn-icon"> 13 <i class="fa fa-facebook"></i> 14 </div> 15 </div> 16 <div class="rotater"> 17 <div class="btn btn-icon"> 18 <i class="fa fa-google-plus"></i> 19 </div> 20 </div> 21 <div class="rotater"> 22 <div class="btn btn-icon"> 23 <i class="fa fa-twitter"></i> 24 </div> 25 </div> 26 <div class="rotater"> 27 <div class="btn btn-icon"> 28 <i class="fa fa-dribbble"></i> 29 </div> 30 </div> 31 <div class="rotater"> 32 <div class="btn btn-icon"> 33 <i class="fa fa-linkedin"></i> 34 </div> 35 </div> 36 <div class="rotater"> 37 <div class="btn btn-icon"> 38 <i class="fa fa-github"></i> 39 </div> 40 </div> 41 <div class="rotater"> 42 <div class="btn btn-icon"> 43 <i class="fa fa-behance"></i> 44 </div> 45 </div> 46 </div> 47 </div>
View Code
其中使用了font-awesome，在head里面添加
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
就可以显示出图标。
进入正题，下面是CSS代码。
@charset "utf-8";
/* CSS Document */
*, *:before, *:after {box-sizing: border-box;margin: 0;padding: 0;
}
html, body {height: 100%;overflow: hidden;
}
body{/* 渐变三个参数：1.方向 2.起点颜色 3.终点颜色 */background:-webkit-linear-gradient(45deg, #e10522 0%, rgba(225, 5, 34, 0) 70%), -webkit-linear-gradient(315deg, #939 10%, rgba(255,62,18, 0) 80%),-webkit-linear-gradient(225deg, #0adbd8 10%, rgba(10, 219, 216, 0) 80%), -webkit-linear-gradient(135deg, #09f505 100%, rgba(9, 245, 5, 0) 70%);background:linear-gradient(45deg, #e10522 0%, rgba(225, 5, 34, 0) 70%), linear-gradient(315deg, #939 10%, rgba(255,62,18, 0) 80%),linear-gradient(225deg, #0adbd8 10%, rgba(10, 219, 216, 0) 80%), linear-gradient(135deg, #09f505 100%, rgba(9, 245, 5, 0) 70%);
}
.absolute-center, .menu, .menu .btn .fa, .menu .btn-trigger .line{position:absolute;top:50%;left:50%;/* 指定对象在X、Y轴上的平移 */-webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);
}
.menu{width:5em;height:5em;
}
.menu .btn{position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;background: rgba(255, 255, 255, 0.15);opacity:0;cursor:pointer;-webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;transition:opacity 1s, z-index 0.3s, -webkit-transform 1s;transition:opacity 1s, z-index 0.3s, transform 1s;transition:opacity 1s, z-index 0.3s, transform 1s, -webkit-transform 1s;-webkit-transform: translateX(0);transform:translateX(0);
}
.menu .btn .fa{font-size:3em;-webkit-transition: color 0.3s;transition: color 0.3s;
}
.menu .btn:hover .fa{color: rgba(255, 255, 255, 0.7);
}
.menu .btn.btn-trigger{opacity:1;z-index:100;cursor: pointer;-webkit-transition: -webkit-transform 0.3s;transition:-webkit-transform 0.3s;transition: transform 0.3s;
}
.menu .btn.btn-trigger:hover{-webkit-transform: scale(1.2);transform: scale(1.2);
}
.menu .btn-trigger:hover .line {background-color: rgba(255, 255, 255, 0.7);
}
.menu .btn-trigger:hover .line:before, .menu .btn-trigger:hover .line:after {background-color: rgba(255, 255, 255, 0.7);
}
.menu .btn-trigger .line{height:6px;width:60%;background: #000;border-radius: 6px;-webkit-transition: background-color 0.3s, height 0.3s, top 0.3s;transition: background-color 0.3s, height 0.3s, top 0.3s;
}
.menu .btn-trigger .line:before, .menu .btn-trigger .line:after {content: "";display: block;position: absolute;left: 0;width: 100%;height: 6px;background: #000;border-radius: 6px;-webkit-transition: background-color 0.3s, -webkit-transform 0.3s;transition: background-color 0.3s, -webkit-transform 0.3s;transition: background-color 0.3s, transform 0.3s;transition: background-color 0.3s, transform 0.3s, -webkit-transform 0.3s;
}
.menu .btn-trigger .line:before {top: -12px;-webkit-transform-origin: 15% 100%;transform-origin: 15% 100%;
}
.menu .btn-trigger .line:after {top: 12px;-webkit-transform-origin: 25% 30%;transform-origin: 25% 30%;
}
.menu .rotater{position: absolute;top: 0;left: 0;width: 100%;height: 100%;
}
.menu.active .btn-icon{opacity:1;z-index:50;
}
.menu.active .btn-trigger .line{height:0;top:45%;
}
.menu.active .btn-trigger .line:before{-webkit-transform: rotate(45deg);transform: rotate(45deg);width:110%;
}
.menu.active .btn-trigger .line:after{-webkit-transform: rotate(-45deg);transform: rotate(-45deg);width:110%;
}
/* 为每一个菜单添加旋转和平移效果 */
.rotater:nth-child(1){-webkit-transform: rotate(-45deg);transform: rotate(-45deg);
}
.menu.active .rotater:nth-child(1) .btn-icon{-webkit-transform: translateY(-10em) rotate(45deg);transform: translateY(-10em) rotate(45deg);
}
.rotater:nth-child(2){-webkit-transform: rotate(0deg);transform: rotate(0deg);
}
.menu.active .rotater:nth-child(2) .btn-icon{-webkit-transform: translateY(-10em);transform: translateY(-10em);
}
.rotater:nth-child(3){-webkit-transform: rotate(45deg);transform: rotate(45deg);
}
.menu.active .rotater:nth-child(3) .btn-icon{-webkit-transform: translateY(-10em) rotate(-45deg);transform: translateY(-10em) rotate(-45deg);
}
.rotater:nth-child(4){-webkit-transform: rotate(90deg);transform: rotate(90deg);
}
.menu.active .rotater:nth-child(4) .btn-icon{-webkit-transform: translateY(-10em) rotate(-90deg);transform: translateY(-10em) rotate(-90deg);
}
.rotater:nth-child(5){-webkit-transform: rotate(135deg);transform: rotate(135deg);
}
.menu.active .rotater:nth-child(5) .btn-icon{-webkit-transform: translateY(-10em) rotate(-135deg);transform: translateY(-10em) rotate(-135deg);
}
.rotater:nth-child(6){-webkit-transform: rotate(180deg);transform: rotate(180deg);
}
.menu.active .rotater:nth-child(6) .btn-icon{-webkit-transform: translateY(-10em) rotate(-180deg);transform: translateY(-10em) rotate(-180deg);
}
.rotater:nth-child(7){-webkit-transform: rotate(225deg);transform: rotate(225deg);
}
.menu.active .rotater:nth-child(7) .btn-icon{-webkit-transform: translateY(-10em) rotate(-225deg);transform: translateY(-10em) rotate(-225deg);
}
.rotater:nth-child(8){-webkit-transform: rotate(270deg);transform: rotate(270deg);
}
.menu.active .rotater:nth-child(8) .btn-icon{-webkit-transform: translateY(-10em) rotate(-270deg);transform: translateY(-10em) rotate(-270deg);
}
1 body{
2 /* 渐变三个参数：1.方向 2.起点颜色 3.终点颜色 */
3 background:-webkit-linear-gradient(45deg, #e10522 0%, rgba(225, 5, 34, 0) 70%), -webkit-linear-gradient(315deg, #939 10%, rgba(255,62,18, 0) 80%),
4 -webkit-linear-gradient(225deg, #0adbd8 10%, rgba(10, 219, 216, 0) 80%), -webkit-linear-gradient(135deg, #09f505 100%, rgba(9, 245, 5, 0) 70%);
5 background:linear-gradient(45deg, #e10522 0%, rgba(225, 5, 34, 0) 70%), linear-gradient(315deg, #939 10%, rgba(255,62,18, 0) 80%),
6 linear-gradient(225deg, #0adbd8 10%, rgba(10, 219, 216, 0) 80%), linear-gradient(135deg, #09f505 100%, rgba(9, 245, 5, 0) 70%);
7 }
8 .absolute-center, .menu, .menu .btn .fa, .menu .btn-trigger .line{
9 position:absolute;
10 top:50%;
11 left:50%;
12 /* 指定对象在X、Y轴上的平移 */
13 -webkit-transform: translateX(-50%) translateY(-50%);
14 transform: translateX(-50%) translateY(-50%);
15 }
16 .menu{
17 width:5em;
18 height:5em;
19 }
20 .menu .btn{
21 position: absolute;
22 top: 0;
23 left: 0;
24 width: 100%;
25 height: 100%;
26 border-radius: 50%;
27 background: rgba(255, 255, 255, 0.15);
28 opacity:0;
29 cursor:pointer;
30 -webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
31 transition:opacity 1s, z-index 0.3s, -webkit-transform 1s;
32 transition:opacity 1s, z-index 0.3s, transform 1s;
33 transition:opacity 1s, z-index 0.3s, transform 1s, -webkit-transform 1s;
34 -webkit-transform: translateX(0);
35 transform:translateX(0);
36 }
37 .menu .btn .fa{
38 font-size:3em;
39 -webkit-transition: color 0.3s;
40 transition: color 0.3s;
41 }
42 .menu .btn:hover .fa{
43 color: rgba(255, 255, 255, 0.7);
44 }
45 .menu .btn.btn-trigger{
46 opacity:1;
47 z-index:100;
48 cursor: pointer;
49 -webkit-transition: -webkit-transform 0.3s;
50 transition:-webkit-transform 0.3s;
51 transition: transform 0.3s;
52 }
53 .menu .btn.btn-trigger:hover{
54 -webkit-transform: scale(1.2);
55 transform: scale(1.2);
56 }
57 .menu .btn-trigger:hover .line {
58 background-color: rgba(255, 255, 255, 0.7);
59 }
60 .menu .btn-trigger:hover .line:before, .menu .btn-trigger:hover .line:after {
61 background-color: rgba(255, 255, 255, 0.7);
62 }
63 .menu .btn-trigger .line{
64 height:6px;
65 width:60%;
66 background: #000;
67 border-radius: 6px;
68 -webkit-transition: background-color 0.3s, height 0.3s, top 0.3s;
69 transition: background-color 0.3s, height 0.3s, top 0.3s;
70 }
71 .menu .btn-trigger .line:before, .menu .btn-trigger .line:after {
72 content: "";
73 display: block;
74 position: absolute;
75 left: 0;
76 width: 100%;
77 height: 6px;
78 background: #000;
79 border-radius: 6px;
80 -webkit-transition: background-color 0.3s, -webkit-transform 0.3s;
81 transition: background-color 0.3s, -webkit-transform 0.3s;
82 transition: background-color 0.3s, transform 0.3s;
83 transition: background-color 0.3s, transform 0.3s, -webkit-transform 0.3s;
84 }
85 .menu .btn-trigger .line:before {
86 top: -12px;
87 -webkit-transform-origin: 15% 100%;
88 transform-origin: 15% 100%;
89 }
90 .menu .btn-trigger .line:after {
91 top: 12px;
92 -webkit-transform-origin: 25% 30%;
93 transform-origin: 25% 30%;
94 }
95 .menu .rotater{
96 position: absolute;
97 top: 0;
98 left: 0;
99 width: 100%;
100 height: 100%;
101 }
102 .menu.active .btn-icon{
103 opacity:1;
104 z-index:50;
105 }
106 .menu.active .btn-trigger .line{
107 height:0;
108 top:45%;
109 }
110 .menu.active .btn-trigger .line:before{
111 -webkit-transform: rotate(45deg);
112 transform: rotate(45deg);
113 width:110%;
114 }
115 .menu.active .btn-trigger .line:after{
116 -webkit-transform: rotate(-45deg);
117 transform: rotate(-45deg);
118 width:110%;
119 }
120 /* 为每一个菜单添加旋转和平移效果 */
121 .rotater:nth-child(1){
122 -webkit-transform: rotate(-45deg);
123 transform: rotate(-45deg);
124 }
125 .menu.active .rotater:nth-child(1) .btn-icon{
126 -webkit-transform: translateY(-10em) rotate(45deg);
127 transform: translateY(-10em) rotate(45deg);
128 }
129 .rotater:nth-child(2){
130 -webkit-transform: rotate(0deg);
131 transform: rotate(0deg);
132 }
133 .menu.active .rotater:nth-child(2) .btn-icon{
134 -webkit-transform: translateY(-10em);
135 transform: translateY(-10em);
136 }
137 .rotater:nth-child(3){
138 -webkit-transform: rotate(45deg);
139 transform: rotate(45deg);
140 }
141 .menu.active .rotater:nth-child(3) .btn-icon{
142 -webkit-transform: translateY(-10em) rotate(-45deg);
143 transform: translateY(-10em) rotate(-45deg);
144 }
145 .rotater:nth-child(4){
146 -webkit-transform: rotate(90deg);
147 transform: rotate(90deg);
148 }
149 .menu.active .rotater:nth-child(4) .btn-icon{
150 -webkit-transform: translateY(-10em) rotate(-90deg);
151 transform: translateY(-10em) rotate(-90deg);
152 }
153 .rotater:nth-child(5){
154 -webkit-transform: rotate(135deg);
155 transform: rotate(135deg);
156 }
157 .menu.active .rotater:nth-child(5) .btn-icon{
158 -webkit-transform: translateY(-10em) rotate(-135deg);
159 transform: translateY(-10em) rotate(-135deg);
160 }
161 .rotater:nth-child(6){
162 -webkit-transform: rotate(180deg);
163 transform: rotate(180deg);
164 }
165 .menu.active .rotater:nth-child(6) .btn-icon{
166 -webkit-transform: translateY(-10em) rotate(-180deg);
167 transform: translateY(-10em) rotate(-180deg);
168 }
169 .rotater:nth-child(7){
170 -webkit-transform: rotate(225deg);
171 transform: rotate(225deg);
172 }
173 .menu.active .rotater:nth-child(7) .btn-icon{
174 -webkit-transform: translateY(-10em) rotate(-225deg);
175 transform: translateY(-10em) rotate(-225deg);
176 }
177 .rotater:nth-child(8){
178 -webkit-transform: rotate(270deg);
179 transform: rotate(270deg);
180 }
181 .menu.active .rotater:nth-child(8) .btn-icon{
182 -webkit-transform: translateY(-10em) rotate(-270deg);
183 transform: translateY(-10em) rotate(-270d主要用到的css属性是transition和transform.
最后再添加一点js就可以实现效果。
<script>$('.btn-trigger').click(function() {$('.menu').toggleClass('active');});
</script>转载于:https://www.cnblogs.com/twoegg/p/7614996.html
css动画之旅--弹性菜单效果相关推荐
- html页面 tab JS滑动切换,JS+CSS实现滑动切换tab菜单效果
本文实例讲述了JS+CSS实现滑动切换tab菜单效果.分享给大家供大家参考.具体如下: 这是风格简单的一款JS+CSS滑动门特效代码,当鼠标滑过菜单的时候,二级菜单自动切换,鼠标不需要点击,滑动门效果 ...
- 用CSS3如何实现钟摆动画的导航栏菜单效果
我们都知道,CSS3可以实现很多很酷的动画效果,而今天我们将与大家分享一期用CSS3制作的钟摆动画菜单效果,在这个动画中,我们主要采用CSS3来控制SVG图标的左右摆动效果. 首先,我们需要在HTML ...
- 如何用HTML和css实现简单的手风琴菜单效果，附带详细注释
超完整的代码+详细注释,适合给小白做的简单的手风琴菜单实例 代码: <!DOCTYPE html> <html lang="en"><head> ...
- HTML+CSS+JavaScript实现下拉菜单效果
实现思路: HTML 方面,导航栏的每个 <li> 元素里面包含 <a> 和 <ul> ,将 <li> 设置为相对定位, 将 <ul> 设置 ...
- html设定元素动画执行,CSS动画 _Animation 教程_W3cplus
本文是为帮助您入门和熟悉CSS动画而编写的,使用它们来为您带来基于Web的接口以及为艺术带来生命.虽然W3C的CSS动画规范仍在修订中,但是如今它已经有大量的内容可以供我们使用了. 对我而言,CSS动 ...
- html如何自定义一个动画效果,30个纯css动画代码片段和效果演示
开源代码已经迎来了一个新的web前端时代.初学者和专家都可以通过使用预构建的代码片段节省时间和压力.下面画廊由30个不同的片段与纯CSS创建动画效果. 所有这些代码片段都放在云IDE平台.这些weba ...
- html二级页面内容滑动,jQuery+CSS实现的网页二级下滑菜单效果
本文实例讲述了jQuery+CSS实现的网页二级下滑菜单效果.分享给大家供大家参考.具体如下: 这是一款简洁型的 jQuery+CSS网页二级下滑菜单,练手写的,有需要的自己拿去美化吧,基本的动画效果 ...
- 过山车css动画,如何使用CSS实现过山车loader的动画效果
本篇文章给大家带来的内容是关于如何使用CSS实现过山车loader的动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 代码解读 定义 dom,容器中包含 3 个元素, ...
- 旋转360 css 动画效果,使用CSS3动画属性实现360°无限循环旋转【代码片段】
使用CSS3的animation动画属性实现360°无限循环旋转. 代码片段: //图片路径自定义 CSS样式书写如下: #change{ position:absolute; right:200 ...
最新文章
- 植保口的面上项目共153项，系统总结
- wordpressPHP实现ajax评论,wordpress无刷新评论：无需插件ajax实现wordpress comment无刷新机制...
- sublime配置python开发环境_Sublime Text 配置Python3.7开发环境
- 关于nginx信号控制的“故障”案例
- c语言int val,c语言不定参数与printf函数的实现
- postgis数据库优化_PostgreSQL批量导入性能优化
- mysql centos 安装目录在哪_centos中如何查看mysql安装目录在哪
- 如何清空android ListView控件的内容
- ASP.NET MVC多语言 仿微软网站效果(转)
- java swt designerpdf_eclipse学习笔记!(4) ----- SWT Designer 下 SWT常用组件
- 方法的重载与重写_我们不一样，不一样，重写与重载
- nginx如何编译安装mysql_centos系统编译安装nginx+php环境另加独立mysql教程
- 阶段5 3.微服务项目【学成在线】_day04 页面静态化_05-freemarker基础-List指令
- C#调用Onnx模型
- 计算机主机忘了密码怎么办,如果我忘记了笔记本计算机的开机密码怎么办
- JS的unshift()和shift()
- 【软考软件评测师】2015年下案例分析历年真题
- c语言程序填空改错题,C语言模拟改错填空编程题.doc
- C++《面向对象程序设计课程设计》
- oracle 创建sde,创建多个sde库
热门文章
- python利用递归函数实现斐波那契数列_Python递归及斐波那契数列
- 以下计算机网络的功能正确的,西工大18春《计算机网络》在线作业【参考答案】...
- linux电脑系统投到电视,教你如何在Linux操作系统下观看电视节目
- 张国栋 linux进程,张国栋（栋梁）造价定额设计：BIM技术应用于装配式建筑的优势...
- mysql 5.0 php_PHP 5.0的新特性
- 【windows】安装pytorch1.7.1-cpu版本的geometric过程记录
- Python 协程 asyncio 极简入门与爬虫实战
- 这样的奇技淫巧不可取，切记切记
- 科技公司最爱的 50 款开源工具，你都用过吗？
- python批量_python 中如何去执行批量的.py文件