CSS3知识整理

transition属性-CSS3知识整理

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

    推荐内容

    MySQL数据库设计总结

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

    什么是B-Tree

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

    使用Yii2遇到的问题整理

    Yii的东西很多,学习和使用的时候遇到了各种各样的问题,这里记录整理下,方便大家分享。composer安装kartik-v/yii2-mpdf时报错,这里记录下 Yii2用compos...

    Yii2用composer更新时遇到的错误

    Yii2 用composer update 时提示'git' 不是内部或外部命令,也不是可运行的程序或批处理文件

    Yii2​用composer安装kartik-v/yii2-mpdf时报错,成功解决后,再让其支持中文。

    使用Yii2的setFlash和bootstrap.min.js遇到的问题,bootstrap.min.js的bug?

    Yii2的action不支持大小写吗?其实是支持的

    composer install 使用tips-网上找的composer install的使用技巧方法

    关于编程时遇到意想不到的错误如何解决

    比如当你写的一个php脚本执行出现问题,如果你的脚本里自己带了对错误的处理,可能会显示那里出错了。或者你用的框架,框架里有debug模式,会报错。

    使用Laravel 5.4问题总结

    这里写下laravel5.4的总结,用laravel也有段时间了,优点就不用多说了,好上手,较易学较易用,blade模板是非常的好用,等等。laravel的缺点有几个,灵活性一般,框架稍...

    使用Laravel 5.4问题总结 Lost connection to MySQL server at 'reading initial communication ...

    Laravel 5.4各种错误提示总结

    localStorage介绍和使用

    一、什么是localStorage、sessionStorage在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(co...

    localStorage的使用

    localStorage其他注意事项