• CSS3特殊效果


    CSS3,html5:各种属性,有酷炫的效果


    兼容性问题:政府大多数政府机构都是用的IE6.7,所以很多时候要兼容IE6.7,IE连PNG格式都不支持

    margin:本身有兼容性问题,在其他地方可能有问题
    padding:内边距还好一些

    APP端只有一个兼容性问题,屏幕,
    要自适应屏幕
    两种方法:(腾讯的autoSize,js)
    (metaholder.js 连rem都可以不用,用px都可以)

    手机端只有屏幕兼容性问题,所以常用CSS3,html5


    CSS3扩展:浏览器有兼容性问题,有些可以在浏览器加使用前缀:
    -webkit- 谷歌和苹果
    -o- 欧朋
    -moz- 火狐
    -ms- IE9

    CSS3的标准写法都要加上前缀,直接写5条,加上本身的那一条,因为不加上很多浏览器就是有兼容性问题

    各种CSS3属性:

    1、点击图片的hover效果:
    图片蒙版:现在不常用,遮盖效果
    图片翻转:
    div{
    168px;
    height: 81px;
    border: 1px solid red;
    overflow: hidden;
    transition: all 1.5s linear;
    }
    img{
    transition: all 1.5s linear;
    }
    div:hover{
    transform: rotateY(180deg);
    }
    div:hover img{
    transform: rotateY(180deg);
    }
    }

    图片放大:

    2、边框圆角:-moz-border-radius:25px; /* Old Firefox */

    3、边框阴影:box-shadow: 10px 10px 5px #888888;水平阴影,垂直阴影,模糊值,颜色
    还可以设置各种颜色,向内(负值)向外阴影

    4、背景,background-size,适应性非常好,常用。

    5、文本:text-shadow,和边框阴影

    6、CSS转换,2D,3D转换
    CSS3 转换:对元素进行移动、缩放、转动、拉长或拉伸。
    转换是使元素改变形状、尺寸和位置的一种效果。

    具体看API,

    7、过渡效果
    应用,进度条,慢慢放大缩小,旋转放大等效果

    8、动画效果
    以前用flash,但是要收版权费,现在都没有用了

    CSS3的效果可以重一种样式转换为另一种样式的效果,可以使用任意多动画任意次数

  • 相关阅读:
    了解Django之前
    jQuery
    java模板模式项目中使用--封装一个http请求工具类
    spring boot项目配置RestTemplate超时时长
    TortoiseSVN-1.7.12.24070-x64-svn-1.7.9安装包和汉化包
    ubuntu16.04环境下在docker上部署javaweb项目简单案例
    工厂模式
    面向对象第四次博客
    面向对象第三次作业总结
    oo第二次博客
  • 原文地址:https://www.cnblogs.com/chenyuanqiu2008/p/5463986.html
Copyright © 2020-2023  润新知