利用opacity属性写过渡效果

利用opacity属性写过渡效果opacity的意思是不透明性,opacity取值范围为0-1;opacity:0;表示完全透明,opacity:1;表示完全不透明。opacity:0于overflow:hidden不同,overflow:hidden会完全消除空间,opacity:0只是视觉上看不到,但是实际上会占用空间,这点我们常用来于:hover一起使用。<!DOCTYPEhtml><htmll…

大家好,又见面了,我是你们的朋友全栈君。

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>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/141432.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 测试报告范文_苹果11怎么结束运行的程序

    测试报告范文_苹果11怎么结束运行的程序前言受益于pytest的集成,HttpRunnerv3.x可以使用pytest所有插件,包括pytest-html和allure-pytest,也可以实现这2种方式的报告内置html报告pyt

  • SPRINGBOOT启动流程及其原理[通俗易懂]

    SPRINGBOOT启动流程及其原理[通俗易懂]SpringBoot、SpringMVC和Spring有什么区别? 一springboot启动原理及相关流程概览 二springboot的启动类入口 三单单是SpringBootApplication接口用到了这些注解   1)@Configuration注解   2)@ComponentScan注解 3)@EnableAutoConfiguration AutoConfigurationPackage注解: Import(AutoConfiguration…

  • C# 连接SFTP

    C# 连接SFTPC#连接SFTP网上学习到C#连接SFTP方式,整理了一下,文章结尾处为具体的调用方式以及密钥文件的转换。SFTPHelper.c文件:usingSystem;usingSystem.Collections;usingSystem.Collections.Generic;usingSystem.Collections.Specialized;usingSystem.Configuration;usingSystem.Linq;usingSystem.Text;using

  • python运算符优先级_excel运算符优先级最高的

    python运算符优先级_excel运算符优先级最高的在Python中,支持以下类型的运算符:算术运算符 比较(关系)运算符 逻辑(布尔)运算符 位运算符 赋值运算符 成员运算符 身份运算符1.算术运算符运算符 含义 示例 + 加:两个对象相加,或者一元加 x+y – 减:两个对象相减,或得到负数 x-y * 乘:两个操作数相乘,或是返回一个被重复若干次的字符串…

    2022年10月24日
  • TCPDF_程序说明文档

    TCPDF_程序说明文档TCPDF说明文档一、首先调用TCPDF文件require_once(‘tcpdf.php’);二、实例化TCPDF类页面方向(P=肖像,L=景观)、测量(mm)、页面格式$pdf=newTCPDF(‘P’,’mm’,’A4′,true,’UTF-8′,false);三、设置文档信息设置文档信息—-文件创作者…

  • python如何安装sklearn库

    python如何安装sklearn库1.正常的安装思路是win+Rcmdpipinstall+所要装的库然后就会这样2.其实在我换了3.8版本之后在安装python库的时候,基本上pipinstall+库名80%是会成功的,对于这种失败的,我用了第二种方法进行安装。在官网https://www.lfd.uci.edu/~gohlke/pythonlibs/#找到库对应的文件进行下载下载好了之后可以在浏览器的“下载内容”找到我的建议是点“在文件夹中显示”然后在文件夹中选中复制切回c…

    2022年10月17日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号