css3 给网页页面加个半圆形导航栏条关键运用转动

日期:2020-10-22 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

关键是运用了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标识 用了1个第3方库 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: ⑴.75em;
bottom: ⑴.75em;
border-radius: 50%;
cursor: pointer;
z-index: 11;
}

关键起功效的是

拷贝编码
编码以下:

border-radius: 50%;

能够试1下,假如想把1个div变为圆形,就用这行编码,那半圆呢? 你把剩余半个挡住不就OK了!

大家把 cn-warpper也变为半圆的

拷贝编码
编码以下:

.cn-wrapper {
width: 26em;
height: 26em;
position: fixed;
z-index: 10;
bottom: 0;
left: 50%;
margin-left: ⑵00px;
border: 1px solid #7C5089;
-webkit-transition: all .3s ease;
transition: all .3s ease;
border-radius: 50%;
overflow: hidden;
bottom: ⑴3em;
-webkit-transform: scale(0);
}


拷贝编码
编码以下:

-webkit-transform: scale(0);

是以便让它1刚开始无法显示

接下来是重头戏了,怎样把半圆分为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: ⑴.3em;
margin-left: ⑴0em;
overflow: hidden;
-webkit-transform: rotate(0deg) skew(50deg);
}

变斜的重要

拷贝编码
编码以下:

-webkit-transform: rotate(0deg) skew(50deg);

skew(50deg)便是在水平方位歪斜50度(暂且称之为度),rotate紧紧围绕自身转动0度 也便是不转,第1个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: ⑹.75em;
right: ⑹.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(⑸0deg) rotate(⑺0deg);
}


拷贝编码
编码以下:

text-align: center;
padding-top: 2em;
padding-right: 20px;

这些全是以便设定icon的部位,没甚么要说的

拷贝编码
编码以下:

-webkit-transform: skew(⑸0deg) rotate(⑺0deg);

以便逢迎父连接点li的变斜,因此skew为负50度,rotate负70 (这样也是以便icon能在div正中间显示信息text-align:center)


接下来你能够把上边的overflow::hidden去掉试一试,是否全乱了?这段编码便是以便抱住其子连接点的款式,即便子连接点的款式是乱的,要是不让它显示信息出来便可以了。

OK,接下来便是1些基础的款式了

所有编码:

拷贝编码
编码以下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF⑻">
<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: ⑵00px;
border: 1px solid #7C5089;
-webkit-transition: all .3s ease;
transition: all .3s ease;
border-radius: 50%;
overflow: hidden;
bottom: ⑴3em;
-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: ⑴.75em;
bottom: ⑴.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: ⑹.75em;
right: ⑹.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(⑸0deg) rotate(⑺0deg) ;
}
.cn-wrapper li:first-child {
left: 50%; top: 50%; margin-top: ⑴.3em; margin-left: ⑴0em; overflow: hidden; -webkit-transform: rotate(0deg) skew(50deg);
}
.cn-wrapper li:nth-child(2) {
left: 50%; top: 50%; margin-top: ⑴.3em; margin-left: ⑴0em; overflow: hidden; -webkit-transform: rotate(36deg) skew(50deg);
}
.cn-wrapper li:nth-child(3) {
left: 50%; top: 50%; margin-top: ⑴.3em; margin-left: ⑴0em; overflow: hidden; -webkit-transform: rotate(72deg) skew(50deg);
}
.cn-wrapper li:nth-child(4) {
left: 50%; top: 50%; margin-top: ⑴.3em; margin-left: ⑴0em; overflow: hidden; -webkit-transform: rotate(108deg) skew(50deg);
}
.cn-wrapper li:nth-child(5) {
left: 50%; top: 50%; margin-top: ⑴.3em; margin-left: ⑴0em; 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="http://code.jquery.com/jquery⑴.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>