css3新属性运用

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: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 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 {
    width: 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;
width: 0;
height: 3px;
background: #fff;

}

a:hover a:after {

background: #4d72e2;

}

====》》===》》

 

 

 

元素初始加载的时候，动画开始执行变动

/* 动画移动效果 */
.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)}
}

 

posted @ 2018-05-23 18:28  心向阳  阅读(205)  评论(0)  编辑  收藏  举报