一. 使用 margin 属性将元素水平居中
{
display: block;
margin: auto;
}
二. 经典代码
<style>
header {
background-color: hsl(180, 90%, 35%);
color: #FFFFFF;
}
nav {
background-color: hsl(180, 80%, 25%);
}
h1 {
text-indent: 10px;
padding-top: 10px;
}
nav ul {
margin: 0px;
padding: 5px 0px 5px 30px;
}
nav li {
display: inline;
margin-right: 20px;
}
a {
text-decoration: none;
color: inherit;
}
</style>
<header>
<h1>FCC 中国</h1>
<nav>
<ul>
<li><a href="">首页</a></li>
<li><a href="">课程</a></li>
<li><a href="">论坛</a></li>
<li><a href="">新闻</a></li>
<li><a href="">设置</a></li>
</ul>
</nav>
</header>
三. 美丽的渐变色
<style>
div{
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50px auto;
**background: linear-gradient(35deg,#CCFFFF,#FFCCCC);**
}
</style>
<div></div>
++重复渐变
background: **repeating-linear-gradient**(
45deg,
yellow 0px,
yellow 40px,
black 40px,
black 80px
);
四. 放大
**放大两倍**
div {
transform: scale(2);
}
**悬停时放大1.1倍**
div:hover {
transform: scale(1.1);
}
五. 完美按钮
实现停留渐变状态
<style>
button {
border-radius: 5px;
color: white;
background-color: #0F5897;
padding: 5px 10px 8px 10px;
}
button:hover {
animation-name: background-color;
animation-duration: 500ms;
/* add your code below this line */
animation-fill-mode: forwards;
/* add your code above this line */
}
@keyframes background-color {
100% {
background-color: #4791d0;
}
}
</style>
<button>注册</button>
六. 一直跳动的皮球
<style>
#ball {
width: 100px;
height: 100px;
margin: 50px auto;
position: relative;
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes bounce{
0% {
top: 0px;
}
50% {
top: 249px;
width: 130px;
height: 70px;
}
100% {
top: 0px;
}
}
</style>
<div id="ball"></div>
七 跳动的心心
<style>
.back {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
animation-name: backdiv;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
animation-name: beat;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.heart:after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart:before {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
@keyframes backdiv {
50% {
background: #ffe6f2;
}
}
@keyframes beat {
0% {
transform: scale(1) rotate(-45deg);
}
50% {
transform: scale(0.6) rotate(-45deg);
}
}
</style>
<div class="back"></div>
<div class="heart"></div>