1、css3新单位vh、vw，这个单位是相对显示窗口的宽度或高度
vh等于viewport高度的1/100.例如，如果浏览器的高是900px,1vh求得的值为9px。同理，如果显示窗口宽度为750px,1vw求得的值为7.5px。
2、动画效果(圈圈从小到大放大)
===》
===》》》
<style>
.star {
position: absolute;
width: 80px;
height: 80px;
}
.point {
position: absolute;
left: ;
top: ;
bottom: ;
right: ;
margin: auto;
width: 10px;
height: 10px;
background: transparent;
background-clip: padding-box;
border-radius: %;
-webkit-border-radius: %;
-moz-border-radius: %;
border-radius: %;
}
.star .point-dot {
z-index: ;
background-color: #74E0F1;
border: 1px solid #74E0F1;
}
.pa- {
width: %;
height: %;
}
.star .pa-:after {
position: absolute;
content: '';
display: block;
left: ;
bottom: ;
top: ;
right: ;
margin: auto;
border-radius: %;
-webkit-border-radius: %;
-moz-border-radius: %;
border-radius: %;
opacity: ;
border: 2px solid #74E0F1;
-webkit-animation: ripple 3s linear 0ms infinite;
-moz-animation: ripple 3s linear 0ms infinite;
-o-animation: ripple 3s linear 0ms infinite;
animation: ripple 3s linear 0ms infinite;
}
.star .pa-:after {
position: absolute;
content: '';
display: block;
left: ;
bottom: ;
top: ;
right: ;
margin: auto;
border-radius: %;
-webkit-border-radius: %;
-moz-border-radius: %;
border-radius: %;
opacity: ;
border: 2px solid #74E0F1;
-webkit-animation: ripple 3s linear .5s infinite;
-moz-animation: ripple 3s linear .5s infinite;
-o-animation: ripple 3s linear .5s infinite;
animation: ripple 3s linear .5s infinite;
}
@keyframes ripple {
% {transform: scale();opacity:;}
% {transform: scale(0.7);opacity:;}
% {transform: scale();opacity:;}
}}
}
</style>
</head>
<body> <span class="star">
<i class="point point-dot"></i>
<i class="pa-10 point"></i>
<i class="pa-20 point"></i>
</span> </body>
3.常见的PC鼠标滑过，出现呢下滑线，移开消失
<li><a>首页</a></li>
a:after {
transition: 0.3s all;
content: '';
display: block;
position: relative;
width: 0;
height: 3px;
background: #fff;
}
a:hover a:after {
background: #4d72e2;
}
====》》
===》》
元素初始加载的时候，动画开始执行变动
/* 动画移动效果 */
.run .moveToTop {
-webkit-animation: moveToTop .5s;
-moz-animation: moveToTop .5s;
-o-animation: moveToTop .5s;
animation: moveToTop .5s;
}
.run .moveToBottom {
-webkit-animation: moveToBottom .5s;
-moz-animation: moveToBottom .5s;
-o-animation: moveToBottom .5s;
animation: moveToBottom .5s;
}
.run .moveToLeft {
-webkit-animation: moveToLeft .5s;
-moz-animation: moveToLeft .5s;
-o-animation: moveToLeft .5s;
animation: moveToLeft .5s;
}
.run .moveToRight {
-webkit-animation: moveToRight .5s;
-moz-animation: moveToRight .5s;
-o-animation: moveToRight .5s;
animation: moveToRight .5s;
}
@keyframes moveToLeft {
% {transform: translateX(50px) translateZ(-50px)}
% {transform: translateX(0px) translateZ(0px)}
}
@keyframes moveToRight {
% {transform: translateX(-50px) translateZ(-50px)}
% {transform: translateX(0px) translateZ(0px)}
}
@keyframes moveToTop {
% {transform: translateY(50px) translateZ(-50px)}
% {transform: translateY(0px) translateZ(0px)}
}
@keyframes moveToBottom {
% {transform: translateY(-50px) translateZ(-50px)}
% {transform: translateY(0px) translateZ(0px)}
}