css3动画 -渐隐渐现

最新推荐文章于 2024-07-02 16:04:46 发布
最新推荐文章于 2024-07-02 16:04:46 发布
阅读量1w 收藏 3
点赞数
分类专栏： css3

 

测试

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .anim-opacity2{animation: 2s opacity2 0s infinite; -webkit-animation: 2s opacity2 0s infinite;-moz-animation: 2s opacity2 0s infinite;}
        @keyframes opacity2{
            0%{opacity:0}
            50%{opacity:.8;}
            100%{opacity:0;}
        }
        @-webkit-keyframes opacity2{
            0%{opacity:0}
            50%{opacity:.8;}
            100%{opacity:0;}
        }
        @-moz-keyframes opacity2{
            0%{opacity:0}
            50%{opacity:.8;}
            100%{opacity:0;}
        }
    </style>
</head>
<body>

    <h1 class="anim-opacity2">测试</h1>

</body>
</html>

 

demo2

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .anim-opacity2{
          width: 100px;
          height: 100px;
          background-color: #FFAC8B;
          border-radius: 50%;
          animation: 2s opacity2 0s infinite; 
          -webkit-animation: 2s opacity2 0s infinite;
          -moz-animation: 2s opacity2 0s infinite;
          position: relative;
        }
        div{
          line-height: 50px;
          width: 50px;
          height: 50px;
          position: absolute;
          top:40px;
          left:30px;
          background-color: #FF6D15;
          border-radius: 50%;
          z-index: 999;
           text-align: center;
        }
        @keyframes opacity2{
            0%{opacity:0}
            50%{opacity:.8;}
            100%{opacity:0;}
        }
        @-webkit-keyframes opacity2{
            0%{opacity:0}
            50%{opacity:.8;}
            100%{opacity:0;}
        }
        @-moz-keyframes opacity2{
            0%{opacity:0}
            50%{opacity:.8;}
            100%{opacity:0;}
        }
    </style>
</head>
<body>

    <h1 class="anim-opacity2"></h1>
    <div>测试</div>

</body>
</html>

