css3实现透明度依次递减的动画效果

心已赠人 2022-12-13 01:53 209阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70_pic_center]  
html部分：

<div>
    	<div class="item"></div>
    	<div class="item"></div>
    	<div class="item"></div>
    	<div class="item"></div>
    	<div class="item"></div>
    	<div class="item"></div>
    </div>

css部分：

div{ 
    display:flex;
    }
    div.item
    { 
    margin-right:15px;
    width:100px;
    height:100px;
    background:red;
    position:relative;
    }
    
    div.item:nth-of-type(1){ 
    animation:mymove .6s linear .5s infinite alternate;
    }
    div.item:nth-of-type(2){ 
    animation:mymove .6s linear .4s infinite alternate;
    }
    div.item:nth-of-type(3){ 
    animation:mymove .6s linear .3s infinite alternate;
    }
    div.item:nth-of-type(4){ 
    animation:mymove .6s linear .2s infinite alternate;
    }
    div.item:nth-of-type(5){ 
    animation:mymove .6s linear .1s infinite alternate;
    }
    div.item:nth-of-type(6){ 
    animation:mymove .6s linear 0s infinite alternate;
    }
    
    @keyframes mymove
    { 
    0% { opacity:1;}
    100% { opacity:0;}
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/0342a7d5ccf544498fc2f62c4f7cbe0c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，209人围观）

还没有评论，来说两句吧...

相关阅读

相关【CSS3】CSS3 动画 ⑥ ( 动画属性示例 | 精灵图帧动画效果实现 )

文章目录一、需求说明二、代码分析 1、动画属性 2、布局分析 3、动画实现三、完整代码示例

ゞ浴缸里的玫瑰/ 2023年10月14日 17:36/ 0 赞/ 16 阅读

相关 CSS3实现的线条波浪动画效果

阅读目录阐述 HTML结构 CSS 样式预览阐述这是一款使用CSS3 animation 动画和 png 图片制作的

「爱情、让人受尽委屈。」/ 2023年10月06日 23:49/ 0 赞/ 11 阅读

相关 css3实现透明度依次递减的动画效果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

心已赠人/ 2022年12月13日 01:53/ 0 赞/ 210 阅读

相关 html 透明度渐变效果,JS实现的透明度渐变动画效果示例

本文实例讲述了JS实现的透明度渐变动画效果。分享给大家供大家参考，具体如下： www.jb51.net JS透明度变化效果 body\{ margin: 0px; pa

Myth丶恋晨/ 2022年10月06日 10:55/ 0 赞/ 218 阅读

相关 CSS3动画效果二

nimation CSS3中真正的动画属性是animation，而前面的transform和transition都只是对DOM元素的变形或者是状态的过渡。实际上，CSS3所

「爱情、让人受尽委屈。」/ 2022年09月25日 03:23/ 0 赞/ 284 阅读

相关 CSS3动画效果一

CSS3添加了几个动画效果的属性，通过设置这些属性，可以做出一些简单的动画效果而不需要再去借助JavaScript。CSS3动画的属性主要分为三类：transform、tran

亦凉/ 2022年09月25日 03:22/ 0 赞/ 265 阅读

相关 css3动画抖动效果

html结构： <div class="top"> <a href="\"> <div>

深碍√TFBOYSˉ_/ 2022年08月07日 02:39/ 0 赞/ 522 阅读

相关 css3动画效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

刺骨的言语ヽ痛彻心扉/ 2022年05月27日 02:44/ 0 赞/ 322 阅读

相关 Css3动画切换效果

开发工具与关键技术：DW 作者：文泽钦撰写时间：2019年3月21日实在不知道写什么，就翻了老师给的一些css样式看看有什么好玩的，老师用伪类做了一个鼠标移入到d

浅浅的花香味﹌/ 2022年02月26日 13:56/ 0 赞/ 440 阅读

相关 CSS实现透明度变化的动画（淡入淡出效果）

本文我们将使用CSS来实现透明度发生变化的动画，可以获得淡入和淡出效果。要实现CSS中透明度更改的动画，需要使用的是transition属性。由于transition属...

小灰灰/ 2021年01月30日 16:49/ 0 赞/ 1066 阅读