主要效果 | |
---|---|
1、波浪效果 | 2、利用阴影写一个menu按钮动画效果 |
3、商品标签丝带效果 | 4、Hover按钮边框动画特效 |
CSS弧形遮罩动画 |
1、波浪效果:
主要用到:after 和 :before 两个选择器搭配完成;
把 translate 的Y轴 向上偏移25%,再动画旋转;
<style>
.container {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
padding: 5px;
overflow: hidden;
border: 5px solid rgb(188,118,255);
border-radius: 50%;
transform: translate(-50%,-50%);
}
.wave {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 50%;
background-color: rgb(118,188,255);
}
.wave:after ,
.wave:before {
content: '';
z-index: 10px;
position: absolute;
top: 0;
left: 50%;
width: 400px;
height: 400px;
border-radius: 100px;
background-color: rgba(255,255,255,.3);
transform: translate(-50%,-70%) rotate(0deg);
animation: roTate 6s linear infinite;
}
.wave:after {
top: -10px;
background-color: rgba(255,255,155,.1); //淡蓝色
}
@keyframes roTate {
0% {transform: translate(-50%,-70%) rotate(0deg);}
50% {transform: translate(-50%,-75%) rotate(180deg);}
100% {transform: translate(-50%,-70%) rotate(90deg);}
}
</style>
<div class="container">
<div class="wave">动画</div>
</div>
效果:
2、利用阴影写一个menu按钮动画效果
<div clas="menu-box">
<div class="menu"></div>
</div>
.menu-box { margin-top: 200px; }
.menu {
position: relative;
width: 100px;
height: 100px;
}
.menu:before ,
.menu:after {
content: " ";
position: absolute;
left: 0;
display: block;
width: 100px;
height: 10px;
background: #000;
border-radius: 8px;
transition: all .25s ease-in-out;
}
.menu:before {
top: 5px;
/* 利用阴影制作中间的那根线,当鼠标hover时隐藏 */
box-shadow: 0 37px #000;
}
.menu:after {
bottom: 5px;
}
.menu:hover:before {
top: 40px;
box-shadow: none;
transform: rotate(225deg);
}
.menu:hover:after {
/* hover时偏移的位置、旋转的角度 */
bottom: 50px;
transform: rotate(135deg);
}
<div clas="menu-box">
<div class="menu"></div>
</div>
3、商品标签丝带效果
.ribbon6 类主要做主体部分,旋转角度,宽度超出的部分被.ribbon祖元素溢出隐藏掉了;
.ribbon{
position: relative;
width: 216px;
height: 216px;
padding-top: 8px;
overflow: hidden;
color: #fff;
}
.wrap {
width: 188px;
height: 188px;
background: #ddd;
position: absolute;
padding: 10px;
margin: 0 auto;
}
.wrap:before {
content: " ";
display: block;
border-radius: 8px 8px 0 0;
width: 40px;
height: 8px;
position: absolute;
right: 80px;
top: -8px;
background: #4d6530;
}
.wrap:after{
content: "";
display: block;
border-radius: 0 8px 8px 0;
width: 8px;
height: 40px;
position: absolute;
right: -8px;
top: 80px;
background: #4d6530;
}
/* 旋转角度 */
.ribbon6{
position: absolute;
top: 15px;
right: -65px;
display: inline-block;
text-align: center;
width: 200px;
height: 40px;
line-height: 40px;
z-index: 2;
overflow: hidden;
transform: rotate(45deg);
border: 1px dashed;
background: #57dd43;
box-shadow: 0 0 0 3px #57dd43,
0 21px 5px -18px rgba(0,0,0,.6);
}
<div class="ribbon">
<div class="wrap">
<span class="ribbon6">丝带效果</span>
</div>
</div>
4、Hover按钮边框动画特效:
主要用到:before和:after 先进行transform 属性 scale() 不同位置的缩放,再在鼠标hover时方大的实现原理;
.plug-info {
position: relative;
width: 100px;
height: 100px;
background-color: #777;
}
.plug-info .box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #1aab8a;
}
.plug-info .box:before ,
.plug-info .box:after {
content: '';
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
opacity: 0;
transition: .6s ease all;
}
.plug-info .box:before {
border-width: 1px 0 1px 0;
border-style: solid;
border-color: #fff;
-webkit-transform: scale(1,0);
-o-transform: scale(1,0);
transform: scale(1,0);
}
.plug-info .box:after {
border-width: 0 1px 0 1px;
border-style: solid;
border-color: #fff;
-webkit-transform: scale(0,1);
-o-transform: scale(0,1);
transform: scale(0,1);
}
.plug-info .box:hover:before ,
.plug-info .box:hover:after {
opacity: 1;
cursor: pointer;
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-ms-transform: scale(1,1);
-o-transform: scale(1,1);
transform: scale(1,1);
}
<div class="plug-info">
<div class="box"></div>
</div>