右下角使用css,CSS3 屏幕右下角的径向菜单
CSS
语言:
CSSSCSS
确定
@-webkit-keyframes badbounce {
0%, 100% {
-webkit-transform: translateY(0px);
}
10% {
-webkit-transform: translateY(6px);
}
30% {
-webkit-transform: translateY(-4px);
}
70% {
-webkit-transform: translateY(3px);
}
90% {
-webkit-transform: translateY(-2px);
}
}
@-moz-keyframes badbounce {
0%, 100% {
-moz-transform: translateY(0px);
}
10% {
-moz-transform: translateY(6px);
}
30% {
-moz-transform: translateY(-4px);
}
70% {
-moz-transform: translateY(3px);
}
90% {
-moz-transform: translateY(-2px);
}
}
@keyframes badbounce {
0%, 100% {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
10% {
-webkit-transform: translateY(6px);
-moz-transform: translateY(6px);
-ms-transform: translateY(6px);
-o-transform: translateY(6px);
transform: translateY(6px);
}
30% {
-webkit-transform: translateY(-4px);
-moz-transform: translateY(-4px);
-ms-transform: translateY(-4px);
-o-transform: translateY(-4px);
transform: translateY(-4px);
}
70% {
-webkit-transform: translateY(3px);
-moz-transform: translateY(3px);
-ms-transform: translateY(3px);
-o-transform: translateY(3px);
transform: translateY(3px);
}
90% {
-webkit-transform: translateY(-2px);
-moz-transform: translateY(-2px);
-ms-transform: translateY(-2px);
-o-transform: translateY(-2px);
transform: translateY(-2px);
}
}
.ss_animate {
-webkit-animation: badbounce 1s linear;
-moz-animation: badbounce 1s linear;
animation: badbounce 1s linear;
}
html,
body {
width: 100%;
height: 100%;
background: #212121;
margin: 0;
padding: 0;
}
#ss_menu {
bottom: 30px;
width: 60px;
height: 60px;
color: #fff;
position: fixed;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
right: 30px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
#ss_menu > .menu {
display: block;
position: absolute;
border-radius: 50%;
width: 60px;
height: 60px;
font-size: 30px;
text-align: center;
padding: 15px 0;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
#ss_menu > .menu.ss_active {
background: #00796b;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
-o-transform: scale(0.7);
transform: scale(0.7);
}
#ss_menu div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
width: 60px;
height: 60px;
font-size: 30px;
text-align: center;
background: #00796b;
border-radius: 50%;
display: table;
}
#ss_menu div i {
display: table-cell;
vertical-align: middle;
}
#ss_menu div:hover {
background: #009688;
cursor: pointer;
}
#ss_menu div:nth-child(1) {
top: 0px;
left: -160px;
}
#ss_menu div:nth-child(2) {
top: -80px;
left: -138.56406px;
}
#ss_menu div:nth-child(3) {
top: -138.56406px;
left: -80px;
}
#ss_menu div:nth-child(4) {
top: -160px;
left: 0px;
}
右下角使用css,CSS3 屏幕右下角的径向菜单相关推荐
- 【求助】哪个软件负责在屏幕右下角显示类似“caps lock on/off”的? - 技术封存区 - 专门网论坛 -...
[求助]哪个软件负责在屏幕右下角显示类似"caps lock on/off"的? - 技术封存区 - 专门网论坛 -
- 开机弹出“今日看点”和屏幕右下角弹出小广告的解决方法
<开机弹出"今日看点"和屏幕右下角弹出小广告的解决方法!> 最近几天,我家电脑屏幕右下角经常弹出广告窗口.<腾讯QQ>和<迅雷看看>弹出来的广告 ...
- CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
- [总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
- CSS / CSS3
CSS / CSS3 篇 三种导入CSS的方式 CSS盒子模型 CSS选择器 伪类与伪元素 选择器的优先级 选择器权重的计算规则 选择器为什么是从右往左匹配的 可以继承的属性有哪些 px / em / ...
- css/css3总结(一)
当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢? 一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权. 浏览器缺省设置 外部样式表 内部样式 ...
- JavaScript + CSS/CSS3 + HTML 网页登陆 + 注册界面设计
登陆界面设计 撸代码之前先来看一看效果图: 登陆界面由一个简单的表单(头像.用户名.密码.登陆按钮.记住我.取消.忘记密码),创建了一个CSS3的缩放效果构成.需要做浏览器(Firefox.Safar ...
- 计算机右下角时间格式,电脑右下角时间格式_电脑右下角时间不准
2016-12-10 14:32:21 你好,据我所知,WIN7系统设置电脑时间无法显示秒数.即使在时间设置格式中加入了秒SS,电脑右下角托盘中还是只显示到分.且没有必要显示到秒,若要暂时显示到秒,可 ...
- 【面试篇】前端点滴(css/css3)
[面试篇]前端点滴(CSS/CSS3)---倾尽所有 面试小问答 css基础 css盒模型 css选择器 BFC css(float) css(position/z-index) css(displa ...
最新文章
- 8.6 GOF设计模式四: 策略模式… Strategy Pattern
- RTT设备与驱动之PIN设备
- rest spring_Spring REST:异常处理卷。 3
- __dopostback
- android checkBox背景样式及用颜色值实现button点击效果
- java 哈希表入门
- RGB565 转 RGB
- Python 玩转数据 8 - Pandas Indexing and Slicing
- xp系统和服务器同步时间出错,xp电脑时间同步出错该怎么解决?电脑时间同步错误解决方法...
- 矩阵计算在计算机科学中,开发者必读:计算机科学中的线性代数
- LPC1768生成bin文件夹问题
- 加州欧文计算机工程专业,加州大学欧文分校计算机工程博士专业排名
- CSDN【精品专栏】第六期
- 【2309. 兼具大小写的最好英文字母】
- 椭圆型偏微分方程和格林函数
- 怎么求中位数和分位数 概率密度函数_计量经济学中的“条件”与“无条件”...
- 编程初学者为什么要首选Java?
- Js放在head和body中的区别
- php支付宝wap支付详解,alipay_wap
- 用Javascript开发《三国志曹操传》-开源讲座(五)-可移动地图的实现
热门文章
- jmeter(十三)常见问题及解决方法
- 读取和写入文件的最简单方法
- C#在foreach中重用变量是否有原因?
- win11扩展任务栏没东西怎么办 windows11扩展任务栏没东西的解决方法
- 查看mysql单个表大小限制_查看单个mysql数据库中各个表的大小
- python的os为啥找不到文件_python使用os.listdir和os.walk获得文件的路径
- postgre管理员 无法访问表_PostgreSQL常见问题处理方法
- 微服务配置中心是干啥的_微服务化改造系列之三:配置中心
- qt opengl 2d绘图效率_Qt趣味开发之打造一个3D名字渲染小工具
- 结构体04:结构体嵌套结构体