叶落无痕123
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5+css3文字动画渐隐渐显显示
02-06
html5+css3文字动画渐隐渐显显示
css基础--设计动画2（滑动和渐隐渐显）
wenmin1987的博客
06-16 1513
滑动：主要是通过动态修改元素的坐标来实现，技术点如下： 1.考虑元素的初始化坐标、最终坐标，以及移动坐标等定位要素 2、移动的速度、频率等问题 <style type="text/css"> .block{ width:20px;height:20px; position:absolut...
CSS实现渐隐渐现效果
WindrunnerMax
02-03 6225
CSS实现渐隐渐现效果 实现渐隐渐现效果是比较常见的一种交互方式，通常的做法是控制display属性值在none和其它值之间切换，虽说功能可以实现，但是效果略显生硬，所以会有这样的需求——希望元素消失时具有平滑的效果。 实现 opacity opacity是用以设置透明度的属性，单纯将opacity设置为0只能从视觉上隐藏元素，而元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互例如点击事件，对于其添加过渡属性可以显示动画效果，使用transitionend事件监听过渡完成之后隐藏元素，此
CSS渐隐效果，设置盒子渐隐，渐入。
最新发布
weixin_61434483的博客
07-02 90
【代码】CSS渐隐效果，设置盒子渐隐，渐入。
CSS - 图片渐显渐隐
qq_29761395的博客
11-05 2711
文章目录示例参考 示例 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rR6qIbLA-1636082211260)(效果.gif)] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片渐显渐隐</title> <style type="text/css">
CSS实现无缝滚动+渐隐渐现效果
aminwangaa的博客
08-09 3598
效果 直接上代码 import React, { useState, useEffect } from 'react'; import "./index.css" function App() { const ary = [ "1- 关关雎鸠，在河之洲。", "2- 窈窕淑女，君子好逑。", "3- 参差荇菜，左右流之。", "4- 窈窕淑女...
面向对象的轮播图（渐隐渐现）
weixin_63706832的博客
04-11 206
下一张: 当前这一张消失, 下一张显示+ 上一张: 当前这一张消失, 上一张显示+ 某一张: 当前这一张消失, 某一张显示+ 三个效果变成一个=> 当前这一张消失, 某一张显示=> 有的时候, 某一张是 +1=> 有的时候, 某一张是 -1=> 有的时候, 某一张是 =x+ 直接书写一个 切换一张的 函数=> 上一张 还是 下一张 还是 某一张=> 看参数。
html图片渐隐渐显,js实现图片切换效果渐隐渐显
weixin_39980893的博客
06-09 724
图片渐隐渐显的切换效果window.onload = function(){var testDiv = document.getElementById('test');testDiv.style.opacity = 1.0;testDiv.onmouseover = show;testDiv.onmouseout = hide;};var interval1, interval2;var show...
Js+CSS 文字渐隐渐现显示
10-29
JavaScript和CSS结合实现的文字渐隐渐现效果，也被称为淡入淡出效果，是一种常见的动态视觉效果，常用于网页设计中提升用户体验。这种效果最初在视频编辑和Flash动画中使用，但现在已经被广泛应用到网页文本中，增加...
jquery渐隐渐现鼠标提示效果
06-10
在jQuery中实现渐隐渐现的鼠标提示效果，主要是通过结合使用鼠标事件（如mouseover和mouseout）和jQuery的动画功能来完成的。 首先，我们需要在HTML中为需要添加提示效果的元素（如图片或按钮）添加一个数据属性，...
渐隐渐现的jquery tab选项卡
01-23
总结来说，"渐隐渐现的jquery tab选项卡"是利用jQuery库实现的一种具有平滑过渡效果的Tab组件，它涉及到了选择器、事件处理、DOM操作、动画、数据存储以及CSS类操作等多个前端开发的关键技术。通过这些技术的结合，...
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
03-18
NULL 博文链接：https://kingkit.iteye.com/blog/692191
html5 css3全屏响应式图片渐隐切换代码
11-12
然后，将这个动画应用到图片元素上，通过`animation-duration`设置动画时长，`animation-iteration-count`设定循环次数，以实现连续的渐隐渐现效果。 在响应式设计方面，我们需要考虑不同设备的屏幕尺寸和方向。...
jQuery鼠标悬停文字渐隐渐现动画效果.zip
11-22
在前端开发中，jQuery库因其简洁的API和强大的功能，被广泛用于实现各种交互效果，如本案例中的“鼠标悬停文字渐隐渐现动画效果”。这个效果涉及到CSS、JavaScript和HTML5的基本知识，同时也充分利用了jQuery提供的...
html模糊渐显动画,如何实现div串的渐显渐隐？
weixin_39863741的博客
06-10 183
楼主这段代码主要有两个错误：1、只给第一个DIV绑定了事件解决方案：利用事件冒泡进行事件委托，给当前点击的DIV绑定事件2、没有更新curDiv和nextDiv一开始定义了curDiv和nextDiv后，实际上后面都没有更改这两个的值curDiv和nextDiv一直是第一个DIV和第二个DIV，所以点击事件中进行更新望采纳。window.onload = function(){var cur = ...
html中文字自动渐隐,CSS如何实现文字淡入效果
weixin_42466857的博客
06-01 2250
在开发网页时，文字淡入淡出效果的使用十分常见，比如当我们鼠标滑过某张照片时，该照片的相关描述会渐渐淡入。那么 CSS 如何实现文字淡入效果呢？这篇文章 w3cschool 小编告诉你。首先先来看下实现效果：文字淡入效果的实现需要通过 CSS 定义两个关键帧，将其中一个的不透明度设置为 1，另一个设置为 0，透明度属性的设置是用 opacity 来实现。当动画类型为 ease 时，就会触发淡入效果...
CSS控制按钮渐变过渡效果（鼠标移入移出）
lseap的博客
07-26 3665
HTML代码 <!doctype html> <head> <title>按钮渐变过渡效果</title> </head> <body> <a href="#" id="example">登&nbsp;&nbsp;&nbsp;&nbsp;录</a> </bo...
[css3动画]渐隐渐现
weixin_30421525的博客
10-10 810
测试 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .anim-opacity2{animation: 2s opacity2...
css3将一张图片渐隐渐现重复播放
06-10
要实现一张图片的渐隐渐现重复播放，可以使用CSS3的animation属性。以下是一个示例代码： ```css @keyframes fade-in-out { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } .image { animation: fade-in-out 3s infinite; background-image: url('your-image-url'); background-repeat: repeat; } ``` 在这个示例中，我们定义了一个名为"fade-in-out"的关键帧动画，使图片在0%时完全透明，在50%时不透明度为1，在100%时再次变为完全透明。然后将这个动画应用于图片的类名为"image"的元素上，并设置动画的持续时间为3秒，并且无限循环播放。最后，通过background-image和background-repeat属性设置要使用的图片和重复方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值