最近期末比较忙，没有上CSDN，没有回大家私信【非常对不起】。

进阶版JavaScript下周更新。

今天先浅浅学习一下CSS样式。

1、body代码

<body><div class="text-box"><span class="text-name">CSDN</span><span class="text-by">@GUIDM</span></div>
</body>

创建一个div盒子，类名为text-box。

在div里放两个span

按F12查看

2、CSS样式

（1）所有元素清除内外边框

*{margin: 0;padding: 0;}

（2）设置背景色为黑

body{background-color: black;}

（3）设置div盒子

.text-box{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);color: #fff;text-align: center;}

（4）将span元素设置为块级元素

.text-box span{display: block;
}

（5）设置字体

上百度找Google字体找到自己喜欢的

<link href="https://fonts.googlefonts.cn/css?family=Ruslan+Display" rel="stylesheet">

（6）设置第一个span元素

因为要闪动所以要创建动画

.text-name{font-family: 'Ruslan Display', cursive;font-size: 100px;animation: text 3s infinite;
}@keyframes text {0% ,30%,32%,34%{color: #222;text-shadow:3px 0px 9px #222 ;}31%,32%,35%,100%{color: #ddde8b;text-shadow: 3px 0px 9px #ddde8b;  }}

（7）设置第二个span元素

.text-by{color: #ddde8b;text-shadow: 3px 0px 9px #ddde8b;}

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://fonts.googlefonts.cn/css?family=Ruslan+Display" rel="stylesheet"><title>Text</title><style>*{margin: 0;padding: 0;}body{background-color: black;}.text-box{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);color: #fff;text-align: center;}.text-box span{display: block;}.text-name{font-family: 'Ruslan Display', cursive;font-size: 100px;animation: text 3s infinite;}.text-by{color: #ddde8b;text-shadow: 3px 0px 9px #ddde8b;}@keyframes text {0% ,30%,32%,34%{color: #222;text-shadow:3px 0px 9px #222 ;}31%,32%,35%,100%{color: #ddde8b;text-shadow: 3px 0px 9px #ddde8b;  }}</style>
</head>
<body><div class="text-box"><span class="text-name">CSDN</span><span class="text-by">@GUIDM</span></div>
</body>
</html>

【跟着项目学CSS】第一期-闪动LOGO相关推荐

跟着项目学sql(二) 三大范式
序号表名说明 1 permission 权限表 2 user 用户表 3 menu 栏目表 4 news 新闻表 5 clicks 浏览信息表 ER图如下,并没有创建外键约束,因此本文中所有的外键 ...
跟着项目学设计模式(六):三层架构
前面用5个章节介绍了单例模式和工厂系列模式,这个过程中,如果算上网站开发人员的表示层,那么项目经历了二层到多层的演变: 数据访问层+表示层 => 数据访问层+业务逻辑层+Client层+表示层 ...
跟着项目学sql——查询语句优化(一)
现阶段,笔者的环境中只有SqlServer和Oracle.所以后面的文章更多的会以SqlServer的背景来做了. 来看这样一张表WorkLink: WorkLink表结构 WorkLink表数据,现 ...
CSDN博客第一期订阅专栏：跟“风云卫星”数据工程师学Python
在大伙的期盼中,CSDN博客第一期订阅专栏来啦!我们邀请了许向武老师,为大家分享的主题为:跟"风云卫星数据"工程师学Python. 作者简介许向武:擅长Python语言编程,有超 ...
狼山会项目库：第一期——个体创业者学习网络赚钱项目的基础必修课
很多创业者想在网络里赚到钱,而且是快速赚到钱,赚到大钱,赚到持久稳定的大钱. 但是,却懒得研究和学习什么是网络赚钱,网络赚钱. 这也就导致了,绝大部分创业者不要讲对世界,对人生,对商业,对创业的认知深 ...
GreatSQL项目捉虫活动（第一期）重磅来袭！
2022.10.10--2022.12.31 期间,报名参与社区项目捉虫活动,只要提交有效issue 或 PR,就能获得相应积分,兑换精美社区定制周边礼品,GreatSQL 社区期待您的参与! 报名方 ...
跟着开涛学SpringMVC 第一章源代码下载
2019独角兽企业重金招聘Python工程师标准>>> 源代码请到附件中下载. 其他下载: 跟着开涛学SpringMVC 第一章源代码下载第二章 Spring MVC入门源代码下 ...
手把手教你写android项目@第一期项目——身份证查询创新
序言这是我第一次尝试讲解一些项目,希望多多提出宝贵意见. 项目的一些说明: 1.第一期项目针对于一些初学者,恩自已安卓开发环境搭键什么的请巴友在论坛自己搜贴. 2.第一期项目讲的会比较细致一些,目前 ...
Datawhale团队第一期录取名单！
Datawhale 作者:Datawhale成员 Datawhale已经成立一年半了.Datawhale从一开始的12个人,学习互助,到提议建立开源组织,做更多开源的事情,帮助更多的学习者,也促进我们 ...

【跟着项目学CSS】第一期-闪动LOGO

1、body代码

2、CSS样式

（1）所有元素清除内外边框

（2）设置背景色为黑

（3）设置div盒子

（4）将span元素设置为块级元素

（5）设置字体

（6）设置第一个span元素

（7）设置第二个span元素

【跟着项目学CSS】第一期-闪动LOGO相关推荐

最新文章

热门文章