CSS - 图片渐显渐隐

最新推荐文章于 2023-08-09 00:41:53 发布
最新推荐文章于 2023-08-09 00:41:53 发布
阅读量2.5k 收藏 6
点赞数
分类专栏： HTML & CSS & JavaScript 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29761395/article/details/121159302
版权

文章目录

示例

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>图片渐显渐隐</title>
        <style type="text/css">
            img {
                border-radius: 50%;
                width: 100px;
                height: 100px;
                opacity: 0;
                transition-duration: 2s;
                transition-property: opacity;
            }
            img:hover {
                opacity: 1;
                transition-duration: 2s;
                transition-property: opacity;
            }
        </style>
    </head>
    <body>
        <img src="img/Winter%20Soldier.jpg" >
        
        <p>
            The opacity CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.
        </p>
        <p>
            The transition-property CSS property sets the CSS properties to which a transition effect should be applied.
        </p>
        <p>
            The transition-duration CSS property sets the length of time a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur.
        </p>
    </body>
</html>

参考

Web technology for developers > CSS: Cascading Style Sheets > opacity

Web technology for developers > CSS: Cascading Style Sheets > transition-duration

Web technology for developers > CSS: Cascading Style Sheets > transition-property

好好活着，不要熬夜
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css动画实现图片渐显,用CSS3 transition属性实现淡入淡出轮播图
weixin_35681725的博客
08-04 4489
和的尺寸，让重叠在一起，并且opacity为0。而具有active类的的opacity为1。当然，别忘了设置transition: opacity 1s linear;。 *{padding: 0;margin: 0;}#slideshow{width: 800px;height: 350px;margin: 0 auto; /*设置在页面水平居中*/overflow: hidden;positi...
html5+css3文字动画渐隐渐显显示
02-06
html5+css3文字动画渐隐渐显显示
《CSS实战案例汇总》渐显效果
热爱代码
04-22 949
渐显效果 实现效果 HTML代码 CSS代码 JS代码 实现效果 HTML代码 <!DOCTYPE html> <head> <link rel="stylesheet" href="demo.css"> </head> <body> <div class="card"> 命里有时终须有，命里无时莫强求。 </div> <div class="c.
css基础--设计动画2（滑动和渐隐渐显）
wenmin1987的博客
06-16 1486
滑动：主要是通过动态修改元素的坐标来实现，技术点如下： 1.考虑元素的初始化坐标、最终坐标，以及移动坐标等定位要素 2、移动的速度、频率等问题 <style type="text/css"> .block{ width:20px;height:20px; position:absolut...
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
10-27
大家经常看到网页里图片渐变显示，自己写一个。原理很简单就是修改元素的css透明度，具体实现代码如下，感兴趣的各位可以参考下哈，希望对大家有所帮助
CSS实现渐隐渐现效果
WindrunnerMax
02-03 5997
CSS实现渐隐渐现效果 实现渐隐渐现效果是比较常见的一种交互方式，通常的做法是控制display属性值在none和其它值之间切换，虽说功能可以实现，但是效果略显生硬，所以会有这样的需求——希望元素消失时具有平滑的效果。 实现 opacity opacity是用以设置透明度的属性，单纯将opacity设置为0只能从视觉上隐藏元素，而元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互例如点击事件，对于其添加过渡属性可以显示动画效果，使用transitionend事件监听过渡完成之后隐藏元素，此
CSS实现无缝滚动+渐隐渐现效果
aminwangaa的博客
08-09 3469
效果 直接上代码 import React, { useState, useEffect } from 'react'; import "./index.css" function App() { const ary = [ "1- 关关雎鸠，在河之洲。", "2- 窈窕淑女，君子好逑。", "3- 参差荇菜，左右流之。", "4- 窈窕淑女...
css3动画 -渐隐渐现
热门推荐
叶落无痕的博客
02-15 1万+
  测试 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .anim-opacity2{animat
面向对象的轮播图（渐隐渐现）
weixin_63706832的博客
04-11 186
下一张: 当前这一张消失, 下一张显示+ 上一张: 当前这一张消失, 上一张显示+ 某一张: 当前这一张消失, 某一张显示+ 三个效果变成一个=> 当前这一张消失, 某一张显示=> 有的时候, 某一张是 +1=> 有的时候, 某一张是 -1=> 有的时候, 某一张是 =x+ 直接书写一个 切换一张的 函数=> 上一张 还是 下一张 还是 某一张=> 看参数。
第五章——CSS渐变、动画
最新发布
2302_76704975的博客
08-09 293
perspective-origin 规定 3D 元素的底部位置。transform：3D 变形可以近似理解为沿着 Z 轴移动元素，使得元素更加靠近或者远离你，从而使元素看起来变得更大或更小。7.animation-iteration-count 规定动画被播放的次数。4.animation-duration 规定动画完成一个周期所花费的秒或毫秒。9.animation-play-state 规定动画是否正在运行或暂停。属性：radial-gradinet()(形状 发散方向，起始颜色，终止颜色)
原生JS实现图片网格式渐显、渐隐效果
12-09
先给出效果图： 　　写的小组件支持图片的渐显、渐隐，并且可以是有序、随机两种方式。 　　我采用的原型是属性写在构造函数内，方法写在原型对象内。方法写构造函数内有个问题，就是每次调用这个方法就相当于重新实例化一次，举个粟子： 　　实现网格效果的原理上是将读取图片的宽高，按照设定的参数，分成等高宽的网格（我用的span标签表示的网格），网格利用定位铺满整个图片，每个网格的背景图都是原图片，原理同sprite，利用background-position属性改变显示区域。接下来就是按照设定的顺序实现渐显或渐隐。渐显或渐隐用的是JS的animation属性和CSS3的animation属性在属性值上有
图片向上3D翻转渐隐淡出CSS3特效.zip
07-11
图片向上3D翻转渐隐淡出CSS3特效是一款我个人特别喜欢的鼠标滑过图片文字切换3D动画效果，图片渐隐消失后文字就显示出来了。
Js+CSS 文字渐隐渐现显示
10-29
JavaScript文字渐隐渐现显示，更专业的说法叫淡入淡出，最开始用于视频蒙太奇制作及Flash动画上，现在用到文字上也不是什么稀罕事了.
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
03-18
NULL 博文链接：https://kingkit.iteye.com/blog/692191
图片向上3D翻转渐隐淡出CSS3特效
06-11
图片向上3D翻转渐隐淡出CSS3特效是一款我个人特别喜欢的鼠标滑过图片文字切换3D动画效果，图片渐隐消失后文字就显示出来了。
css3悬停图片3D翻转动画显示文字代码
06-11
这是一款非常有创意的css3悬停图片3D翻转动画显示文字代码，图片向上翻转渐隐消失切换到文字内容的动画效果。
CSS属性： 过渡效果属性transition
08-04 2870
当我给一个盒子定义了100px的宽度时 当我点击 或则鼠标停留在盒子上时，盒子的宽度设置为300px, 如果没有设置过度 瞬间就300px了；
css3渐隐特效
milijiangjun的博客
09-06 2091
<template> <div style="position: relative;height: 500px"> <img style="height:100%;position: absolute" src="https://img.alicdn.com/tfs/TB1JoiEMVYqK1RjSZLeXXbXppXa-3840-12...
段落文字渐隐处理（css)
baby_lx的博客
06-16 805
段落文字渐隐处理
css动画实现background-image图片渐显渐隐
04-22
要实现background-image图片渐显渐隐动画，可以通过CSS3的transition和opacity属性来实现。具体实现步骤如下： 1. 首先，需要将要渐显渐隐的图片设置为HTML元素的背景图，例如： ``` <div class="image"></div> ``` ``` .image { background-image: url('path/to/image.jpg'); width: 500px; height: 300px; } ``` 2. 接着，使用CSS3的transition属性来定义背景图的渐变效果，例如： ``` .image { background-image: url('path/to/image.jpg'); width: 500px; height: 300px; transition: opacity 0.5s ease-in-out; } ``` 其中，transition属性用于指定CSS属性及其过渡效果的持续时间、过渡方式和延时时间，这里指定了opacity属性在0.5秒内进行渐变，渐变方式为ease-in-out。 3. 最后，在需要触发图片渐变效果的事件中，使用opacity属性来控制图片的透明度，例如： ``` .image { background-image: url('path/to/image.jpg'); width: 500px; height: 300px; transition: opacity 0.5s ease-in-out; opacity: 0; /* 初始状态为透明 */ } .image:hover { opacity: 1; /* 鼠标悬浮时逐渐显示 */ } ``` 这里假设需要在鼠标悬浮时触发背景图的渐显渐隐效果，因此在原始状态下将图片的opacity属性设置为0，即完全透明。当鼠标悬浮在图片上时，通过:hover伪类将opacity属性设置为1，背景图将逐渐显示出来，实现渐显渐隐效果。 以上就是通过CSS3实现background-image图片渐显渐隐动画的方法，希望能对你有所帮助。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值