新手老shi的上课之旅（1）

最新推荐文章于 2024-07-16 16:07:08 发布
最新推荐文章于 2024-07-16 16:07:08 发布
阅读量215 收藏 3
点赞数 8
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44727080/article/details/108256549
版权

 

为了吸引你们的注意力，哈哈哈，找了一些比较炫酷的css实现的效果图，看了之后保证你超级好奇css是怎样实现的······

 

代码是这样的

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <style type="text/css">
      * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
html,
body {
  display: grid;
  height: 100%;
  place-items: center;
  background: #000;
}
.icons {
  display: inline-flex;
}

.icons a {
  margin: 0 25px;
  text-decoration: none;
  color: #fff;
  display: block;
  position: relative;
}

.icons a .layer {
  width: 55px;
  height: 55px;
  transition: transform 0.3s;
}

.icons a:hover .layer {
  transform: rotate(-35deg) skew(20deg);
}

.icons a .layer span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: 1px solid #fff;
  border-radius: 5px;
  transition: all 0.3s;
}

.icons a .layer span.fab {
  font-size: 30px;
  line-height: 55px;
  text-align: center;
}

.icons a:hover .layer span:nth-child(1) {
  opacity: 0.2;
}

.icons a:hover .layer span:nth-child(2) {
  opacity: 0.4;
  transform: translate(5px, -5px);
}

.icons a:hover .layer span:nth-child(3) {
  opacity: 0.6;
  transform: translate(10px, -10px);
}

.icons a:hover .layer span:nth-child(4) {
  opacity: 0.8;
  transform: translate(15px, -15px);
}

.icons a:hover .layer span:nth-child(5) {
  opacity: 1;
  transform: translate(20px, -20px);
}

.icons a:nth-child(1) .layer span,
.icons a:nth-child(1) .text {
  color: #4267b2;
  border-color: #4267b2;
}

.icons a:nth-child(2) .layer span,
.icons a:nth-child(2) .text {
  color: #1da1f2;
  border-color: #1da1f2;
}

.icons a:nth-child(3) .layer span,
.icons a:nth-child(3) .text {
  color: #e1306c;
  border-color: #e1306c;
}

.icons a:nth-child(4) .layer span,
.icons a:nth-child(4) .text {
  color: #2867b2;
  border-color: #2867b2;
}

.icons a:nth-child(5) .layer span,
.icons a:nth-child(5) .text {
  color: #ff0000;
  border-color: #ff0000;
}

.icons a:nth-child(1) .layer span {
  box-shadow: -1px 1px 3px #4267b2;
}

.icons a:nth-child(2) .layer span {
  box-shadow: -1px 1px 3px #1da1f2;
}

.icons a:nth-child(3) .layer span {
  box-shadow: -1px 1px 3px #e1306c;
}

.icons a:nth-child(4) .layer span {
  box-shadow: -1px 1px 3px #4267b2;
}

.icons a:nth-child(5) .layer span {
  box-shadow: -1px 1px 3px #ff0000;
}

.icons a .text {
  position: absolute;
  height: 30px;
  left: 50%;
  bottom: -5px;
  opacity: 0;
  transform: translate(-50%);
  transition: bottom 0.3s ease, opacity 0.3s ease;
}

.icons a:hover .text {
  bottom: -35px;
  opacity: 1;
}


    </style>
    <script
      src="https://kit.fontawesome.com/a076d05399.js"
      charset="utf-8"
    ></script>
  </head>
  <body>
    <div class="icons">
      <a href="#">
        <div class="layer">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span class="fab fa-facebook-f"></span>
        </div>
        <div class="text">Facebook</div>
      </a>
      <a href="#">
        <div class="layer">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span class="fab fa-twitter"></span>
        </div>
        <div class="text">Twitter</div>
      </a>
      <a href="#">
        <div class="layer">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span class="fab fa-instagram"></span>
        </div>
        <div class="text">Instagram</div>
      </a>
      <a href="#">
        <div class="layer">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span class="fab fa-linkedin-in"></span>
        </div>
        <div class="text">Linkedin</div>
      </a>
      <a href="#">
        <div class="layer">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span class="fab fa-youtube"></span>
        </div>
        <div class="text">YouTube</div>
      </a>
    </div>
  </body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #000;
  flex-direction: column; /* 使三个圆形垂直排列 */
  filter: contrast(30);
}

.drop {
  width: 100px;
  height: 100px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  filter: blur(20px);
  opacity: 0;
  animation: 2.5s drop linear infinite;
}

.drop:nth-child(2) {
  animation-delay: 0.5s;
}

