zoukankan      html  css  js  c++  java
  • CSS3笔记

    CSS3

    1. CSS3边框

    • border-radius 边框圆角
    • box-shadow 边框阴影
    • border-image 图片边框

    2. CSS3背景

    • background-size
    • background-origin
    /*background-size 规定背景图片尺寸*/
    div {
        background: url(background_image.png);
        background-size: 200px 100px; /*宽 高*/
    }
    
    /*background-origin 规定背景图片放置区域*/
    div {
        background: url(background_image.png);
        background-origin: content-box; /*放在content区域*/
    }
    

    3. CSS3文本效果

    • text-shadow
    • word-wrap
    /*为文字添加阴影*/
    h1 {
    	text-shadow: 5px 5px 5px #FF0000;
    }
    
    /*自动换行 强制换行*/
    p {
        word-wrap:break-word;
    }
    

    4. CSS3 2D转换

    transform属性

    • translate()
    • rotate()
    • scale()
    • skew()
    • matrix()
    /*将元素移到某位置*/
    div {
        transform: translate(50px, 100px);
    }
    /*将元素旋转给定的角度*/
    div {
        transform: rotate(30deg);
    }
    /*将元素按照给定的宽度高度比例缩小/放大*/
    div {
        transform: scale(0.5, 0.8);
    }
    /*将元素根据给定的水平线和垂直线翻转*/
    div {
        transform: skew(30deg, 20deg);
        /*值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度。*/
    }
    

    5. CSS3 3D转换

    • rotateX()
    • rotateY()

    6. CSS3 过渡

    • transition
    div {
        transition: width 2s, height 2s;
        /*变换到指定width和height经过2s时间*/
    }
    

    7. CSS3动画

    • @keyframes
    • animation
    /*先用keyframes创建动画*/
    @keyframes myAnimation {
        from {background: red;}
        to {background: yellow}
    }
    /*把myAnimation绑定到div元素*/
    div {
        animation: myAnimation 5s;
    }
    

    创建循环动画

    div {
        animation: myAnimation infinite;
        animation-duration: 5s;
        /*5s一个周期播放myAnimation动画*/
    }
    
  • 相关阅读:
    Kafka: Producer (0.10.0.0)
    Kafka:架构简介【转】
    ZooKeeper示例 分布式锁
    机器学习---人脸对齐的基于形状模型的训练
    人脸妆容迁移---研究和思考
    机器学习----人脸对齐的算法-ASM.AAM..CLM.SDM
    基于opencv+Dlib的面部合成(Face Morph)
    c语言编程-----指向二维数组的指针
    工具软件 PYUV打开raw图片
    eclipse 使用问题
  • 原文地址:https://www.cnblogs.com/lbr12218/p/14609038.html
Copyright © 2011-2022 走看看