CSS倾斜边框|创意框边框悬停效果

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）

两个视频的内容相同，第二个为转载

效果图

代码区

以下代码为本人填写，转载请注明教程地址和本贴地址

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>创意边框</title><link rel="stylesheet" href="css/style.css">
</head>
<body><div class="container"><div class="box"><div class="content"><h2>01</h2><h3>夜之城</h3><p>“惊魂”们的表现越来越狂暴：大街上充满了瘾君子们——他们为一种刚刚出现的娱乐项目所沉迷：“脑舞”。脑舞十分廉价，却可以让人体验到其他人的生活和他们的情绪，尤其是当其他人的生活比自己的更加丰富多彩时，这种刺激是无与伦比的。</p><a href="#">Read More</a></div></div><div class="box"><div class="content"><h2>02</h2><h3>脑舞</h3><p>说白了，脑舞是一种个人经历所制作的电子专辑。观看者可以通过一种叫做“BD播放器（BD Player）”的特殊大脑扩充器直接将这些电子专辑中的数据输入自己的神经系统，脑舞让观看者可以同时感受记录者脑中的所有感受，包括情绪、肌肉动作、感知等等。</p><a href="#">Read More</a></div></div><div class="box"><div class="content"><h2>03</h2><h3>游戏设定</h3><p>制作组承诺游戏将真实地忠于“赛博朋克”风格。玩家将进入2077年的黑暗未来——那是一个先进技术既成为人类的救星、也是加以人类身上的诅咒的世界。本作面向成人玩家打造，采用了多线程、非线性式剧情，围绕着一个超级大都市“夜之城”（Night City）及其周边展开。</p><a href="#">Read More</a></div></div><div class="box"><div class="content"><h2>04</h2><h3>游戏特色</h3><p>1. 第一人称RPG沙盘游戏;2. 想去哪里都可以去;3. 为成年玩家打造的野心RPG;4. 发生在2077年的腐败和高科技世界;5. 多线故事;6. 细腻的夜之城景色;7 高级RPG机制;8 RPG机制基于“笔和纸系统”;9. 大量武器、升级、植入物和高科技小装备;10. 采用的新装备反映了人类50年的发展过程;</p><a href="#">Read More</a></div></div></div>
</body>
</html>

CSS