.drop:nth-child(3) {
  animation-delay: 0.7s;
}

.collection {
  width: 100px;
  height: 100px;
  background-color: #fff;
  border-radius: 50%;
  filter: blur(20px);
  animation: 3s collection linear infinite;
}

span {
  position: absolute;
  font-family: Helvetica;
  font-size: 30px;
}

@keyframes drop {
  0% {
    transform: scale(0.7) translateY(-600%);
    opacity: 0;
  }
  50% {
    transform: scale(0.4) translateY(-80%);
    opacity: 1;
  }
  100% {
    transform: scale(0.3) translateY(0px);
  }
}

@keyframes collection {
  0% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.3) rotate(180deg);
    width: 90px;
    border-top-left-radius: 40%;
    border-bottom-left-radius: 45%;
  }
  100% {
    transform: scale(1) rotate(360deg);
  }
}

    </style>
  </head>
  <body>
    <div class="container">
      <div class="drop"></div>
      <div class="drop"></div>
      <div class="drop"></div>

      <!-- 用来装水的容器 -->
      <div class="collection"></div>
      <span>80%</span>
    </div>
  </body>
</html>

看完之后有没有觉得好简单呐

妍崽崽@
关注
  • 8
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
HTML+CSS实现按钮手风琴效果 ｜ 青训营笔记
ProgramNovice的博客
07-31 1290
HTML+CSS实现按钮手风琴效果 ｜ 青训营笔记 这是我参与「第四届青训营」笔记创作活动的的第7天，利用HTML+CSS实现按钮手风琴效果。
Font Awesome 5使用
马优晨
07-25 695
Font Awesome 5 的专业版有7842个图标。要使用免费的Font Awesome 5 图标，您可以选择下载Font Awesome库，或者在Font Awesome注册一个帐户，并获得一个代码（称为KIT CODE），以便在将Font Awesome添加到网页时使用。
动画菜单栏使用
mengs
01-25 617
动画菜单栏使用 教程地址：原文地址（YouTube） B站教程：原文转载（bilibili） 两个视频的内容相同，第二个为转载 效果图 代码区 以下代码为本人填写，转载请注明教程地址和本贴地址 html <div class="menu-bar"> <!-- 绑定id='button'事件，实现点击效果 --> <input type="...
弹性导航栏，导航栏滑动特效
IABQL的博客
09-16 480
效果展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://kit.fontawesome.com/a076d05399.js"></script> <style> .wrappe..
CSS 图标
m0_58514898的博客
06-09 294
如何添加图标 向 HTML 页面添加图标的最简单方法是使用图标库，比如 Font Awesome。 将指定的图标类的名称添加到任何行内 HTML 元素（如 <i> 或 <span>）。 下面的图标库中的所有图标都是可缩放矢量，可以使用 CSS进行自定义（大小、颜色、阴影等）。 实例 ...
MySQL见闻录 - 入门之旅
热门推荐
看，未来的博客
09-28 1万+
在网上翻来覆去找不到一套适合新手自学的书，于是买了课，急急忙忙上完了课，又发现全还给老师了。 这一系列文放在这里，从下载软件开始，记录一条MySQL入门之旅。 新手也可以跟着这条路走，一条道走到黑。 粉丝可见，愿者上钩。 有任何疑问，参考三篇上课笔记，或者私信我。 文章目录1、我的上课笔记2、软件下载选择3、示例数据库4、DOS界面用户登录方式5、取消语句6、数据库操作7、数据表操作8、往数据表中插入数据9、从表中检索数据10、sampdb数据库资料11、当前服务器下存储引擎12、各存储引擎特性13、如.
【小白的CFD之旅】04 任务
u010132497的博客
11-14 351
感谢胡坤老师的分享
新手学C语言之入门.pdf
11-16
新手学C语言之入门.pdf
新手的C语言学习之路记录.zip
10-18
新手的C语言学习之路记录.zip新手的C语言学习之路记录.zip新手的C语言学习之路记录.zip新手的C语言学习之路记录.zip新手的C语言学习之路记录.zip新手的C语言学习之路记录.zip新手的C语言学习之路记录.zip
小程序之新手填坑
03-29
2017.3.27日微信推送一则小程序消息, 文中表示小程序推出个人开发版, 这是才促使我去关注小程序, 于是当天说干就干, 马上申请开发者账号, 开通小程序开发者权限,开始了自己的踏坑之旅, 当然!!! 这仅仅是一个初识小...
软件测试新手的修炼之路
03-23
软件测试新手的修炼之路软件测试对于刚进入软件测试工作岗位的新人，如何快速、健康的在职业道路上成长，作者谈了几点自己看法：1、兴趣是最好的老师对于软件测试工作，通常是比较枯燥的，如果没有兴趣很难做到持久...
CSS实现的几款不错的菜单栏
逐梦小涛
02-06 1129
前言      自从做了智慧城市这个项目之后，我一个做后端的开发者，瞬间转为前端开发，不过我还是很喜欢前端的。前端那些事，其实蛮有意思的，HTML实现的是静态的，使用ajax之后就可以和数据库交互了，加上js和jQuery之后就动起来了，加上CSS之后就更加炫酷了。因为项目中需要，查资料和编写了一些炫酷的二级菜单，分享给大家，好东西就要分享嘛！ 一、滑动菜单 1、代码： 1 D
【学习css3】使用flex和grid实现等高元素布局
wenhui的博客
07-16 428
过往的实现方法是使用浮动加计算布局来实现，当flex和grid问世时，这一切将变得简单起来。二、每行放置3列，多出来的自动到下一行。1、还是先看页面效果。
前端 css3 媒体查询实现 响应式布局
阿乐的博客
07-16 704
前端媒体查询实现 响应式布局
数据分析的核心技能和方法
07-19
数据分析的核心技能和方法
毕业设计javajsp人寿保险销售网站(ssh)-qkrp源码含文档工具包
07-19
毕业设计javajsp人寿保险销售网站(ssh)-qkrp源码含文档工具包 后台是ssh框架，页面是jsp，数据库mysql，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 平湖人寿保险公司保险销售网站分为用户和管理员两个部分 前台部分（用户界面）： 1、资讯浏览功能： （1）新闻资讯浏览 （2）新闻资讯查询 （3）公司简介 （4）通知公告 2、用户登录注册功能： （1）注册 （2）登录 3、用户管理功能 （1）个人信息管理 （2）订单管理 4、保险购买功能： （1）保险产品浏览 （2）保险产品查询 （3）保险产品购买 后台管理（管理员界面） 1、管理员登录功能： 管理员在管理员登录界面输入用户名和密码，即可登录管理员的界面。 2、资讯管理功能： （1）新闻资讯管理 （2）公司简介管理 （3）通知公告管理 3、保险产品管理： （1）保险产品信息管理 （2）保险产品查询 4、会员管理： （1）会员删除 （2）会员级别管理 5、统计管理： （1）保险产品销售量统计 （2）有效会员数量统计 包含：源码、数据库脚本、论文、环境工具包、相同框架项目的安装教程
毕业设计javajsp公共课考试系统(ssh)-qlkrp源码工具包
最新发布
07-19
毕业设计javajsp公共课考试系统(ssh)-qlkrp源码工具包 后台是ssh框架，页面是jsp，数据库mysql，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 题库 试卷信息管理 阅卷 统计功能 包含：源码、数据库脚本、环境工具包、相同框架项目的安装教程（在说明文档中）
揭秘黑箱：YOLO预测结果的可解释性探究
07-19
YOLO（You Only Look Once）是一种流行的实时对象检测系统，最初由 Joseph Redmon 等人在 2015 年提出。它的核心思想是将对象检测任务视为一个回归问题，直接从图像像素到边界框坐标和类别概率的映射。YOLO 以其快速和高效而闻名，特别适合需要实时处理的应用场景。 以下是 YOLO 的一些关键特点： 1. **单次检测**：YOLO 模型在单次前向传播中同时预测多个对象的边界框和类别概率，不需要多次扫描图像。 2. **速度快**：YOLO 非常快速，能够在视频帧率下进行实时检测，适合移动设备和嵌入式系统。 3. **端到端训练**：YOLO 模型可以从原始图像直接训练到最终的检测结果，无需复杂的后处理步骤。 4. **易于集成**：YOLO 模型结构简单，易于与其他视觉任务（如图像分割、关键点检测等）结合使用。 5. **多尺度预测**：YOLO 可以通过多尺度预测来检测不同大小的对象，提高了检测的准确性。 YOLO 已经发展出多个版本，包括 YOLOv1、YOLOv2（也称为 YOLO9000）、YOLOv3、YOLOv4 和 YOLOv5 等。
Angular之旅：从新手到忍者
"Ninja Squad - Become A Ninja With Angular - 2019-05-29" 本书是一份关于Angular开发的详细指南，旨在帮助读者成为Angular开发的忍者。2019年5月29日发布了针对Angular 8.0的最新资源。书中不仅介绍了基本的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值