css3 - css如何实现素描描边效果
本文介绍了css3 - css如何实现素描描边效果的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
css如何实现这样的秒变效果呢
不用给这种复杂的图形描边，只要给一个div的border描边就行
当鼠标进入就给这个div的border加一个描边的效果，现在是直接的显示隐藏，感觉不好看。
求大神给一个demo或者方法，谢谢了先！
解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.linebox {
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: #e8e8e8;
}
.linebox-stroke > .line-t {
-webkit-animation: stroke .4s;
animation: stroke .4s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.linebox-stroke > .line-r {
-webkit-animation: stroke .3s;
animation: stroke .3s;
-webkit-animation-delay: .4s;
animation-delay: .4s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.linebox-stroke > .line-b {
-webkit-animation: stroke .4s;
animation: stroke .4s;
-webkit-animation-delay: .7s;
animation-delay: .7s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.linebox-stroke > .line-l {
-webkit-animation: stroke .3s;
animation: stroke .3s;
-webkit-animation-delay: 1.1s;
animation-delay: 1.1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.linebox-stroke-reverse > .line {
transform: scale(1, 1);
opacity: 1;
}
.linebox-stroke-reverse > .line-l {
-webkit-animation: stroke-reverse 0.3s;
animation: stroke-reverse 0.3s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.linebox-stroke-reverse > .line-b {
-webkit-animation: stroke-reverse 0.4s;
animation: stroke-reverse 0.4s;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.linebox-stroke-reverse > .line-r {
-webkit-animation: stroke-reverse 0.3s;
animation: stroke-reverse 0.3s;
-webkit-animation-delay: .7s;
animation-delay: .7s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.linebox-stroke-reverse > .line-t {
-webkit-animation: stroke-reverse 0.4s;
animation: stroke-reverse 0.4s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.line {
position: absolute;
background-color: red;
transform: scale(0, 0);
opacity: 0;
}
.line-t {
transform-origin: left;
width: 100%;
height: 1px;
top: 0;
left: 0;
}
.line-r {
height: 100%;
width: 1px;
top: 0;
right: 0;
transform-origin: top;
}
.line-b {
width: 100%;
height: 1px;
bottom: 0;
right: 0;
transform-origin: right;
}
.line-l {
height: 100%;
width: 1px;
bottom: 0;
left: 0;
transform-origin: bottom;
}
@keyframes stroke {
0% {
transform: scale(0, 0);
opacity: 0;
}
100% {
transform: scale(1, 1);
opacity: 1;
}
}
@keyframes stroke-reverse {
0% {
transform: scale(1, 1);
opacity: 1;
}
100% {
transform: scale(0, 0);
opacity: 0;
}
}
</style></head>
<body>
<div style="width:50%;height:400px;padding: 10px; position: relative; box-sizing: border-box; " >
<div class="linebox linebox-stroke-reverse">
<span class="line line-t"></span>
<span class="line line-r"></span>
<span class="line line-b"></span>
<span class="line line-l"></span>
</div></div>
<script>
window.onload=function(){
var oDiv=document.querySelector('.linebox');
oDiv.onmouseenter=function(){
this.className="linebox linebox-stroke"
}
oDiv.onmouseleave=function(){
this.className="linebox linebox-stroke-reverse"
}
}</script>
</body>
</html>
这篇关于css3 - css如何实现素描描边效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
