CSS3高级效果之平面转换:位置、旋转、缩放、渐变

1.字体图标
        在白龙网看来,字体图标展示的是图片,本质上是字体,主要用来处理简单的图片效果,复杂的图标还是要用精灵图实现。灵活性(可修改字体、尺寸等样式)、兼容性(支持主流浏览器)、轻量级(体积小,渲染快)、使用方便(下载字体,使用图标)。
        下载:登陆阿里巴巴图标库www.iconfont.cn,依次点击“素材库->官方素材库->添加入库->点击购物车->添加项目->下载本地”
引用:在网页中使用link引入iconfont.css;调用图标对应的2个类名(iconfont、icon-xxx),前面是字体类名,后面是图标对应的类名。引入成功后,可以在网页中,或者CSS文件中,通过标签或者图标的类名,使用字体样式修改图标的样式。需要注意的是,标签的优先级没有类的优化级高,因此要通过标签修改图标颜色的话,可以使用important提升标签的优先级。
        如果平台没有目标图标怎么办?把SVG图片通过阿里巴巴图标库转化为图标字体即可。可以让设计师设计出SVG类型的图片,然后在阿里巴巴图标平台依次点击“上传->选择SVG图片->去除颜色提交->批量操作->选择目标图片加入购物车”,然后再下载下来,SVG图片就可以转化为图标字体了。
2.平面转换
        transform可以改变元素在平面的位置、旋转、缩放等状态。参数可以有一个,也可以有两个;参数可以是正值,也可以负数;参数可以是数字,也可以是百分比,如下所示:
    <style>
        .father {
            width: 100px;
            height: 100px;
            background-color: red;
            transition: all 10s;
        }
        .father:hover {
            /* 两个参数表示水平位移和垂直位移,参数可正值,也可负值 */
            transform: translate(100px,100px);
            transform: translate(-100px,-100px);
            transform: translate(50%,60%);
            transform: translate(-50%,-79%);
            /* 一个参数表示水平位移 */
            transform: translate(90%);
            /* 也可以使用大写X/Y分别指定水平、垂直位移 */
            transform: translateX(40%);
            transform: translateY(56%);
        }  
    </style>
</head>
<body>
    <div class="father"></div>
