白云岛资源网 Design By www.pvray.com
主要是利用了css3的 rolate(旋转) 和 skew (倾斜)样式
先上代码:
html 很简单
复制代码代码如下:
<body>
<button class="cn-button" id="cn-button">+</button>
<div class="cn-wrapper" id="cn-wrapper">
<ul>
<li><a href="a.html"><i class="fa fa-volume-down"></i></a></li>
<li><a href="#"><i class="fa fa-headphones"></i></a></li>
<li><a href="#"><i class="fa fa-home"></i></a></li>
<li><a href="#"><i class="fa fa-trophy"></i></a></li>
<li><a href="#"><i class="fa fa-exclamation-triangle"></i></a></li>
</ul>
</div>
</body>
这里的i标签 用了一个第三方库 http://fortawesome.github.io/Font-Awesome/icons/
接下来是css
先来个半圆形button
复制代码代码如下:
.cn-button {
outline: none;
border: none;
color: #f06060;
text-align: center;
font-size: 1.8em;
padding-bottom: 1em;
height: 3.5em;
width: 3.5em;
background-color: #fff;
position: fixed;
left: 50%;
margin-left: -1.75em;
bottom: -1.75em;
border-radius: 50%;
cursor: pointer;
z-index: 11;
}
主要起作用的是
复制代码代码如下:
border-radius: 50%;
可以试一下,如果想把一个div变成圆形,就用这行代码,那半圆呢? 你把剩下半个挡住不就OK了！
我们把 cn-warpper也变成半圆的
复制代码代码如下:
.cn-wrapper {
width: 26em;
height: 26em;
position: fixed;
z-index: 10;
bottom: 0;
left: 50%;
margin-left: -200px;
border: 1px solid #7C5089;
-webkit-transition: all .3s ease;
transition: all .3s ease;
border-radius: 50%;
overflow: hidden;
bottom: -13em;
-webkit-transform: scale(0);
}
复制代码代码如下:
-webkit-transform: scale(0);
是为了让它一开始不显示
接下来是重头戏了，如何把半圆分成5个li
首先给li加基本样式，宽高，让他们重叠
复制代码代码如下:
.cn-wrapper li {
position: absolute;
font-size: 1.5em;
width: 10em;
height: 10em;
overflow: hidden;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
background-color: #eee;
-webkit-transition: all 1s ease;
transition: all 1s ease;
color: #aaa;
}
复制代码代码如下:
overflow: hidden;
这个必须有，后面说明！
然后 让li变斜，为什么变斜？如果都是正方形，要不然怎么够分呢？
复制代码代码如下:
.cn-wrapper li:first-child {
left: 50%;
top: 50%;
margin-top: -1.3em;
margin-left: -10em;
overflow: hidden;
-webkit-transform: rotate(0deg) skew(50deg);
}
变斜的关键
复制代码代码如下:
-webkit-transform: rotate(0deg) skew(50deg);
skew（50deg）就是在水平方向倾斜50度（姑且称之为度），rotate围绕自己旋转0度 也就是不转，第一个li不用转，只用倾斜就可以，后面的li要依次旋转36度，为什么36度？ 180/5
然后就是li下的a了
复制代码代码如下:
.cn-wrapper li a {
display: block;
font-size: 1.2em;
height: 14.5em;
width: 13.5em;
position: absolute;
bottom: -6.75em;
right: -6.75em;
text-decoration: none;
color: white;
-webkit-transition: background-color .3s ease, -webkit-transform .8s ease;
transition: background-color .3s ease, -webkit-transform .8s ease;
transition: background-color .3s ease, transform .8s ease;
text-align: center;
padding-top: 2em;
padding-right: 20px;
-webkit-transform: skew(-50deg) rotate(-70deg);
}
复制代码代码如下:
text-align: center;
padding-top: 2em;
padding-right: 20px;
这些都是为了设置icon的位置，没什么要说的
复制代码代码如下:
-webkit-transform: skew(-50deg) rotate(-70deg);
为了迎合父节点li的变斜，所以skew为负50度，rotate负70 （这样也是为了icon能在div中间显示text-align:center）
接下来你可以把上边的overflow::hidden去掉试试看，是不是全乱了？这段代码就是为了抱住其子节点的样式，即使子节点的样式是乱的，只要不让它显示出来就可以了。
OK，接下来就是一些基本的样式了
全部代码：
复制代码代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<style type="text/css">
* {
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
.cn-wrapper {
width: 26em;
height: 26em;
position: fixed;
z-index: 10;
bottom: 0;
left: 50%;
margin-left: -200px;
border: 1px solid #7C5089;
-webkit-transition: all .3s ease;
transition: all .3s ease;
border-radius: 50%;
overflow: hidden;
bottom: -13em;
-webkit-transform: scale(0);
}
.open {
-webkit-transform: scale(1);
}
.cn-wrapper li {
position: absolute;
font-size: 1.5em;
width: 10em;
height: 10em;
overflow: hidden;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
background-color: #eee;
-webkit-transition: all 1s ease;
transition: all 1s ease;
color: #aaa;
}
.cn-button {
outline: none;
border: none;
color: #f06060;
text-align: center;
font-size: 1.8em;
padding-bottom: 1em;
height: 3.5em;
width: 3.5em;
background-color: #fff;
position: fixed;
left: 50%;
margin-left: -1.75em;
bottom: -1.75em;
border-radius: 50%;
cursor: pointer;
z-index: 11;
}
.cn-wrapper li a {
display: block;
font-size: 1.2em;
height: 14.5em;
width: 13.5em;
position: absolute;
bottom: -6.75em;
right: -6.75em;
text-decoration: none;
color: white;
-webkit-transition: background-color .3s ease, -webkit-transform .8s ease;
transition: background-color .3s ease, -webkit-transform .8s ease;
transition: background-color .3s ease, transform .8s ease;
text-align: center;
border-radius: 50%;
padding-top: 2em;
padding-right: 20px;
-webkit-transform: skew(-50deg) rotate(-70deg) ;
}
.cn-wrapper li:first-child {
left: 50%; top: 50%; margin-top: -1.3em; margin-left: -10em; overflow: hidden; -webkit-transform: rotate(0deg) skew(50deg);
}
.cn-wrapper li:nth-child(2) {
left: 50%; top: 50%; margin-top: -1.3em; margin-left: -10em; overflow: hidden; -webkit-transform: rotate(36deg) skew(50deg);
}
.cn-wrapper li:nth-child(3) {
left: 50%; top: 50%; margin-top: -1.3em; margin-left: -10em; overflow: hidden; -webkit-transform: rotate(72deg) skew(50deg);
}
.cn-wrapper li:nth-child(4) {
left: 50%; top: 50%; margin-top: -1.3em; margin-left: -10em; overflow: hidden; -webkit-transform: rotate(108deg) skew(50deg);
}
.cn-wrapper li:nth-child(5) {
left: 50%; top: 50%; margin-top: -1.3em; margin-left: -10em; overflow: hidden; -webkit-transform: rotate(144deg) skew(50deg);
}
.cn-wrapper li:nth-child(even) a {
background-color: #a61414;
background-color: hsla(0, 88%, 65%, 1);
}
.cn-wrapper li:nth-child(odd) a {
background-color: #a11313;
background-color: hsla(0, 88%, 63%, 1);
}
.cn-wrapper li a:hover {
background-color: #a11313;
}
body {
background-color:rgba(0,0,0,0.6);
}
</style>
</head>
<body>
<button class="cn-button" id="cn-button">+</button>
<div class="cn-wrapper" id="cn-wrapper">
<ul>
<li><a id="aaa1" href="a.html"><i class="fa fa-volume-down"></i></a></li>
<li><a href="#"><i class="fa fa-headphones"></i></a></li>
<li><a href="#"><i class="fa fa-home"></i></a></li>
<li><a href="#"><i class="fa fa-trophy"></i></a></li>
<li><a href="#"><i class="fa fa-exclamation-triangle"></i></a></li>
</ul>
</div>
</body>
<script type="text/javascript" src="/UploadFiles/2021-03-30/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var button = $("#cn-button");
button.click(function(){
$("#cn-wrapper").toggleClass("open");
if (button.text() === "+") {
button.text("-");
} else {
button.text("+");
}
});
//button.addEventLis
</script>
</html>
先上代码:
html 很简单
复制代码代码如下:
<body>
<button class="cn-button" id="cn-button">+</button>
<div class="cn-wrapper" id="cn-wrapper">
<ul>
<li><a href="a.html"><i class="fa fa-volume-down"></i></a></li>
<li><a href="#"><i class="fa fa-headphones"></i></a></li>
<li><a href="#"><i class="fa fa-home"></i></a></li>
<li><a href="#"><i class="fa fa-trophy"></i></a></li>
<li><a href="#"><i class="fa fa-exclamation-triangle"></i></a></li>
</ul>
</div>
</body>
这里的i标签 用了一个第三方库 http://fortawesome.github.io/Font-Awesome/icons/
接下来是css
先来个半圆形button
复制代码代码如下:
.cn-button {
outline: none;
border: none;
color: #f06060;
text-align: center;
font-size: 1.8em;
padding-bottom: 1em;
height: 3.5em;
width: 3.5em;
background-color: #fff;
position: fixed;
left: 50%;
margin-left: -1.75em;
bottom: -1.75em;
border-radius: 50%;
cursor: pointer;
z-index: 11;
}
主要起作用的是
复制代码代码如下:
border-radius: 50%;
可以试一下,如果想把一个div变成圆形,就用这行代码,那半圆呢? 你把剩下半个挡住不就OK了！
我们把 cn-warpper也变成半圆的
复制代码代码如下:
.cn-wrapper {
width: 26em;
height: 26em;
position: fixed;
z-index: 10;
bottom: 0;
left: 50%;
margin-left: -200px;
border: 1px solid #7C5089;
-webkit-transition: all .3s ease;
transition: all .3s ease;
border-radius: 50%;
overflow: hidden;
bottom: -13em;
-webkit-transform: scale(0);
}
复制代码代码如下:
-webkit-transform: scale(0);
是为了让它一开始不显示
接下来是重头戏了，如何把半圆分成5个li
首先给li加基本样式，宽高，让他们重叠
复制代码代码如下:
.cn-wrapper li {
position: absolute;
font-size: 1.5em;
width: 10em;
height: 10em;
overflow: hidden;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
background-color: #eee;
-webkit-transition: all 1s ease;
transition: all 1s ease;
color: #aaa;
}
复制代码代码如下:
overflow: hidden;
这个必须有，后面说明！
然后 让li变斜，为什么变斜？如果都是正方形，要不然怎么够分呢？
复制代码代码如下:
.cn-wrapper li:first-child {
left: 50%;
top: 50%;
margin-top: -1.3em;
margin-left: -10em;
overflow: hidden;
-webkit-transform: rotate(0deg) skew(50deg);
}
变斜的关键
复制代码代码如下:
-webkit-transform: rotate(0deg) skew(50deg);
skew（50deg）就是在水平方向倾斜50度（姑且称之为度），rotate围绕自己旋转0度 也就是不转，第一个li不用转，只用倾斜就可以，后面的li要依次旋转36度，为什么36度？ 180/5
然后就是li下的a了
复制代码代码如下:
.cn-wrapper li a {
display: block;
font-size: 1.2em;
height: 14.5em;
width: 13.5em;
position: absolute;
bottom: -6.75em;
right: -6.75em;
text-decoration: none;
color: white;
-webkit-transition: background-color .3s ease, -webkit-transform .8s ease;
transition: background-color .3s ease, -webkit-transform .8s ease;
transition: background-color .3s ease, transform .8s ease;
text-align: center;
padding-top: 2em;
padding-right: 20px;
-webkit-transform: skew(-50deg) rotate(-70deg);
}
复制代码代码如下:
text-align: center;
padding-top: 2em;
padding-right: 20px;
这些都是为了设置icon的位置，没什么要说的
复制代码代码如下:
-webkit-transform: skew(-50deg) rotate(-70deg);
为了迎合父节点li的变斜，所以skew为负50度，rotate负70 （这样也是为了icon能在div中间显示text-align:center）
接下来你可以把上边的overflow::hidden去掉试试看，是不是全乱了？这段代码就是为了抱住其子节点的样式，即使子节点的样式是乱的，只要不让它显示出来就可以了。
OK，接下来就是一些基本的样式了
全部代码：
复制代码代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<style type="text/css">
* {
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
.cn-wrapper {
width: 26em;
height: 26em;
position: fixed;
z-index: 10;
bottom: 0;
left: 50%;
margin-left: -200px;
border: 1px solid #7C5089;
-webkit-transition: all .3s ease;
transition: all .3s ease;
border-radius: 50%;
overflow: hidden;
bottom: -13em;
-webkit-transform: scale(0);
}
.open {
-webkit-transform: scale(1);
}
.cn-wrapper li {
position: absolute;
font-size: 1.5em;
width: 10em;
height: 10em;
overflow: hidden;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
background-color: #eee;
-webkit-transition: all 1s ease;
transition: all 1s ease;
color: #aaa;
}
.cn-button {
outline: none;
border: none;
color: #f06060;
text-align: center;
font-size: 1.8em;
padding-bottom: 1em;
height: 3.5em;
width: 3.5em;
background-color: #fff;
position: fixed;
left: 50%;
margin-left: -1.75em;
bottom: -1.75em;
border-radius: 50%;
cursor: pointer;
z-index: 11;
}
.cn-wrapper li a {
display: block;
font-size: 1.2em;
height: 14.5em;
width: 13.5em;
position: absolute;
bottom: -6.75em;
right: -6.75em;
text-decoration: none;
color: white;
-webkit-transition: background-color .3s ease, -webkit-transform .8s ease;
transition: background-color .3s ease, -webkit-transform .8s ease;
transition: background-color .3s ease, transform .8s ease;
text-align: center;
border-radius: 50%;
padding-top: 2em;
padding-right: 20px;
-webkit-transform: skew(-50deg) rotate(-70deg) ;
}
.cn-wrapper li:first-child {
left: 50%; top: 50%; margin-top: -1.3em; margin-left: -10em; overflow: hidden; -webkit-transform: rotate(0deg) skew(50deg);
}
.cn-wrapper li:nth-child(2) {
left: 50%; top: 50%; margin-top: -1.3em; margin-left: -10em; overflow: hidden; -webkit-transform: rotate(36deg) skew(50deg);
}
.cn-wrapper li:nth-child(3) {
left: 50%; top: 50%; margin-top: -1.3em; margin-left: -10em; overflow: hidden; -webkit-transform: rotate(72deg) skew(50deg);
}
.cn-wrapper li:nth-child(4) {
left: 50%; top: 50%; margin-top: -1.3em; margin-left: -10em; overflow: hidden; -webkit-transform: rotate(108deg) skew(50deg);
}
.cn-wrapper li:nth-child(5) {
left: 50%; top: 50%; margin-top: -1.3em; margin-left: -10em; overflow: hidden; -webkit-transform: rotate(144deg) skew(50deg);
}
.cn-wrapper li:nth-child(even) a {
background-color: #a61414;
background-color: hsla(0, 88%, 65%, 1);
}
.cn-wrapper li:nth-child(odd) a {
background-color: #a11313;
background-color: hsla(0, 88%, 63%, 1);
}
.cn-wrapper li a:hover {
background-color: #a11313;
}
body {
background-color:rgba(0,0,0,0.6);
}
</style>
</head>
<body>
<button class="cn-button" id="cn-button">+</button>
<div class="cn-wrapper" id="cn-wrapper">
<ul>
<li><a id="aaa1" href="a.html"><i class="fa fa-volume-down"></i></a></li>
<li><a href="#"><i class="fa fa-headphones"></i></a></li>
<li><a href="#"><i class="fa fa-home"></i></a></li>
<li><a href="#"><i class="fa fa-trophy"></i></a></li>
<li><a href="#"><i class="fa fa-exclamation-triangle"></i></a></li>
</ul>
</div>
</body>
<script type="text/javascript" src="/UploadFiles/2021-03-30/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var button = $("#cn-button");
button.click(function(){
$("#cn-wrapper").toggleClass("open");
if (button.text() === "+") {
button.text("-");
} else {
button.text("+");
}
});
//button.addEventLis
</script>
</html>
白云岛资源网 Design By www.pvray.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
白云岛资源网 Design By www.pvray.com
暂无评论...
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/2
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。