当前位置: 开发笔记 > 编程语言 > 正文

会呼吸的图片，文字闪烁发光。也可用于博客美化

作者：_快樂Smile_903 | 来源：互联网 | 2023-09-06 09:37

最近浏览一些培训学校的网站，想找一些视频或者资料充充电。偶尔看到了，这张效果图。PS：看下面的效果展示因为本人前端比较小白，所以就运用了大家都会的F12解决了一下问题（手动滑稽）！最后

最近浏览一些培训学校的网站，想找一些视频或者资料充充电。偶尔看到了，这张效果图。PS：看下面的效果展示

　　因为本人前端比较小白，所以就运用了大家都会的F12解决了一下问题（手动滑稽）！

　　最后查了一下，是用到了Css3 @keyframes规则造成的简单的动画效果。所以就扒了下来，自己记录一下，方便自己以后拿来主义嘛～

一. HTML页面　

 1 <body>
 2 <div class="box4">
 3     <div class="box_In">
 4         <div class="b" id="box5">
 5             <div class="small_hd wow slideInDown">
 6                 <p>二、不断添加的新/热技术点p>
 7             div>
 8             <div class="con">
 9                 <div class="b_con">
10                     <p>这里有超多的技术点，<br />密密麻麻的，<br />一闪一  闪，<br />亮晶晶。p>
11                 div>
12                 <img class="b2" src="image/box4_b2.png"/>
13                 <img class="b3" src="image/box4_b3.png"/>
14                 <img class="b4" src="image/box4_b4.png"/>
15                 <img class="b5" src="image/box4_b5.png"/>
16             div>
17         div>
18     div>
19 div>
20 body>

View Code

