css3新属性运用

时间：2018-05-23 20:07:28 阅读：214 评论：0 收藏：0 [点我收藏+]

1、动画效果

技术分享图片 ===》===》》》

<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>

css3新属性运用

原文：https://www.cnblogs.com/qdlhj/p/9078621.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)