CSS3知识整理

transition属性-CSS3知识整理

PHPer 2018-02-01 415次浏览 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知识整理

    推荐内容

    超省心游戏加速:Wireguard+udp加速(CentOS版)--(实测:超不省心),以后搜帖...

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

    wireguard+udpspeeder+udp2raw多用户配置

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

    基于CentOS7 Centos8平台搭建邮件服务器

    EwoMail​在Centos8上安装了,各种坑,各种报错。这个集成包太臃肿了。 20200416 EwoMail 已经弃用,国内的一家公司搞的坑爹产品。 20200418

    如何在RHEL8 / CentOS8上安装Webmin

    设置postfix作为邮件发送服务器

    查问我看笔记功能的实现过程-全文搜索待开启,试试yiisoft/yii2-sphinx

    查问我看笔记功能的实现的重点就是全文搜索,如果不用Yii自带的ActiveRecord的话,就要找扩展,先找了个yii-xunsearch,不行太差了,又找了yiisoft/yii2-elasticsearch,...

    yii2框架中使用sphinx使用搜索引擎 多条件选择搜索

    运行php composer.phar require --prefer-dist yiisoft/yii2-sphinx

    U盘安装U盘启动-U盘启动盘一键U盘装系统

    https://www.upandashi.com/ 先要做U盘启动盘,然后下载Win7镜像或Win7的Ghost文件,放到U盘里,然后插在电脑上做系统,注意主板要改成U盘优先启动。 ...

    MySQL数据库设计总结

    规则1:一般情况可以选择MyISAM存储引擎,如果需要事务支持必须使用InnoDB存储引擎。注意:MyISAM存储引擎 B-tree索引有一个很大的限制:参与一个索引的所有字...

    什么是B-Tree

    二叉查找树、平衡二叉树、红黑树、B-/B+树性能对比