css3鼠标滑过实现动画线条边框

紫荆花kk · 发表于 2023-5-11 21:08:01

前言

现如今网页越来越趋近于动画，相信大家平时浏览网页或多或少都能看到一些动画效果，今天我们做一个通过 <strong>css3</strong> 鼠标滑过实现动画线条边框，下面一起看看吧。

复制代码

实现效果

CSS3实现的鼠标滑过边框线条动画特效源码

完整源码

<template>
<div class="parentBox">
<div class="contantBox">
<ul class="shelfBox">
<li>
<div class="bigBox">
<div class="itemBox">
<div class="textBox">
<p>1.无需下载安装包</p>
<p>2.可多人同时编辑</p>
<p>3.无需下载安装包</p>
<p>4.可实时预览内容</p>
</div>
<div class="beginbox"></div>
<div class="bomBox"></div>
<div class="leftBox"></div>
<div class="topBox"></div>
<div class="rightBox"></div>
<div class="pictureBox"><i class="circleBox"></i></div>
</div>
<div class="iconBox">
<div class="circleBox">+</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</template>
<style scoped>
.parentBox {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline
}
ol,
ul {
list-style: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
caption,
td,
th {
text-align: left;
font-weight: 400;
vertical-align: middle
}
.bigBox img {
border: none
}
.bigBox {
text-decoration: none
}
.bigBox:hover {
cursor: pointer;
}
img {
max-width: 100%;
vertical-align: middle
}
.shelfBox:after,
.shelfBox:before {
content: " ";
display: table
}
.shelfBox:after {
clear: both
}
.contantBox {
position: relative;
background-color: #fff;
zoom: 1
}
.contantBox ul {
position: absolute;
left: 0;
top: 0;
width: 1218px;
height: 432px;
padding-top: 5px;
transition: left .8s ease-in-out
}
.contantBox li {
float: left;
width: 406px;
height: 216px
}
.contantBox li .bigBox {
position: relative;
display: block;
width: 100%;
height: 216px;
padding: 10px 0 0 92px;
zoom: 1
}
.contantBox .itemBox {
position: relative;
width: 274px;
height: 186px;
padding: 20px 0 0 60px;
background: url('https://hovertree.com/texiao/css3/32/images/hovertree10tanjpxxxxblxpxxxxxxxxxx-274-186.png') 0 0 no-repeat;
color: #00a0ff;
zoom: 1
}
.textBox {
color: #666;
}
.textBox p{
margin: 14px 10px;
}
.contantBox .beginbox {
position: absolute;
bottom: -2px;
right: -2px;
width: 34px;
height: 10px;
background-color: #fff
}
.contantBox .bomBox {
position: absolute;
left: -2px;
bottom: -2px;
width: 295px;
height: 15px;
background-color: #fff
}
.contantBox .leftBox {
position: absolute;
left: -2px;
top: -2px;
width: 15px;
height: 189px;
background-color: #fff
}
.contantBox .topBox {
position: absolute;
right: -2px;
top: -2px;
width: 295px;
height: 15px;
background-color: #fff
}
.contantBox .rightBox {
position: absolute;
right: -2px;
bottom: -2px;
width: 15px;
height: 189px;
background-color: #fff
}
.contantBox .iconBox {
position: absolute;
left: 53px;
top: 35px;
width: 100px;
height: 110px;
padding-top: 12px;
background-color: #fff;
z-index: 11
}
.contantBox .iconBox .circleBox {
width: 80px;
height: 80px;
line-height: 80px;
background: url('https://hovertree.com/texiao/css3/32/images/hovertree1.fjxivxxxxbqxvxxxxxxxxxx-80-80.png') 0 0 no-repeat;
text-align: center;
color: #359EFB;
font-size: 28px;
}
.contantBox .iconBox .iconfont {
font-size: 32px;
color: #00a0ff
}
.contantBox .pictureBox {
position: absolute;
right: -8px;
bottom: -3px;
width: 0;
height: 16px;
background-color: #fff;
overflow: hidden
}
.contantBox .pictureBox .circleBox {
float: right;
width: 17px;
height: 16px;
background: url('https://hovertree.com/texiao/css3/32/images/hovertree15pjohvxxxxcaxpxxxxxxxxxx-16-16.png') 0 0 no-repeat
}
.contantBox .bigBox:hover .textBox {
color: #00a0ff
}
.contantBox .bigBox:hover .bomBox {
animation: borderslideBottom .15s linear 0s 1;
animation-fill-mode: forwards
}
.contantBox .bigBox:hover .leftBox {
animation: bordersildeLeft .2s linear .15s 1;
animation-fill-mode: forwards
}
.contantBox .bigBox:hover .topBox {
animation: bordersildeTop .15s linear .35s 1;
animation-fill-mode: forwards
}
.contantBox .bigBox:hover .rightBox {
animation: bordersildeRight .2s linear .5s 1;
animation-fill-mode: forwards
}
.contantBox .bigBox:hover .pictureBox {
animation: bordersildeEnd .1s linear .7s 1;
animation-fill-mode: forwards
}
@-moz-keyframes borderslideBottom {
from {
width: 295px
}
to {
width: 0
}
}
@-webkit-keyframes borderslideBottom {
from {
width: 295px
}
to {
width: 0
}
}
@keyframes borderslideBottom {
from {
width: 295px
}
to {
width: 0
}
}
@-moz-keyframes bordersildeLeft {
from {
height: 189px
}
to {
height: 0
}
}
@-webkit-keyframes bordersildeLeft {
from {
height: 189px
}
to {
height: 0
}
}
@keyframes bordersildeLeft {
from {
height: 189px
}
to {
height: 0
}
}
@-moz-keyframes bordersildeTop {
from {
width: 295px
}
to {
width: 0
}
}
@-webkit-keyframes bordersildeTop {
from {
width: 295px
}
to {
width: 0
}
}
@keyframes bordersildeTop {
from {
width: 295px
}
to {
width: 0
}
}
@-moz-keyframes bordersildeRight {
from {
height: 189px
}
to {
height: 0
}
}
@-webkit-keyframes bordersildeRight {
from {
height: 189px
}
to {
height: 0
}
}
@keyframes bordersildeRight {
from {
height: 189px
}
to {
height: 0
}
}
@-moz-keyframes bordersildeEnd {
from {
width: 0
}
to {
width: 34px
}
}
@-webkit-keyframes bordersildeEnd {
from {
width: 0
}
to {
width: 34px
}
}
@keyframes bordersildeEnd {
from {
width: 0
}
to {
width: 34px
}
}
</style>

复制代码

到此这篇关于css3鼠标滑过实现动画线条边框的文章就介绍到这了,更多相关css3动画线条边框内容请搜索晓枫资讯以前的文章或继续浏览下面的相关文章，希望大家以后多多支持晓枫资讯！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

管暄美 · 发表于 2023-5-19 07:21:33

谢谢分享~~~~~

xcsuzpgdbl · 发表于 2023-8-7 18:56:55

感谢楼主分享～～～～～

岳兄弟散养家鸡 · 发表于 2024-8-20 12:14:44

顶顶更健康！！！

应芮澜 · 发表于 2024-12-7 01:44:08

路过，支持一下

别梦2017 · 发表于 2025-1-6 04:34:20

感谢楼主，顶。

上帝的橘子偬 · 发表于 2025-3-17 05:16:36

感谢楼主分享。

		自动登录	找回密码
密码			立即注册