zoukankan      html  css  js  c++  java
  • 纯css设置元素过渡效果

    1.首先,先设置一个div,待会我们使用css3给这个div设置过渡效果。

    2.然后给div设置宽高和背景,这里我就设置成200像素,深粉色。

    3.接着开始设置transition属性,通过这个属性就可以给元素添加过渡效果。

    4.如图所示 ,第一个参数表示的是要过渡的属性值,第二个参数表示的是过渡时间,这里我就设置背景过渡。

    5.接着再设置鼠标经过div元素时背景颜色为暗蓝色。

    6.之后,预览div背景过渡效果,当鼠标放在div元素上面就会由深粉色过渡到暗蓝色,过渡时间是五秒钟(这里因为是静态图片,待会我会贴出源码)。

    7.如果要设置多个属性过渡可以把它们用逗号隔开,比如要同时设置背景和宽度过渡,则可以这样写。

    8.接着再给div:hover设置宽度为400像素。

    9.这样,当我们鼠标经过div元素时,背景会过渡,同时div元素的宽度也会由200像素过渡到400像素 。.

    为了更好参考,我就贴出源代码,直接保存为HTML文件就可以查看效果了哦。
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>搜狗指南 </title>
    <style type="text/css">
    div{
     200px;
    height: 200px;
    background: deeppink;
    transition: background 5s,width 5s;
    }
    div:hover{
    background: darkblue;
     400px;
    }
    </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>
    

    原文地址:https://zhinan.sogou.com/guide/detail/?id=316512424205

  • 相关阅读:
    Nginx 413 Request Entity Too Large
    tp U函数 logs
    div + css 边框 虚线
    html+css判断各个IE浏览器版本
    win7 cmd 常用命令
    mysql 常用命令
    ThinkPHP学习(二)理清ThinkPHP的目录结构及访问规则,创建第一个控制器
    将字符串 由一个字符集 转成 另一个字符集 及 随机生成中文
    Sublime Text 3 中实现编译C语言程序
    C语言入门
  • 原文地址:https://www.cnblogs.com/liyouwu/p/9721960.html
Copyright © 2011-2022 走看看