利用opacity属性写过渡效果

最新推荐文章于 2024-04-26 19:17:54 发布
最新推荐文章于 2024-04-26 19:17:54 发布
阅读量6.6k 收藏 6
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yufanhui/article/details/80807534
版权

opacity的意思是不透明性，opacity取值范围为0-1；opacity：0；表示完全透明，opacity：1；表示完全不透明。

opacity：0 于overflow:hidden不同，overflow:hidden会完全消除空间，opacity：0 只是视觉上看不到，但是实际上会占用空间，这点我们常用来于：hover一起使用。

<!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-UA-Compatible" content="ie=edge">
    <title>demo</title>
    <style>
        
        .love{
            background: url(1.jpg) no-repeat;
            border: 300px;
            height: 300px;
            color: red;
            opacity: 1;
            position: relative;
           
        }
        .yes{
            opacity: 0;
            position: relative;
            top: 100px;
            left: 110px;
            width: 200px;
            height: 100px;
        }
        .love:hover .yes{
            opacity: 1;
            transition: 2s;
        }
       
    </style>
</head>
<body>

        <div class="love">
            <div class="yes">佐助和鸣人才是真爱！！</div>
        </div>

</body>
</html>

yufanhui
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue过渡与动画
qq_42839746的博客
05-02 1602
Vue过渡与动画概述： vue使用transition组件实现了过渡与动画，Vue的过渡系统可以在元素从DOM中插入或移除时自动应用过渡效果，也提供配合使用第三方 CSS 动画库(如 animate.css)来实现动画效果。
css transition opacity,CSS transition属性
weixin_39767322的博客
08-04 2205
前言transition通常用来设置animatable元素状态切换的效果，如淡入淡出等。以下介绍下transition的属性及值，以及如何对非animatable,如display等的一些小技巧。属性1、transition-property: 指定要使用过渡效果的属性，比如宽度，高度或者透明度等。2、transition-duration: 指定变化所需的时间3、transition-dela...
CSS中设置透明度的2个属性：opacity，RGBA以及它们的区别
最新发布
u013179804的博客
04-26 1211
透明度在网页设计中扮演着重要的角色，透明度的合理运用可以提升网页设计的美感和功能性，增强用户体验，突出重点内容，同时也为设计师提供了更多的创作空间和可能性。那我们一起来看看吧。
opacity实现渐变过渡
幸福有多远
04-08 6566
css* { margin: 0; padding: 0; } .box { max-width: 400px; height: 200px; background: linear-gradient(to right, olive, green); position: relative; z-index: 0; } .box::before { ...
过渡的使用方法
qq_34771938的博客
09-03 1337
1.过渡的基本使用 transition过渡 transition过渡属性是CSS3浓墨重彩的特性，过渡可以为一个元素在不同样式之间变化自动添加“补间动画”。 transition属性有4个要素。 /* 什么属性要过渡 动画时长 变化速度曲线 延迟时间 */ transition: width 1s linear 0s; 过渡要定义在元素的开始状态上，而不是结束状态上。 哪些属性可以参与过渡 所有数值类型的属性，都可以参与过渡，比如width、height、left、top、bor..
2、完成以下样式。注意opacity的使用。
gfh
04-22 369
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; #img1{ position: absolute;
CSS Opacity属性对层叠上下文的影响
陈春春的技术博客
02-20 2674
今天在遇到一个opacity过渡的时候，遇到了一个奇怪的问题： 父元素设置了opacity。 子元素设置了z-index:-1 <div class="box" style="opacity:.7"> <img style="position:relative;z-index:-1" src="http://www.gbtags.com/gb/laitu/2
详解CSS背景渐变图片transtion过渡效果技巧
09-27
本文将详细介绍如何利用CSS的`transition`属性来实现背景渐变图片的平滑过渡效果，尽管`background-image`本身并不支持`transition`，但我们可以通过其他策略来达成这一目标。 一、背景渐变图片与`transition`的...
vue-router之实现导航切换过渡动画效果
10-16
首先，Vue Router 提供了一个名为 `<transition>` 的内置组件，用于在元素或组件进入和离开时添加过渡效果。通过添加或删除 CSS 类名，我们可以控制元素的动画过程。以下是一些关键的过渡 CSS 类名： 1. `v-enter`:...
利用JS实现文字的聚合动画效果
10-20
接下来，使用`for`循环动态创建和设置每个小块的CSS样式，包括宽高、左上角坐标、背景位置、透明度以及CSS过渡和变换属性。 ```javascript for (var i = 0; i ; i++) { for (var j = 0; j ; j++) { var _div = ...
浅析常用的浏览器私有属性
09-25
2. `-webkit-transition` 和 `-moz-transition` 控制元素的过渡效果。 3. `-webkit-border-radius` 和 `-moz-border-radius` 设置圆角边框。 4. `-webkit-appearance` 和 `-moz-appearance` 改变元素的外观，如使其...
纯CSS写的选项卡效果
09-25
最后，可以通过CSS的过渡效果来增加平滑的动画效果，例如改变透明度或高度，使得内容的切换更加流畅： ```css dd.content { opacity: 0; transition: opacity 0.3s ease; } input[type="radio"]:checked + .tab ...
opacity 设置不透明度、visibility 设置是否可见、transition 设置过渡动画
蚩尤后裔-汪茂雄
10-30 2673
目录 Opacity 设置元素不透明度 visibility 设置元素是否可见 Opacity 设置元素不透明度 Opacity 用于设置元素的透明度级别，包括图片等元素。 默认值： 1 继承： no 版本： CSS3 JavaScript 语法： object.style.opacity=0.5 语 法 ：opacity: value|inher...
[css] CSS3中的transition是否可以过渡opacity和display？
歌谣的博客
02-17 2184
[css] CSS3中的transition是否可以过渡opacity和display？ transition过渡display是有一个前提条件: 浏览器渲染是在每一帧的最后，每一帧都会执行以下操作: js执行 2.style加持 3.layout 4.paint 5.composite 在js执行过程中， 遇到DOM操作，并不会立即渲染，而是推入到队列中，等待UI Render的执行一次性渲染，这是浏览器的优化手段 接下来是重点： 在获取DOM的布局信息时，会
html中过渡效果,CSS3 transition 属性过渡效果 详解
weixin_36469726的博客
06-03 1626
CSS3 transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡。我们可以在不使用 Flash 动画或 JavaScript 的情况下，在元素从一种样式变换为另一种样式时为元素添加效果。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变 CSS 的属性值。以下是 transition 属性的浏览器支持、语法和示例。浏览器支持：Interne...
CSS——过渡与动画
老司机的后备箱
12-30 3747
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
css opacity属性_CSS中的opacity属性
cumubi7552的博客
07-28 2285
css opacity属性 CSS | 不透明度属性 (CSS | opacity Property) With the growing need of making websites, the need for styling them has also increased. Therefore, CSS has become an indispensable part of creating ...
C# 通过Opacity隐藏背景窗体
C/C#、Android driver、STM32、Linux等等。
10-03 641
通过窗体弹出另一个窗体的时候，不想显示背后的窗体，怎么办？当然，可以通过hide()方法来隐藏窗体。这里介绍另一种方法通过控制Opacity，即，通过不透明度来控制窗体隐藏。可以看到每一个窗体的属性中的icon类别中有一项叫做Opacity的选项，他的用途就是改变窗体的透明度，准确的解释为控件的不透明度百分比。它的值是0%-100%，如果是0%就是完全透明，如果是100%就是完全不透明。
html利用过渡鼠标悬停时出现文字overflow
06-06
你可以使用CSS中的`transition`和`overflow`属性来实现这个效果。首先在CSS中为需要悬停的元素添加`overflow: hidden;`属性，然后为元素的子元素添加`opacity: 0;`和`transition: opacity 0.5s ease-in-out;`属性。最后使用伪类选择器`:hover`来为悬停状态下的子元素添加`opacity: 1;`属性，这样在鼠标悬停时子元素就会显示出来了。 具体的代码实现如下： HTML代码： ``` <div class="container"> <div class="content"> <p>这是一段需要悬停才能看到的文字</p> </div> </div> ``` CSS代码： ``` .container { width: 200px; height: 100px; overflow: hidden; background-color: #ccc; } .content { opacity: 0; transition: opacity 0.5s ease-in-out; } .container:hover .content { opacity: 1; } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值