css动画淡入淡出

最新推荐文章于 2023-03-09 16:54:29 发布
最新推荐文章于 2023-03-09 16:54:29 发布
阅读量9.7k 收藏 5
点赞数
分类专栏： js 文章标签： css3 css3动画淡入淡出
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KungLun/article/details/85757093
版权

<!DOCTYPE html>

<html>

 

<head>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>动画《淡入淡出》</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" media="screen" href="main.css" />

<script src="main.js"></script>

<style type="text/css">

.word {

font-size: 20px;

text-align: center;

}


 

@keyframes fadeInOut1 {

0% {

opacity: 1;

}

25% {

opacity: 0;

}

50% {

opacity: 1;

}

75% {

opacity: 0;

}

}

 

@-moz-keyframes fadeInOut1

/* Firefox */

 

{

0% {

opacity: 1;

}

25% {

opacity: 0;

}

50% {

opacity: 1;

}

75% {

opacity: 0;

}

}

 

@-webkit-keyframes fadeInOut1

/* Safari 和 Chrome */

 

{

0% {

opacity: 1;

}

25% {

opacity: 0;

}

50% {

opacity: 1;

}

75% {

opacity: 0;

}

}

 

@-o-keyframes fadeInOut1

/* Opera */

 

{

0% {

opacity: 1;

}

25% {

opacity: 0;

}

50% {

opacity: 1;

}

75% {

opacity: 0;

}

}

 

@keyframes fadeInOut2 {

0% {

opacity: 0;

}

25% {

opacity: 1;

}

50% {

opacity: 0;

}

75% {

opacity: 1;

}

}

 

@-moz-keyframes fadeInOut2

/* Firefox */

{

0% {

opacity: 0;

}

25% {

opacity: 1;

}

50% {

opacity: 0;

}

75% {

opacity: 1;

}

}

 

@-webkit-keyframes fadeInOut2

/* Safari 和 Chrome */

 

{

0% {

opacity: 0;

}

25% {

opacity: 1;

}

50% {

opacity: 0;

}

75% {

opacity: 1;

}

}

 

@-o-keyframes fadeInOut2

/* Opera */

 

{

0% {

opacity: 0;

}

25% {

opacity: 1;

}

50% {

opacity: 0;

}

75% {

opacity: 1;

}

}

 

.transone {

animation: fadeInOut1 2s ease-in-out infinite reverse;

/* Firefox: */

-moz-animation: fadeInOut1 2s ease-in-out infinite reverse;

/* Safari 和 Chrome: */

-webkit-animation: fadeInOut1 2s ease-in-out infinite reverse;

/* Opera: */

-o-animation: fadeInOut1 2s ease-in-out infinite reverse;

}

 

.transtwo {

animation: fadeInOut2 2s ease-in-out infinite reverse;

/* Firefox: */

-moz-animation: fadeInOut2 2s ease-in-out infinite reverse;

/* Safari 和 Chrome: */

-webkit-animation: fadeInOut2 2s ease-in-out infinite reverse;

/* Opera: */

-o-animation: fadeInOut2 2s ease-in-out infinite reverse;

}

</style>

</head>

 

<body>

<div class="word">进入

<span class="transone">></span>

<span class="transtwo">></span>

</div>

</body>

 

</html>

 

 

 

火星第一帅
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5+css3文字动画渐隐渐显显示
02-06
html5+css3文字动画渐隐渐显显示
CSS3淡入淡出动画的非圆角Tab选项卡.rar
07-10
CSS3 jQuery共同打造的一款个性的Tab选项卡效果，切换时带淡入淡出动画效果，TAB的形状不是常规的矩形，也不是圆角，更像是菱形的，一看就与从不同的感觉，HTML5/CSS3 JQUERY三者共同结合来实现，效果超棒。
利用CSS3制作淡入淡出动画效果
weixin_33912246的博客
06-14 1066
  CSS3新增动画属性“@-webkit-keyframes”，从字面就可以看出其含义——关键帧，这与Flash中的含义一致。 利用CSS3制作动画效果其原理与Flash一样，我们需要定义关键帧处的状态效果，由CSS3来驱动产生动画效果。 下面讲解一下如何利用CSS3制作淡入淡出的动画效果。具体实例可参考刚进入本站时的淡入效果。 1. 定义动画，名称为fadeIn @-webkit...
