css3鼠标经过出现转圈菜单（仿）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding:0;
}
body{
background:#006d5c;
}
.outer{
position: relative;
width:150px;
height:150px;
margin:80px auto;
border-radius: 50%;
background:#fff;
cursor: pointer; transition:all 1s
}
.outer ul{
list-style: none;
position: absolute;
top:-75px;
left:-75px;
border-radius:50%;
border: 150px solid transparent;
z-index: -1;
transform:scale(0);
transition: transform 1.4s 0.07s;
}
.outer li{
position: absolute;
top: -100px;
left: -100px;
transform-origin: 100px 100px;
transition: all 0.5s 0.1s;
}
a{
text-decoration: none;
color:#02c67c;
width: 45px;
height: 45px;
line-height: 45px;
border-radius: 50%;
background: #fff;
position: absolute;
font-size: 14px;
transition: 0.6s;
text-align: center;
}
.outer:hover ul{
transition: transform 0.4s 0.08s, z-index 0s 0.5s;
transform: scale(1);
z-index: 1;
}
.outer:hover li{
transition:all 0.6s
}
.outer:hover li:nth-child(1){
transition-delay:0.02s;
transform:rotate(90deg);
}
.outer:hover li:nth-child(1) a{
transition-delay:0.04s;
transform:rotate(270deg);
}
.outer:hover li:nth-child(2){
transition-delay:0.04s;
transform:rotate(125deg);
}
.outer:hover li:nth-child(2) a{
transition-delay:0.08s;
transform:rotate(595deg);
}
.outer:hover li:nth-child(3){
transition-delay:0.06s;
transform:rotate(165deg);
}
.outer:hover li:nth-child(3) a{
transition-delay:0.12s;
transform:rotate(555deg);
}
.outer:hover li:nth-child(4){
transition-delay:0.08s;
transform:rotate(205deg);
}
.outer:hover li:nth-child(4) a{
transition-delay:0.16s;
transform:rotate(515deg);
}
.outer:hover li:nth-child(5){
transition-delay:0.1s;
transform:rotate(245deg);
}
.outer:hover li:nth-child(5) a{
transition-delay:0.2s;
transform:rotate(475deg);
}
.outer:hover li:nth-child(6){
transition-delay:0.12s;
transform:rotate(285deg);
}
.outer:hover li:nth-child(6) a{
transition-delay:0.24s;
transform:rotate(435deg);
}
.outer:hover li:nth-child(7){
transition-delay:0.14s;
transform:rotate(325deg);
}
.outer:hover li:nth-child(7) a{
transition-delay:0.28s;
transform:rotate(395deg);
}
.outer:hover li:nth-child(8){
transition-delay:0.16s;
transform:rotate(365deg);
}
.outer:hover li:nth-child(8) a{
transition-delay:0.32s;
transform:rotate(355deg);
}
.outer:hover li:nth-child(9){
transition-delay:0.18s;
transform:rotate(405deg);
}
.outer:hover li:nth-child(9) a{
transition-delay:0.36s;
transform:rotate(315deg);
}
</style>
</head>
<body>
<div class="outer">
<ul>
<li>
<a href="javascript:void (0);">1</a>
</li>
<li>
<a href="javascript:void (0);">2</a>
</li>
<li>
<a href="javascript:void (0);">3</a>
</li>
<li>
<a href="javascript:void (0);">4</a>
</li>
<li>
<a href="javascript:void (0);">5</a>
</li>
<li>
<a href="javascript:void (0);">6</a>
</li>
<li>
<a href="javascript:void (0);">7</a>
</li>
<li>
<a href="javascript:void (0);">8</a>
</li>
<li>
<a href="javascript:void (0);">9</a>
</li>
</ul>
</div>
</body>
</html>
css3鼠标经过出现转圈菜单（仿）的更多相关文章
- 非常酷的CSS3垂直下拉动画菜单
昨天我向大家介绍了一款兼容性不错的jQuery淡入淡出下拉菜单,今天要分享一款相对绚丽的CSS3垂直下拉动画菜单,不过需要支持CSS3的浏览器才能有效果.下面是效果图,一起看看. 我们也可以在这里查看 ...
- 可以兼容ie6的纯CSS三级鼠标悬停显示/隐藏菜单实现
本来在chrome上用js写的好好的三级显隐菜单,放到ie6上一测试竟然奇葩般的会瞎闪.问题原因至今没参透,可能是我每次响应事件的处理代码过长??总之我是对ie6幻灭了,去网上搜一搜能支持ie6的下拉 ...
- 如何不使用js实现鼠标hover弹出菜单效果
最近看到很多同学在实现鼠标hover弹出菜单的效果时都是用的js代码去实现的,默认给弹出隐藏掉,通过js事件绑定动态的显/隐弹出菜单元素. <ul> <li>主页</li ...
- CSS3鼠标滑过图标放大以及旋转
本人是HTML5-CSS3初学者,这次分享一款纯CSS3实现的图片动画,当鼠标滑过小图标时,图标会放大,同时图标会出现旋转的动画效果.我们在很多个性化个人博客中经常看到鼠标滑过人物头像后头像图片旋转就 ...
- CSS3鼠标滑过动画线条边框特效
基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...
- CSS3鼠标悬停图片上浮显示描述代码
效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
- css3实现光标悬浮滚动菜单
效果:http://hovertree.com/texiao/css3/21/ 本文所用到的CSS知识请点击效果展示也中第一和第二个链接. 代码: <!DOCTYPE html> < ...
- 用jQuery做一个三级菜单，鼠标移动到二级菜单的选项上，然后再迅速离开后，当鼠标再移动到该一级菜单或其他二级菜单选项，三级菜单也会显示。
用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...
随机推荐
- shell通过ping检测整个网段IP的网络状态脚本
要实现Ping一个网段的所有IP,并检测网络连接状态是否正常,很多方法都可以实现,下面简单介绍两种,如下:脚本1#!/bin/sh# Ping网段所有IP# 2012/02/05ip=1 #通过修改初 ...
- Angular2-给属性做双向绑定
呈现一个实体对象的DOM结构,这个DOM有个自定义属性是需要动态赋值的,比如说 item.data 要绑到自定义属性 data 上:你可能会这么写: data="{{item.data}}& ...
- Java - 关于泛型
自Java 1.5开始使用的泛型,泛型给人比较直观的印象是..."尖括号里写了类型我就不用检查类型也不用强转了". 确实,那先从API的使用者的角度上想问题,泛型还有什么意义? D ...
- 高性能分布式锁-redisson的使用
1,概述:在一些高并发的场景中,比如秒杀,抢票,抢购这些场景,都存在对核心资源,商品库存的争夺,控制不好,库存数量可能被减少到负数,出现超卖的情况,或者 产生唯一的一个递增ID,由于web应用部署在多 ...
- 阿里云CentOS7.3配置Java Web应用和Tomcat步骤
阿里云的Linux系统包括CentOS7.3配置了密钥对 怎样将自己ECS实例绑定密钥对,并启用秘钥: https://help.aliyun.com/document_detail/51798.ht ...
- Web安全相关（三）：开放重定向（Open Redirection）
简介 那些通过请求(如查询字符串和表单数据)指定重定向URL的Web程序可能会被篡改,而把用户重定向到外部的恶意URL.这种篡改就被称为开发重定向攻击. 场景分析 假设有一个正规网站http://ne ...
- PowerDesigner16导出SQL时如何添加注释
添加注释方法 https://jingyan.baidu.com/article/47a29f24652e44c0142399c3.html 重点是修改value的值 alter table [%QU ...
- Code Signal_练习题_Are Similar？
Two arrays are called similar if one can be obtained from another by swapping at most one pair of el ...
- MySQL数据库(11)----使用子查询实现多表查询
子查询指的是用括号括起来,并嵌入另一条语句里的那条 SELECT 语句.下面有一个示例,它实现的是找出与考试类别('T')相对应的所有考试事件行的 ID,然后利用它们来查找那些考试的成绩: SELEC ...
- ioctl
在驱动程序里, ioctl() 函数上传送的变量 cmd 是应用程序用于区别设备驱动程序请求处理内容的值. cmd除了可区别数字外,还包含有助于处理的几种相应信息. cmd的大小为 32位,共分 4 ...