</body>
(1)改变位置
A.水平垂直居中的两种写法
(A)常规写法
    <style>
        .father {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: red;
        }
        .son {
            /* 父标签水平、垂直方向各移动一半 */
            position: absolute;
            left: 250px;
            top: 250px;
            /* 子标签水平、垂直方向再返回一半 */
            margin-left: -50%;
            margin-top: -100px;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
(B)位移写法
    <style>
        .father {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: red;
        }
        .son {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
B.开门效果
        开门效果涉及的知识点,一是使用伪元素添加两个子元素;二是精灵图定位取面一半的方法,即让水平方向right即可;三是水平向左向右位移100%;超出父元素宽高就隐藏。其中前3点都是在子元素上操作,第四点是对父元素操作。
<style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 1366px;
            height: 600px;
            margin: 0 auto;
            background: url(../bg.jpg);
           overflow: hidden;
 
        }
        .box::before,.box::after {
            float: left;
            content: '';
            width: 50%;
            height: 100%;
            background-image: url(../fn.jpg);
            transition: all 4s;
        }
        .box::after {
            background-position: right 0;
        }
        .box:hover::before {
            transform: translate(-100%);
        }
        .box:hover::after {
            transform: translateX(100%);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
(2)旋转效果
A.基本用法
        transform: rotate()可以控制内容进行旋转,参数可以是正数,也可以是负数,单位一定在deg,否则旋转无效果;此外,旋转必须配合过渡效果使用,否则,看不到旋转的效果。
<style>
    div {
        width: 300px;
        margin: 0 auto;
    }
    img {
        width: 295px;
        transition: all 2s;
    }
    img:hover {
        transform: rotate(360deg);
        transform: rotate(-360deg);
    }
</style>
<body>
    <div><img src="./rotate.jpg" alt=""></div>
</body>
B.改变原点
transform-origin可以改变转换原点,“转换”包括位移、旋转、缩放等状态,默认转换原点是盒子中心;两个带原点水平位置、原点垂直位置两个参数,两个数数之间有空格隔开;参考可以是方位词(top/bottom/left/right/center)、像素单位数值、百分比;当然,正值负值都可以。该属性要用标签上面,不能用在hover上。
<style>
    div {
        width: 300px;
        margin: 0 auto;
    }
    img {
        border: 2px solid blue;
        width: 295px;
        transition: all 2s;
        /* 通用配合方位词使用 */
        transform-origin: right bottom;
        transform-origin: right top;
        transform-origin: left top;
        transform-origin: left bottom;
    }
    img:hover {
        transform: rotate(360deg);
    }
</style>
<body>
    <div><img src="./rotate.jpg" alt=""></div>
</body>
C.复合属性
        transform复合属性实现多重效果:轮胎滚动
        复合属性transform: translate(600px) rotate(360deg)的撰写,必须先位移,后旋转;因为旋转会改变坐标的位置,进而影响位移的效果;另外,由于CSS层叠的特性,该复合属性不能分开写,否则就同一个transform而言,后面的属性会覆盖前面的属性;此外,根据经验,如果transform有多重属性,旋转一定要放到最后面。
    <style>
        div {
            width: 800px;
            height: 200px;
            border: 1px solid #000;
        }
        img {
            width: 199px;
            transition: all 15s;
        }
        div:hover img {
            transform: translate(600px) rotate(360deg);
        }
    </style>
</head>
<body>
    <div>
        <img src="./L.jpg" alt="">
    </div>
</body>
(3)缩放效果
A.基本用法
transform: scale()属性值可以是两个,分别设置水平位置与垂直位置绽放效果;也可以只设置一个属性值得,表示水平垂直等比例绽放;属性值大于1,表示放大,小于1表示缩小,等于1表示没效果。
    <style>
        div {
            width: 800px;
            height: 200px;
            border: 1px solid #000;
        }
        img {
            width: 199px;
            transition: all 5s;
        }
        div:hover img {
           transform: scale(2);
           transform: scale(0.5);
           transform: scale(2,0.7);
        }
    </style>
</head>
<body>
    <div>
        <img src="./L.jpg" alt="">
    </div>
</body>
B.综合案例--视频播放效果
        鼠标经过产品图片时,让图片上的播放按钮从无到有,从大到正常。这个案例涉及3步,一是结构布局,要注意的是要添加一个与图片是兄弟的元素,因此需要在图片的父元素中通过伪元素添加新标签;二是给伪元素添加背景按钮,同时,使用定位功能让按钮水平、垂直居中,即:父元素宽高各50%,子元素宽高各负一半;三是设置可见性与按钮绽放,即:按钮的初始值可见性为0,绽放5甚至更大;鼠标经过LI标签时,让可见性变为1,绽放变为正常1。为了效果更加逼真,可在伪元素中设置一个过渡的效果,同时在父标签.pic中设置一个超出隐藏,把按钮的绽放效果限制在父标签的宽高之中。
        另外,需要注意的是,默认元素不显示的表示方法可以使用透明度opacity:0,或者display:none;相反,要显示,直接设置对应属性值为1或者block即可。一般情况下,这样的功能会涉及超出隐藏的功能,从而做出更逼真的效果。同时,也要注意,平面转换如位移、旋转、绽放等效果,一般加上过渡效果,会更佳。
        如果是控制已经图片的绽放,就很简单了,不用再手动或者利用伪元素添加标签了,直接选择图片,给定初值(透明度0,绽放大/小),然后让鼠标经过大盒子时,让图片缩放即可,可见(透明度为1)即可。
    <style>
        * {
            padding: 0;
            margin: 9;
        }
        li {
            list-style: none;
        }
        img {
            width: 100%;
        }
        .box {
            margin: 300px auto;
            width: 300px;
            height: 150px;
        }
        .box .pic {
            position: relative;
            overflow: hidden;
        }
        .box .pic::after {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -29px;
            margin-top: -29px;
            content: '';
            width: 58px;
            height: 58px;
            background-image: url(./play.png);
            transform: scale(6);
            opacity: 0;
            transition: all 0.5s;
        }
        .box li:hover .pic::after {
            opacity: 1;
            transform: scale(1);
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <div class="pic">
                    <img src="./videobg.jpg" alt="">
                </div>
                <p>【求职必读】简历中的自我评价怎么写?……</p>
            </li>
        </ul>
    </div>
</body>
上述案例还可以使用transform的复合属性(位移、绽放)来实现:
   <style>
        * {
            padding: 0;
            margin: 9;
        }
        li {
            list-style: none;
        }
        img {
            width: 100%;
        }
        .box {
            margin: 300px auto;
            width: 300px;
            height: 150px;
        }
        .box .pic {
            position: relative;
            overflow: hidden;
        }
        .box .pic::after {
            position: absolute;
            left: 50%;
            top: 50%;
            /* margin-left: -29px; */
            /* margin-top: -29px; */
            content: '';
            width: 58px;
            height: 58px;
            background-image: url(./play.png);
            transform: translate(-50%,-50%) scale(6);
            /* transform: scale(6); */
            opacity: 0;
            transition: all 0.5s;
        }
        .box li:hover .pic::after {
            opacity: 1;
            transform: translate(-50%,-50%) scale(1);
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <div class="pic">
                    <img src="./videobg.jpg" alt="">
                </div>
                <p>【求职必读】简历中的自我评价怎么写?……</p>
            </li>
        </ul>
    </div>
</body>
(4)渐变效果
        渐变效果一般用在盒子的背景上,使用background-image的属性linear-gradient设置不同的颜色,属性值之间用逗号隔开。
    <style>
        div {
            width: 400px;
            height: 200px;
            background-color: pink;
            /* 多种颜色混合在一块,显示更炫酷的背景 */
            background-image: linear-gradient(
                pink,
                blue,
                green
            );
            /* 从透明变为半透明状态,工作是经常使用 */
            background-image: linear-gradient(
                transparent,
                rgba(0,0,0,0.5)
            );
            
        }
    </style>
</head>
<body>
    <div></div>
</body>
        鼠标经过图片时,逐渐出现过渡的渐变效果,思路是为图片上面添加一个图片,并设置该图片的渐变效果,并给过渡效果即可。
   <style>
        .box {
            position: relative;
            width: 300px;
            height: 150px;
        }
        .box p {
            position: absolute;
            left: 20px;
            top: 87px;
            color: #fff;
            font-weight: 700;
        }
        .box .mask {
            position: absolute;
            left: 0;
            top: 0;
            width: 300px;
            height: 150px;
            background-image: linear-gradient(
                transparent,
                rgba(0,0,0,0.8)
            );
            opacity: 0;
            transition: all 2s;
        }
        .box:hover .mask {
            opacity: 1;
        }
 
    </style>
</head>
<body>
    <div class="box">
        <img src="./videobg.jpg" alt="">
        <p>transparent是什么意思,transparent怎么读,transparent翻...</p>
        <div class="mask"></div>
    </div>
</body>
小结:
        渐变效果实现的一般思路,手动或者通过伪元素添加盒子(控制位置、设置渐变、配置初值)+hover设置变化属性;切记,使用伪元素添加元素时,千万不能少了“content”,否则是无法打印出目标结果的。一定要搞清楚,当鼠标经过谁时,你给谁加hover;你想让谁变化,就选择谁给谁添加渐变效果。
梳理:
        平面转换涉及位移、旋转、缩放、渐变等效果,他们在使用时有共同的特点:分两种情况,一是,如果目标盒子已经存在,先选中盒子(是否给定初始值,根据具体需求而定);再操作盒子(鼠标hover经过时给相应效果)。二是目标盒子不存在,那么要先新建盒子(手动添加,或者伪元素添加),再选中盒子,最后操作盒子。
        初始值中可能涉及的数据有:透明度、过度、位移、旋转、缩放、渐变;
        结果值中可能出现的参数有:透明度、         位移、旋转、缩放、渐变;
        绽放的时候,一般会超过盒子本身的大小,这个时候,在父标签添加overflow:hidden赶出隐藏,即可展现完美效果。