css: css3动画（淡入淡出）
qq_36413371的博客
04-13 1万+
@keyframes 规则用于创建动画，并且必须 把它捆绑到某个选择器，否则不会产生动画效果。 您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。（动画的名称和时长这两个属性是动画必要的） /*定义动画*/ @keyframes myfirst { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } /*使用动画：将动画..
css动画效果代码淡入淡出折叠展开点击悬浮
qq_27161847的博客
03-09 1675
css动画效果代码淡入淡出折叠展开点击悬浮
用css动画实现图片淡入淡出轮播
paradoxaaa_的博客
04-10 2988
html部分 <div id="silder-box"> <div class="silder-img"> <ul> <li><img src="Res/header-01.jpg" ></li> <li><img src="Res/header-02.jpg" ></li> <li><img src="Res/header-03.jpg" >
HTML+CSS实现淡入淡出动画 ：animation-name
debugtoday的博客
02-25 7867
HTML+CSS实现淡入淡出动画 ：animation-name
css淡入淡出效果
热门推荐
夏已微凉、
02-01 1万+
一、效果二、代码 一、效果 二、代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css淡入淡出效果</title> <style> .fadenum1{ background-color: green; width: 150px; height: 150px; animation:fadenum12 5s 1; } @ke.
css背景色闪烁
TarkuNi的博客
07-03 2380
直接先看效果 1.做两个重叠的圆 <div> <div class="box"></div> <div class="box2 ">小马闪起来~</div> </div> 2.样式 @keyframes fade { from { opacity: 1.0; } 50% { opacity: 0.0; } to { ...
jQuery/CSS3淡入淡出下拉菜单
04-16
解压密码：RJ4587 今天我们要来分享一款非常简单的jQuery/CSS3下拉菜单，这款菜单一共有两级子菜单，在子菜单展开的时候伴有淡入淡出的动画效果，菜单的背景是黑色的，显得比较庄重和大气。另外，如果能将菜单配置成...
CSS3动画相册 图片淡入淡出动画效果
01-03
这是一款基于CSS3的动画相册，这样的相册我们之前也分享过不少，比如HTML5 3D立体...今天的这款CSS3相册相对比较实用，当鼠标划过缩略图时，原图片即会以淡入淡出的动画效果展现出来，大家可以将它应用在自己的网站上。
css文本底部淡入淡出效果.zip
07-03
css文本底部淡入淡出效果
HTML5 CSS3 淡入淡出动画效果的Tab菜单特效.rar
07-10
HTML5 CSS3 淡入淡出动画效果的Tab菜单特效，圆角风格，同样带有渐变动画效果，整体风格我觉得相当的漂亮，来自国外CSS3达人网站的作品，代码简洁，TAB效果如示例截图所示。
h5轮播图 自动轮播
KungLun的博客
06-15 6929
<!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...
input值变动自动触发事件
KungLun的博客
03-28 5918
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>自动改变颜色</title> <meta name="vie...
react滚动条开发 适配PC 和 移动端的滚动 显示隐藏header和footer/滚动显隐公用组件
KungLun的博客
09-28 3065
功能描述： 移动端时，上滚则显示footer,下滚则隐藏footer PC端时，上滚则显示header,下滚则隐藏header。   xx.js import React, { Component } from 'react'; import { BrowserRouter as Router, withRouter, } from 'react-router-dom';   ...
文字向上循环轮播滚动
KungLun的博客
10-29 2880
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt;   &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; * { margin: 0; padding: 0; }  
web H5 首页引导图
KungLun的博客
06-10 1771
向左滑动切换，最后一张图点击进入，进入首页 <!-- <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=354250238,3380034834&fm=15&gp=0.jpg" alt=""> --> <!DOCTYPE html> <htm...
css淡入淡出动画效果
最新发布
09-12
要创建CSS淡入淡出动画效果，可以使用CSS的`@keyframes`规则和`opacity`属性。以下是一个示例： ```css .fade-in-out { animation: fade 2s infinite; } @keyframes fade { 0% { opacity: 0; } 50% { ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值