body{margin:0; /*外边距*/padding: 0; /*内边距*/display: flex; /*盒模型*/flex-wrap: wrap; /*允许换行*/justify-content: center; /*横轴*/align-items: center; /*纵轴*/min-height: 100vh; /*最小高度*/background: #060c21; /*背景颜色*/font-family: sans-serif; /*字体*/
}
.container{position: relative; /*相对定位*/width: 90%; /*宽度*/display: grid; /*样式：网格*/grid-template-rows: auto; /*网格块行数*/grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); /*表格块列数（自动换行(所占大小，    minmax(最小值，最大值(区间))     )）*//*相关连接   https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-template-columns*/grid-gap: 0 40px; /*间距:上下0 左右40*/
}
.container .box{ /*容器内 盒*/position:relative;height: 400px;background-color: #060c21;display: flex;justify-content: center;align-items: center;border: 1px solid #000;
}
.container .box::after{ /*之后添加*/content: ""; /*添加内容*/position: absolute; /*绝对定位*/top:0px;left: 50%;width: 50%;height: 100%;background: rgba(255, 255, 255, 0.05);
}
.container .box:before{ /*之前*/content: "";position: absolute;top:-2px;left: -2px;right: -2px;bottom: -2px;background:#fff;transform: skew(2deg,2deg); /*扭曲*/z-index: -1; /**/
}
.container .box:nth-child(2n+1)::before{ /*之后添加*/background: linear-gradient(315deg,#f1c40f,#e64a19); /*渐变*/
}
.container .box:nth-child(2n+2)::before{ /**/background: linear-gradient(315deg,#16a085,#3498db);
}
.content{ /*盒内-内容*/position:relative;margin: 20px;
}
.box .content h2{ /*背景标题(01,02,03,04)*/position: absolute; top:-60px;right: 20px;margin: 0;padding: 0;font-size: 10em;color: rgba(255, 255, 255, 0.1);transition:0.5s;user-select: none; /*设置为不可选取*/
}
.box:hover .content h2{ /*悬停后，进行移动*/top:-140px;
}
.box .content h3{ /**/margin: 0 0 10px;padding: 0;font-size: 24px;font-weight: 500;color:#fff;opacity: 0.7; /*透明度*/transition: 0.5s;
}
.box:hover .content h3{ /*悬停后，进行透明度变化*/opacity: 1;font-size: 30px;
}
.box .content p{ /*盒内-内容主文字*/margin: 0;padding: 0;color: #fff;font-size: 16px;transition: 0.5s;opacity: 0.5;
}
.box:hover .content p{ /*修改悬停后P的透明度*/opacity: 1;
}
.box .content a{ /*按钮*/display: inline-block; /*行内块元素*/position: relative;margin: 20 0 0;padding: 10px 20px;text-decoration: none; /*清除字体样式*/border: 1px solid #fff;color: #fff;transition: 0.5s;transform: translateY(-40px); /*移动*/opacity: 0;visibility: hidden; /*隐藏*/font-size: 16px;user-select: none; /*不可选取*/
}
.box:hover .content a{ /*悬停后 按钮进行的变化*/transform: translateY(0px);opacity: 1;visibility: visible;
}
.content a:hover{ /*鼠标到指向按钮，按钮的变化*/background: #fff;color:#000;
}

JS

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）

CSS倾斜边框|创意框边框悬停效果相关推荐

JS配合css实现slide文字框缩放伸展效果
<!DOCTYPE html> <html> <head> <meta http-equiv="content" content=&quo ...
html在边框线中加文本框,怎么设置幻灯片里的文本框边框线？
通过设置文本框格式来实现选中刚刚插入的文本框,右键,选择"设置自选图形/图片格式": 在文本框格式中的颜色与线条界面中,将线条的颜色改为无颜色,然后点击保存. 可以用border ...
CSS 导航栏选中框背景高亮显示
CSS 导航栏选中框背景高亮显示效果显示以下为实现代码代码片. <!DOCTYPE html> <html lang="en"> <head&g ...
三种方法实现弹出框边框半透明和圆角的效果
发现支付宝的一个充值抽红包的系统里面有个弹出对话框,边框半透明效果,就想着自己做一个弹出对话框效果, 用三种方法实现弹出框边框半透明和圆角的效果 1.用rgba来实现背景半透明,设置内边距 2.设置b ...
css合并两个文本框,css实现input文本框的双边框美化
css实现input文本框的双边框美化 .input_div{width:250px; height:22px; border-style:solid; border-width:1px 0 1px ...
html表格输入框怎么左移动,当我向CSS中的文本框添加边框时，HTML表单输入会移动...
我想在登录表单上的输入字段中添加边框,但是当我添加边框时:1px纯黑色;到#登录表单输入,然后所有的文本框移出位置.当我向CSS中的文本框添加边框时,HTML表单输入会移动当用户输入不正确的凭据到表 ...
css的img移上去边框效果及CSS透明度
css的img移上去边框效果: .v_comment img{ height:36px; height:36px; float:left; padding:1px; margin:2px; borde ...
你没有见过的6个创意CSS链接悬停效果
创建 CSS 链接悬停效果可以为原本平淡无奇的网页添加一些风格.如果您曾经发现自己在尝试制作流畅的悬停效果时遇到了困难,那么我有六个 CSS 效果供您采用并用于您的下一个项目. 滑动高亮链接悬停效果 ...
html文本框边框变色,怎么使用CSS设置文本框的边框
如何使用CSS设置文本框的边框: 默认的文本框边框一般是不会满足实际的需求,所以需要人为的对边框进行设置,下面就来介绍一下如何设置文本框的边框. 代码实例: 蚂蚁部落 .mytest{ border: ...

CSS倾斜边框|创意框边框悬停效果

CSS倾斜边框|创意框边框悬停效果

效果图

代码区

html

CSS

JS

CSS倾斜边框|创意框边框悬停效果相关推荐

最新文章

热门文章