这个是视频号上的效果，我们把源码放在博客文章里，因为比较少，所以就直接贴上了，如果代码比较多的话，我会直接提供下载地址供大家下载学习使用。
HTML代码：
<!DOCTYPE html><html><head><title>【视频号】02-CSS&HTML实现边框动画和图像悬停效果</title><link rel=”stylesheet” type=”text/css” href=”style.css”></head><body><div class=”container”><div class=”box”><div class=”content”><img src=”img.jpg”><h2>Someone Famous<br><span>UX/UI Designer</span></h2><a href=”http://www.webqdkf.com”>Hire me</a></div></div></div></body></html>
CSS代码：
@import url(‘https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900’);*{margin: 0;padding: 0;box-sizing: border-box;font-family: ‘Poppins’, sans-serif;}body{display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #0e1538;}.container{position: relative;width: 400px;height: 400px;}.box{position: relative;width: 100%;height: 100%;background: rgba(0,0,0,0.5);overflow: hidden;border-radius: 50%;display: flex;justify-content: center;align-items: center;}.box:before{content: ”;position: absolute;inset: -10px 140px;transition: 0.5s;background: linear-gradient(315deg,#00ccff,#d400d4);animation: animate 4s linear infinite}.box:hover:before{inset: -20px 0px;}@keyframes animate{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}.box:after{content: ”;position: absolute;inset : 6px;background: #0e1538;border-radius: 50%;z-index: 1;}.content{position: absolute;inset: 30px;background: #0e1538;border: 6px solid #070a1c;background-size: cover;z-index: 3;border-radius: 50%;display: flex;justify-content: center;align-items: center;flex-direction: column;overflow: hidden;}.content img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;transition: 0.5s;z-index: 3;pointer-events: none;}.box:hover .content img{opacity: 0;}h2{position: relative;z-index: 2;font-size: 1.25em;text-align: center;color: #fff;font-weight: 600;letter-spacing: 0.05em;line-height: 1.25em;text-transform: uppercase;}h2 span{font-weight: 300;font-size: 0.75em;}a{position: relative;margin-top: 10px;padding: 10px 20px;background: #fff;color: #070a1c;border-radius: 25px;font-weight: 500;text-transform: uppercase;letter-spacing: 0.05em;text-decoration: none;transition: 0.5s;}a:hover{letter-spacing: 0.2em;}
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
