半透明边框

background-clip: 规定背景的绘制区域

.div {width: 200px;height: 200px;background: blue;border: 10px solid rgba(255, 170, 170, 0.3);background-clip: padding-box;
}

效果如图

平行四边形

// 方法一
<div class="skew-ex"><div>平行四边形</div>
</div>.skew-ex {width: 200px;height: 40px;line-height: 40px;background: tomato;color: white;transform: skewX(-45deg);>div {transform: skewX(45deg);}}// 方法二
<div class="skew-ex">平行四边形
</div>
.skew-ex {width: 200px;height: 40px;line-height: 40px;color: white;position: relative;&::before {content: '';position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: tomato;z-index: -1;transform: skewX(-45deg);}}

毛玻璃效果

<div class="glass-ex"><div class="glass-bg"></div><div class="main">时间慢慢地带走了本不该留下的，我已经快要想不起来你笑起来的样子，你穿的什么衣服牵着谁的手，突然难过了。我知道自己喜欢你，但我不知道将来在哪，因为我知道，无论在哪里，你都不会带我去，而记忆打亮你的微笑，要如此用力才变得欢喜。</div>
</div>

// 主要是main标签的伪元素，设置跟大盒子一样的背景，再把z-index层级小于main，让字在背景上，有个要注意的就是
// 在使用负的z-index来把一个子元素移动到它的父元素下层时，如果父元素的上级元素有背景，则该子元素将出现在他们之后
.glass-ex {width: 500px;height: 400px;background-size: cover;margin-top: 30px;display: flex;display: -webkit-flex;justify-content: center;align-items: center;position: relative;.main {width: 440px;height: 300px;background: rgba(255, 255, 255, 0.3);font-size: 14px;line-height: 32px;display: flex;display: -webkit-flex;justify-content: flex-start;align-items: center;padding: 2%;position: relative;z-index: 9;overflow: hidden;&::before{content: '';position: absolute;left: 0;top: 0;bottom: 0;right: 0;background: url(../../static/img/chai.jpg) no-repeat;background-size: cover;filter: blur(10px);z-index: -1;margin: -15px;}}.glass-bg {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: url(../../static/img/chai.jpg) no-repeat;background-size: cover;}}

效果如图

闪烁效果

<div class="blink-ex">闪烁效果</div>

.blink-ex {color: #009a61;animation: 1s blink-smooth 6 alternate; // 缓动闪烁animation: 1s blink-smooth 3 steps(1); // 生硬闪烁
}
@keyframes blink-smooth {50% {color: transparent;}
}

轮船背景图移动

<div class="panoramic">轮船过渡效果</div>

.panoramic {width: 100%;height: 100%;background: url(../../static/img/ship.jpg) no-repeat;background-size: auto 100%;text-indent: -200%;animation: panoramic 10s linear infinite alternate;animation-play-state: paused;
}
.panoramic:hover,
.panoramic:focus {animation-play-state: running;
}@keyframes panoramic {to {background-position: 100% 0;}
}

效果如图，鼠标移上去轮船滚动

沿环形路径移动的动画效果

<div class="path"><div class="avatar"><img src="../../static/img/chai.jpg"></div>
</div>

.path {width: 300px;height: 300px;border-radius: 50%;background: #F2AE43;padding: 10px;.avatar {width: 40px;height: 40px;border-radius: 50%;transform-origin: 50% 150px; /* 150px == 路径的半径 */background: tomato;display: inline-block;animation: spin 6s infinite linear;>img {width: 100%;height: 100%;border-radius: 50%;animation: inherit;animation-direction: reverse;}}
}@keyframes spin {to {transform: rotate(1turn);}
}

效果如图