1、css3新单位vh、vw，这个单位是相对显示窗口的宽度或高度
vh等于viewport高度的1/100.例如，如果浏览器的高是900px,1vh求得的值为9px。同理，如果显示窗口宽度为750px,1vw求得的值为7.5px。
2、动画效果(圈圈从小到大放大)
===》
===》》》
<style> .star { position: absolute; 80px; height: 80px; } .point { position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; 10px; height: 10px; background: transparent; background-clip: padding-box; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .star .point-dot { z-index: 1; background-color: #74E0F1; border: 1px solid #74E0F1; } .pa-10 { 100%; height: 100%; } .star .pa-10:after { position: absolute; content: ''; display: block; left: 0; bottom: 0; top: 0; right: 0; margin: auto; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; opacity: 0; 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-20:after { position: absolute; content: ''; display: block; left: 0; bottom: 0; top: 0; right: 0; margin: auto; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; opacity: 0; border: 2px solid #74E0F1; -webkit-animation: ripple 3s linear 1.5s infinite; -moz-animation: ripple 3s linear 1.5s infinite; -o-animation: ripple 3s linear 1.5s infinite; animation: ripple 3s linear 1.5s infinite; } @keyframes ripple { 0% {transform: scale(0);opacity:0;} 70% {transform: scale(0.7);opacity:1;} 100% {transform: scale(1);opacity:0;} }} } </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;
0;
height: 3px;
background: #fff;
}
a:hover a:after {
background:
}
====》》
===》》
元素初始加载的时候，动画开始执行变动
/* 动画移动效果 */ .run .moveToTop { -webkit-animation: moveToTop 1.5s; -moz-animation: moveToTop 1.5s; -o-animation: moveToTop 1.5s; animation: moveToTop 1.5s; } .run .moveToBottom { -webkit-animation: moveToBottom 1.5s; -moz-animation: moveToBottom 1.5s; -o-animation: moveToBottom 1.5s; animation: moveToBottom 1.5s; } .run .moveToLeft { -webkit-animation: moveToLeft 1.5s; -moz-animation: moveToLeft 1.5s; -o-animation: moveToLeft 1.5s; animation: moveToLeft 1.5s; } .run .moveToRight { -webkit-animation: moveToRight 1.5s; -moz-animation: moveToRight 1.5s; -o-animation: moveToRight 1.5s; animation: moveToRight 1.5s; } @keyframes moveToLeft { 0% {transform: translateX(50px) translateZ(-50px)} 100% {transform: translateX(0px) translateZ(0px)} } @keyframes moveToRight { 0% {transform: translateX(-50px) translateZ(-50px)} 100% {transform: translateX(0px) translateZ(0px)} } @keyframes moveToTop { 0% {transform: translateY(50px) translateZ(-50px)} 100% {transform: translateY(0px) translateZ(0px)} } @keyframes moveToBottom { 0% {transform: translateY(-50px) translateZ(-50px)} 100% {transform: translateY(0px) translateZ(0px)} }