第二

最新推荐文章于 2024-03-30 18:20:23 发布

Lin_Zhi

最新推荐文章于 2024-03-30 18:20:23 发布

阅读量113

点赞数

分类专栏：假期

本文链接：https://blog.csdn.net/Lin_Zhi/article/details/87282074

版权

假期专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.CSS3变形
CSS3变形是一些效果的集合
如平移、旋转、缩放、倾斜效果
每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化
浏览器对变形属性的支持情况，并根据不同浏览器添加前缀
变形函数
translate()：平移函数，基于X、Y坐标重新定位元素的位置
语法：translate(tx,ty);
scale()：缩放函数，可以使任意元素对象尺寸发生变化
语法：scale(sx,sy);
scale()函数可以只接收一个值，也可以接收两个值，只有一个值时，第二个值默认和第一个值相等
rotate()：旋转函数，取值是一个度数值
语法：rotate(a);
参数a单位使用deg表示
参数a取正值时元素相对原来中心顺时针旋转
rotate( )函数只是旋转，而不会改变元素的形状
skew()：倾斜函数，取值是一个度数值
语法：skew(ax, ay);
可以仅设置沿着X轴或Y轴方向倾斜
skewX（ax）：表示只设置X轴的倾斜
skewY（ay）：表示只设置Y轴的倾斜
skew( )函数是倾斜，元素不会旋转，会改变元素的形状
浏览器对变形属性的支持情况，并根据不同浏览器添加前缀
-moz- /* 火狐等使用Mozilla浏览器引擎的浏览器 /
-webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
-o- / Opera浏览器(早期) */
//示例
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
2.CSS3过渡
transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等
CSS3 transition的过渡功能更像是一种“黄油”，通过一些CSS的简单动作触发样式平滑过渡
语法:
transition:[transition-property transition-duration transition-timing-function transition-delay ]
transition-property 过渡或动态模拟的CSS属性
transition-duration 完成过渡所需要的时间
transition-timing-function 指定过渡函数
transition-delay 过渡开始出现的延迟时间
过渡属性的使用
过渡属性（ transition-property ）
定义转换动画的CSS属性名称
IDENT：指定的CSS属性（width、height、background-color属性等）
all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all
过渡所需的时间（ transition-duration ）
定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）
过渡动画函数（ transition-timing-function ）
指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式
ease：速度由快到慢（默认值）
linear：速度恒速（匀速运动）
ease-in：速度越来越快（渐显效果）
ease-out：速度越来越慢（渐隐效果）
ease-in-out：速度先加速再减速（渐显渐隐效果）
过渡动画函数（ transition-timing-function ）
指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式
ease：速度由快到慢（默认值）
linear：速度恒速（匀速运动）
ease-in：速度越来越快（渐显效果）
ease-out：速度越来越慢（渐隐效果）
ease-in-out：速度先加速再减速（渐显渐隐效果）
过渡的触发机制
伪类触发：hover ：active ：focus ：checked
媒体查询：通过@media属性判断设备的尺寸，方向等
JavaScript触发：用JavaScript脚本触发
3.CSS3动画
animation实现动画主要由两个部分组成
通过类似Flash动画的关键帧来声明一个动画
在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果
语法：
@keyframes IDENT {
from {/CSS样式写在这里/}
percentage {/CSS样式写在这里/}
to {/CSS样式写在这里/}
}
或者
@keyframes spread {
0% {width:0;}
33% {width:23px;}
66% {width:46px;}
100% {width:69px;}
}
//注意写兼容的时候浏览器前缀是放在@keyframes中间
//例如：@-webkit-keyframes、@-moz- keyframes
调用关键帧
语法
animation:animation-name animation–duration animation-timing-function animation-delay animation-iteration-count
animation-direction animation-play-state animation-fill-mode;
animation-name 由@keyframes创建的动画名称
animation–duration 动画时间
animation-timing-function 动画方式
animation-delay 延迟时间
animation-iteration-count 动画的播放次数值通常为整数，默认值为1 特殊值infinite，表示动画无限次播放
animation-direction 动画的播放方向 normal，动画每次都是循环向前播放 alternate，动画播放为偶数次则向前播放
animation-play-state 动画的播放状态 running将暂停的动画重新播放 paused将正在播放的元素动画停下来
animation-fill-mode 动画开始之前和结束之后发生的操作
forwards表示动画在结束后继续应用最后关键帧的位置

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div img:nth-child(even){
            width: 200px;
        }
        div img:nth-child(odd){
            width:300px;
        }
        .box{
            width: 960px;
            margin: 200px auto;
            position: relative;
        }
        .box img{
            border: 1px solid #ddd;
            padding: 10px;
            position: absolute;
            background: #fff;
            z-index: 1;
            /*过渡动画*/
            transition: all 0.6s ease-in-out;
            -webkit-transition: all 0.6s ease-in-out;
            -moz-transition: all 0.6s ease-in-out;
            -o-transition: all 0.6s ease-in-out;
        }
        #box img:hover{
           z-index: 2;    /*提高层级 */
            box-shadow: 5px 5px 5px #ddd;
            transform: rotate(0deg) scale(1.5);
        }
        .box img:nth-child(1){
            top: 0px;
            left: 300px;
            transform: rotate(-15deg);
        }
        .box img:nth-child(2) {
            top:-50px;
            left: 600px;
            transform: rotate(-20deg);
        }

        .box img:nth-child(3) {
            bottom: 0;
            right: 0;
            transform: rotate(15deg);
        }

        .box img:nth-child(4) {
            bottom: 0;
            left: 400px;
            transform: rotate(-20deg);
        }

        .box img:nth-child(5) {
            bottom: 0;
            left: 0;
            transform: rotate(-30deg);
        }

        .box img:nth-child(6) {
            top: 0;
            left: 0;
            transform: rotate(20deg);
        }

        .box img:nth-child(7) {
            top: 0;
            left: 700px;
            transform: rotate(20deg);
        }

        .box img:nth-child(8) {
            bottom: -20px;
            right: 500px;
            transform: rotate(30deg);
        }

        .box img:nth-child(9) {
            top: 90px;
            left: 550px;
            transform: rotate(15deg);
        }

        .box img:nth-child(10) {
            left: 180px;
            top: 20px;
            transform: rotate(-10deg);
        }
    </style>
</head>
<body>
    <div class="box" id="box">
        <img src="image/1.jpg" alt=""/>
        <img src="image/2.jpg" alt=""/>
        <img src="image/3.jpg" alt=""/>
        <img src="image/4.jpg" alt=""/>
        <img src="image/5.jpg" alt=""/>
        <img src="image/6.jpg" alt=""/>
        <img src="image/7.jpg" alt=""/>
        <img src="image/8.jpg" alt=""/>
        <img src="image/9.jpg" alt=""/>
        <img src="image/10.jpg" alt=""/>
    </div>

</body>
</html>