CSS3知识整理

transition属性-CSS3知识整理

PHPer 2018-02-01 805次浏览 0条评论 0 0 0
div { width:100px; height:100px; background:red; transition:width 2s; -webkit-transition:width 2s; /* Safar...

div

{

width:100px;

height:100px;

background:red;

transition:width 2s;

-webkit-transition:width 2s; /* Safari */

}

div:hover

{

width:300px;

}

注意:该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。

鼠标移动到 div 元素上,查看过渡效果。

2371167038-css3transition03-2.gif



.live > li::before{
  position: absolute;
  content: '\2022';
  font-family: Arial;
  color: #eee;
  top: 0;
  left: 0;
  text-align: center;
  font-size: 2em;
  opacity: .8;
  line-height: 1em;
  -webkit-transition: .5s;
          transition: .5s;
}

.live > li:hover::before{
  -webkit-transform: scale(2);
      -ms-transform: scale(2);
          transform: scale(2);
  opacity: 1;
  text-shadow: 0 0 4px;
  -webkit-transition: .1s;
          transition: .1s;
}

鼠标放上去变化遮罩程度和scale,演示效果 ...

登录 | 立即注册

更新于:2018-02-02 23:06:52
    您需要登录后才可以评论。 登录 | 立即注册
    相关内容

    CSS3知识整理

    transition 属性 将鼠标悬停在一个div元素上,逐步改变表格的宽度从100px到300px:: div { width:100px; transition: width 2s...

    transition属性-CSS3知识整理

    Bootstrap-排版

    Bootstrap-响应式工具

    CSS3的rem详解及使用方法 - CSS3知识整理

    推荐内容

    怎样使用V2Ray代理和SSTap玩如魔兽世界/绝地求生/LOL台...

    在网上找的ss+SSTap的方式都不能通过SSTap的链接测试。最后找到了v2ray+SSTap的方式。 注意事项,首先单独有v2ray看能不能正常上网。另外加速时要v2ray和SST...

    使用V2Ray的mKCP协议加速游戏

    当前脚本已发布新版本,地址: https://github.com/kuoruan/shell-scripts/raw/master/kcptun/kcptun.sh 旧仓库已废...

    v2rayN已停止工作

    要安装.NET Framework 4.6 或者更高版本

    超省心游戏加速:Wireguard+udp加速(CentOS版)--(

    Wireguard+udpspeeder+udp2raw游戏加速方案 ---------------------------------------错误报告及解决-----------...

    wireguard+udpspeeder+udp2raw多用户配置

    Wireguard+udpspeeder+udp2raw游戏加速方案改进版-实测有效

    Wireguard+udpspeeder+udp2raw游戏加速方案改进版-实测有效

    关于客户端电脑的虚拟网卡配置IP和DNS自动获取