二. CSS代码

 1 body{background: #140026;}
 2 .box_In{width: 1200px;margin: 0 auto;position: relative;}
 3 
 4 /*box4*/
 5 .box4 .small_hd{background: url(../images/box4_s1.jpg) no-repeat center; width: 945px;height: 35px;margin: 0 auto;line-height: 26px;}
 6 .box4 .small_hd p{font-size: 24px;color: #fff;text-align: center;letter-spacing:5px;}
 7 
 8 .box4 .b{padding-bottom: 80px;}
 9 .box4 .b .small_hd{background: url(../images/box4_s2.jpg) no-repeat center; width: 967px;}
10 .box4 .b .con{width: 1157px;height: 539px;position: relative;margin: 50px auto 0;overflow: hidden;}
11 .box4 .b .b_con{background: url(../image/box4_b1.png) no-repeat center;width: 322px;height: 323px;margin:80px auto 0;}
12 .box4 .b .b_con p{font-size: 20px;color: #fff;text-align: center;padding-top: 80px;line-height: 32px;}
13 .box4 .b .con img{position: absolute;top: 0;left: 0;}
14 .box4 .b .con .b2{animation:bing2 5s  infinite;-webkit-animation:bing2 5.5s  infinite;-moz-animation:bing2 5.5s infinite;-o-animation:bing2 5.5s  infinite;}
15 .box4 .b .con .b3{animation:bing2 3s  infinite;-webkit-animation:bing2 3s  infinite;-moz-animation:bing2 3s infinite;-o-animation:bing2 3s infinite;}
16 .box4 .b .con .b4{animation:bing1 4s  infinite;-webkit-animation:bing1 4s  infinite;-moz-animation:bing1 4s infinite;-o-animation:bing1 4s  infinite;}
17 .box4 .b .con .b5{animation:bing3 2s  infinite;-webkit-animation:bing3 2.5s  infinite;-moz-animation:bing3 2.5s infinite;-o-animation:bing3 2.5s  infinite;}
18 
19 @keyframes bing2
20 { 0%{opacity: .1;}   50%{opacity: 1;}  100%{opacity: .1;}}
21 @-moz-keyframes bing2
22 { 0%{opacity: .1;}   50%{opacity: 1;}  100%{opacity: .1;}}
23 @-webkit-keyframes bing2
24 { 0%{opacity: .1;}   50%{opacity: 1;}  100%{opacity: .1;}}
25 @-o-keyframes bing2
26 { 0%{opacity: .1;}   50%{opacity: 1;}  100%{opacity: .1;}}
27 
28 @keyframes bing3
29 { 0%{opacity: .5;}   50%{opacity: 1;}  100%{opacity: .5;}}
30 @-moz-keyframes bing1
31 { 0%{opacity: .5;}   50%{opacity: 1;}  100%{opacity: .5;}}
32 @-webkit-keyframes bing1
33 { 0%{opacity: .5;}   50%{opacity: 1;}  100%{opacity: .5;}}
34 @-o-keyframes bing1
35 { 0%{opacity: .5;}   50%{opacity: 1;}  100%{opacity: .5;}}

View Code

三. 用到image

四. 效果展示

好啦！这就是做出这个效果图所要用的全部东西啦。刚开始以为是很高大上的东东。以为是啥新技术呢，没想到。。。

　　不过，没事啦！默默告诉自己，不要怕，你是个后端开发工程师。没见过，但不要怂，就当学习新知识啦！哈哈哈～～～

有需要的小伙伴请直接享用吧！不用客气～

推荐阅读

ip
Android开发笔记：使用Picasso加载网络图片等比例缩放

在Android开发中，使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法，并提供了具体的代码实现。通过获取图片的宽高，计算目标宽度和高度，并创建新图实现等比例缩放。 ... [详细]

蜡笔小新 2023-12-14 17:34:00
ip
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
python
python画图模糊_解决canvas画图模糊的问题

canvas画图经常发现他是模糊的。解决这个问题主要从两个方面下手。改变canvas渲染的像素情况：画1像素的线条看起来模糊不清，好像更宽的样子。解决方 ... [详细]

蜡笔小新 2023-10-14 13:22:21
controller
后台获取视图对应的字符串

1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注：不会执行对应的ac ... [详细]

蜡笔小新 2023-12-13 18:03:01
controller
sklearn数据集库中的常用数据集类型介绍

本文介绍了sklearn数据集库中常用的数据集类型，包括玩具数据集和样本生成器。其中详细介绍了波士顿房价数据集，包含了波士顿506处房屋的13种不同特征以及房屋价格，适用于回归任务。 ... [详细]

蜡笔小新 2023-12-13 17:45:15
spring
Spring源码解密之默认标签的解析方式分析

本文分析了Spring源码解密中默认标签的解析方式。通过对命名空间的判断，区分默认命名空间和自定义命名空间，并采用不同的解析方式。其中，bean标签的解析最为复杂和重要。 ... [详细]

蜡笔小新 2023-12-14 17:24:50
python
向QTextEdit拖放文件的方法及实现步骤

本文介绍了在使用QTextEdit时如何实现拖放文件的功能，包括相关的方法和实现步骤。通过重写dragEnterEvent和dropEvent函数，并结合QMimeData和QUrl等类，可以轻松实现向QTextEdit拖放文件的功能。详细的代码实现和说明可以参考本文提供的示例代码。 ... [详细]

蜡笔小新 2023-12-14 16:06:38
settings
单击后为什么远程通知操作无效？ - Why remote notification action is doing nothing after clicking?

IhaveconfiguredanactionforaremotenotificationwhenitarrivestomyiOsapp.Iwanttwodiff ... [详细]

蜡笔小新 2023-12-14 15:57:44
jsp
HDU 2372 El Dorado（DP）的最长上升子序列长度求解方法

本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法，通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]

蜡笔小新 2023-12-14 15:08:18
jsp
C#之数据集：DataSet对象的使用及相关方法详解

本文介绍了C#中数据集DataSet对象的使用及相关方法详解，包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成，以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读，读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]

蜡笔小新 2023-12-14 12:09:13
jsp
OC学习笔记之@property和@synthesize

本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]

蜡笔小新 2023-12-14 12:05:06
jsp
知识图谱——机器大脑中的知识库

本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]

蜡笔小新 2023-12-14 10:06:19
client
Web学习历程记录（七）——Tomcat基本概念和配置

本文介绍了Web学习历程记录中关于Tomcat的基本概念和配置。首先解释了Web静态Web资源和动态Web资源的概念，以及C/S架构和B/S架构的区别。然后介绍了常见的Web服务器，包括Weblogic、WebSphere和Tomcat。接着详细讲解了Tomcat的虚拟主机、web应用和虚拟路径映射的概念和配置过程。最后简要介绍了http协议的作用。本文内容详实，适合初学者了解Tomcat的基础知识。 ... [详细]

蜡笔小新 2023-12-13 17:08:24
jsp
高质量SQL书写的30条建议

本文提供了30条关于优化SQL的建议，包括避免使用select *，使用具体字段，以及使用limit 1等。这些建议是基于实际开发经验总结出来的，旨在帮助读者优化SQL查询。 ... [详细]

蜡笔小新 2023-12-13 13:24:33
jsp
为什么三角形与菜单背景的颜色不同？ - Why is the triangle a different colour shade to the menu background?

Imnotunderstandingastowhythetrianglewhichappearswhenthemousehoversoverthemenuitem, ... [详细]

蜡笔小新 2023-10-16 11:26:13

_快樂Smile_903

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章