FontAwesome 图标背景动画效果 HTML CSS 动画背景

FontAwesome 图标背景动画效果 HTML CSS 动画背景-荻酷网-源码插件下载-软件应用下载-编曲教程资源下载-CNDKK.com荻酷网
FontAwesome 图标背景动画效果 HTML CSS 动画背景
此内容为付费资源,请付费后查看
1
立即购买
您当前未登录!建议登陆后购买,可保存购买订单
如遇到下载链接失效或没有提取码等问题请反馈给管理员处理
付费资源
已售 1
公告:荻酷网每天不定时为大家更新各种实用技术教程、编曲资源,脚本源代码,插件,软件应用等资讯、绝大部分资源都经过亲测演示,下载荻酷网客户端、获取最新资源不迷路。 下载说明:如果是种子链接请下载专用工具进行下载,其它网盘链接可直接访问下载。

该代码是根据视频教程重写的。请点击下面的链接观看作者的视频,如果您喜欢此 CSS / HTML,请点赞

此代码可能与视频中的原始代码不准确。

image

视频演示:

ICONS 图标

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
*{
margin:0;
padding:0;
}
section{
position:relative;
width: 100%;
height:100vh;
background:#111;
display:flex;
flex-direction: column;
overflow:hidden;
}
section .row{
position:relative;
top:-50%;
width:100%;
display:flex;
padding: 10px 0;
white-space:nowrap;
font-size:64px; 
transform: rotate(-30deg);
}
i{
color: rgba(0,0,0,0.5);
transition:1%;
padding:0 5px;
user-select:none;
cursor:default;
}
i:hover{
transition:0%;
color:#0f0;
text-shadow: 0 0 120px #0f0;
}
section .row div {
animation: animate1 80s linear infinite;
animation-delay:-80s;
}
section .row div:nth-child(2) {
animation: animate2 80s linear infinite;
animation-delay:-40s;
}
@keyframes animate1 {
0% {
transform:translateX(100%);
}
100%{
transform: translateX(-100%);
}
}
@keyframes animate2 {
0% {
transform:translateX(0%);
}
100%{
transform: translateX(-200%);
}
}
-----

section .row:nth-child(even) div {
animation: animate3 80s linear infinite;
animation-delay:-80s;
}
section .row:nth-child(even) div:nth-child(2) {
animation: animate4 80s linear infinite;
animation-delay:-40s;
}
@keyframes animate3 {
0% {
transform:translateX(-100%);
}
100%{
transform: translateX(100%);
}
}
@keyframes animate4 {
0% {
transform:translateX(-200%);
}
100%{
transform: translateX(0%);
}
}

HTML/CSS

    温馨提示:本文最后更新于2024-05-24 01:31:08,某些文章具有时效性,若有错误或已失效,请在下方留言
    ©版权声明
    感谢您的阅读
    喜欢就支持一下吧
    点赞11赞赏 分享
    评论 共1条
    头像
    欢迎您留下宝贵的见解!
    提交
    头像

    昵称

    夸夸
    还有吗!没看够!
    取消
    昵称表情代码图片
      • admin的头像-荻酷网-源码插件下载-软件应用下载-编曲教程资源下载-CNDKK.com荻酷网admin徽章-创作大使-荻酷网-源码插件下载-软件应用下载-编曲教程资源下载-CNDKK.com荻酷网等级-LV2-荻酷网-源码插件下载-软件应用下载-编曲教程资源下载-CNDKK.com荻酷网作者0