九、CSS新特性

CSS3过渡动画

<style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;
            /*在哪产生动画、动画的时间、运动曲线、延迟*/
            /*transition: border-radius 500ms ease,width 500ms ease 500ms,height 500ms ease 1s,background-color 500ms ease 1.5s;*/
            transition: all 500ms ease;
        }
        .box:hover{
            width: 500px;
            height: 300px;
            background-color: red;
            border-radius: 50px;
        }
    </style>
<div class="box"></div>

1、transition-property 设置过渡的属性，比如：width height background-color
2、transition-duration 设置过渡的时间，比如：1s 500ms
3、transition-timing-function 设置过渡的运动方式

  • linear 匀速
  • ease 开始和结束慢速
  • ease-in 开始是慢速
  • ease-out 结束时慢速
  • ease-in-out 开始和结束时慢速
  • cubic-bezier(n,n,n,n)

4、transition-delay 设置动画的延迟
5、transition: property duration timing-function delay 同时设置四个属性

CSS圆角 阴影 透明度

圆角
设置某一个角的圆角，比如设置左上角的圆角：
border-top-left-radius:30px 60px;

同时分别设置四个角：
border-radius:30px 60px 120px 150px;

设置四个圆角相同：
border-radius:50%;

阴影
box-shadow：h-shadow v-shadow blur spread color inset;
分别设置阴影：水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影

rgba（新的颜色表示法）
1、盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;
2、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度
例子：

<head>
    <meta charset="UTF-8">
    <title>css3圆角 阴影 透明度</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            border: 2px solid #000;
            background-color: gold;
            margin: 50px auto 0;
            /*border-top-left-radius: 100px 50px;左上角为椭圆圆角*/
            /*border-top-left-radius: 100px;
            border-top-right-radius: 100px;左、右上角为正圆圆角*/
            /*border-radius: 40px;曲率半径为40的圆角矩形*/
            /*border-radius: 20%;最大200px，20%即40px*/
            border-radius: 50%;/*正圆*/
        }
        .box1{
            width: 200px;
            height: 40px;
            background-color: gold;
            margin: 100px auto 0;
            /*水平偏移 垂直偏移 羽化大小 扩展大小 颜色*/
            box-shadow: 10px 10px 10px 0px #bfa;
        }
        .box2{
            width: 200px;
            height: 40px;
            background-color: gold;
            margin: 100px auto 0;
            /*水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影*/
            box-shadow: 0px 0px 20px 2px red inset;
        }

        body{
            background-color: cyan;
        }
        .box3{
            width: 200px;
            height: 200px;
            /*background: url(images/location_bg.jpg);*/
            background-color: gold;
            margin: 50px auto 0;
            border: 2px solid #000;
            border-radius: 50%;
            /*透明度30%，文字也透明了*/
            opacity: 0.3;
            filter: alpha(opacity=30);/*兼容IE*/
            text-align: center;
            line-height: 200px;
        }
        .box4{
            width: 200px;
            height: 200px;
            /*背景色变透明，但文字不会透明*/
            background-color: rgba(255,215,0,0.3);
            margin: 50px auto 0;
            /*边框透明*/
            border: 2px solid rgba(0,0,0,0.3);
            border-radius: 50%;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3">床前明月光</div>
    <div class="box4">床前明月光</div>
</body>

运动曲线

例子

<head>
    <meta charset="UTF-8">
    <title>运动曲线</title>
    <style type="text/css">
        div{
            width: 50px;
            height: 50px;
            background-color: gold;
            margin-bottom: 20px;
        }
        div:nth-child(1){
            /*匀速*/
            transition: all 1s linear;
        }
        div:nth-child(2){
            /*开始和结束慢速，中间加速*/
            transition: all 1s ease;
        }
        div:nth-child(3){
            /*开始慢速，结尾突然停止*/
            transition: all 1s ease-in;
        }
        div:nth-child(4){
            /*突然开始，结束时慢速*/
            transition: all 1s ease-out;
        }
        div:nth-child(5){
            /*开始和结束时慢速*/
            transition: all 1s ease-in-out;
        }
        div:nth-child(6){
            /*贝塞尔（贝兹）曲线*/
            /*transition: all 1s cubic-bezier(0.250,0.250,0.750,0.750);匀速*/
            /*超出再缩回的弹性效果*/
            transition: all 1s cubic-bezier(0.470, -0.485, 0.460, 1.435);
        }
        div:hover{
            width: 1000px;
        }
    </style>
</head>
<body>
    <div>linear</div>
    <div>ease</div>
    <div>ease-in</div>
    <div>ease-out</div>
    <div>ease-in-out</div>
    <div>bezier</div>
</body>

图片文字遮罩

例子：

<head>
    <meta charset="UTF-8">
    <title>图片文字遮罩</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 300px;
            margin: 50px auto 0;
            border: 1px solid #000;
            position: relative;
            /*默认文字不可见*/
            overflow: hidden;
        }
        .box img{
            width: 200px;
            height: 300px;
        }
        .box .pic_info{
            width: 200px;
            height: 200px;
            background-color: rgba(0,0,0,0.5);
            color: #fff;

            /*定位使色块在图片正下方*/
            position: absolute;
            left: 0;
            top: 300px;

            transition: all 500ms cubic-bezier(0.470, -0.485, 0.460, 1.435);
        }
        .box:hover .pic_info{
            /*色块上移*/
            top:150px;
        }
        /*间距用p标签的margin，而不直接给.pic_info用padding，因为padding会改变盒子大小*/
        .box .pic_info p{
            margin: 20px;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="img/location_bg.jpg" alt="玫瑰花">
        <div class="pic_info">
            <p>图片说明：这是一朵玫瑰花图片说明：这是一朵玫瑰花图片说明：这是一朵玫瑰花图片说明：这是一朵玫瑰花</p>
        </div>
    </div>
</body>

扩展二级菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片文字遮罩</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 300px;
            margin: 0px auto 0;
            border: 1px solid #000;
            position: relative;
            /*overflow: hidden;*/
        }
        .box img{
            width: 200px;
            height: 300px;
        }
        .box .pic_info{
            width: 200px;
            height: 200px;
            background-color: #000;
            color: #fff;
            position: absolute;
            left: 200px;
            top: 0px;
            transition: all 500ms cubic-bezier(0.470, -0.600, 0.475, 1.605);
            background-color: rgba(0,0,0,0.5);
            display: none;
        }
        .box:hover .pic_info{
            /*top: 150px;*/
            display: block;
        }
        .box .pic_info p{
            margin: 20px;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="img/location_bg.jpg" alt="花朵">
        <div class="pic_info">
            <p>图片说明：这是一朵花图片说明：这是一朵花图片说明：这是一朵花图片说明：这是一朵花</p>
        </div>
    </div>
    <div class="box">
        <img src="img/location_bg.jpg" alt="花朵">
        <div class="pic_info">
            <p>图片说明：这是一朵花图片说明：这是一朵花图片说明：这是一朵花图片说明：这是一朵花</p>
        </div>
    </div>
</body>
</html>

变形(transfrom变换)

1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective 设置透视距离
6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ 设置三维移动
8、rotateX、rotateY、rotateZ 设置三维旋转
9、scaleX、scaleY、scaleZ 设置三维缩放
10、tranform-origin 设置变形的中心点
11、backface-visibility 设置盒子背面是否可见

例子：(翻面效果)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻面</title>
    <style type="text/css">
        .box{
            width:300px;
            height:272px;
            margin:50px auto 0;
            transform-style:preserve-3d;
            position:relative;            
        }
        .box .pic{
            width:300px;
            height:272px;
            position:absolute;
            background-color:cyan;
            left:0;
            top:0;
            transform:perspective(800px) rotateY(0deg);
            backface-visibility:hidden;
            transition:all 500ms ease;
        }
        .box .back_info{
            width:300px;
            height:272px;
            text-align:center;
            line-height:272px;
            background-color:gold;
            position:absolute;
            left:0;
            top:0;
            transform:rotateY(180deg);
            backface-visibility:hidden;
            transition:all 500ms ease;            
        }
        .box:hover .pic{
            transform:perspective(800px) rotateY(180deg);
        }
        .box:hover .back_info{
            transform:perspective(800px) rotateY(0deg);
        }
    </style>
</head>
<body>
    <div class="box">        
        <div class="pic"><img src="images/location_bg.jpg"></div>
        <div class="back_info">背面文字说明</div>
    </div>
</body>
</html>

元素旋转

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素旋转</title>
    <style type="text/css">
        /*旋转方向判断
        1、X轴向右、Y轴向下、Z轴向屏幕外
        2、让轴向对着自己，顺时针方向就是该轴向的旋转方向*/
        .box{
            width: 300px;
            height: 300px;
            background-color: gold;
            margin: 50px auto 0;
            transition: all 500ms ease;
            /*设置盒子按3D空间显示*/
            transform-style: preserve-3d;
            transform: perspective(800px) rotateY(0deg);
        }
        .box:hover{
            /*默认沿Z轴旋转*/
            /*transform: rotate(45deg);*/
            /*perspective设置透视距离，经验数值800比较符合人眼的透视效果*/
            /*transform: perspective(800px) rotateX(45deg);*/
            transform: perspective(800px) rotateY(-45deg);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

变形中心点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变形中心点</title>
    <style type="text/css">
        div{
            width: 200px;
            height: 200px;
            background-color: gold;
            float: left;
            margin: 30px;
            transition: all 500ms ease;
        }
        div:hover{
            transform: rotate(-90deg);
        }
        div:nth-child(1){
            /*设置变形的中心点*/
            transform-origin: left center;
        }
        div:nth-child(2){
            transform-origin: left top;
        }
        div:nth-child(3){
            transform-origin: 50px 50px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

背面可见

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背面可见</title>
    <style type="text/css">
        .con{
            width: 300px;
            height: 300px;
            margin: 50px auto 0;
            border: 1px solid #000;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: gold;
            text-align: center;
            line-height: 300px;
            font-size: 50px;
            transition: all 500ms ease;
            /*设置盒子按3d空间显示*/
            transform-style: preserve-3d;
            /*设置透视距离、三维旋转的初始角度*/
            transform: perspective(800px) rotateY(0deg);
            /*设置盒子背面是否可见*/
            backface-visibility: hidden;
        }
        .con:hover .box{
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="box">div元素</div>
    </div>
</body>
</html>

animation动画

1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线

linear 匀速
ease 开始和结束慢速
ease-in 开始是慢速
ease-out 结束时慢速
ease-in-out 开始和结束时慢速
steps 动画步数
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction

normal 默认动画结束不返回
Alternate 动画结束后返回
8、animation-play-state 动画状态

paused 停止
running 运动
9、animation-fill-mode 动画前后的状态

none 不改变默认行为
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
both 向前和向后填充模式都被应用
10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性
例子：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation动画</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;
            /*动画名称、时间、曲线、延迟、播放次数、结束后是否返回、动画前后的状态
            infinite不限制次数
            alternate动画结束后返回，返回也算次数
            animation-fill-mode 动画前后的状态
                forwards动画完成保持在最后一帧
                backwards在延迟时间内，在动画显示之前，应用from开始属性值（例如box宽100，from宽200，在延迟1s内显示200）
                both向前和向后填充模式都被应用（例如起始按200，结束停在最后一帧）
            */
            animation: moving 1s ease 1s 5 alternate both;
            /*动画暂停*/
            /*animation-play-state: paused;*/
        }
        .box:hover{
            /*动画运行*/
            /*animation-play-state: running;*/
        }
        /*定义一个动画，名称为moving*/
        @keyframes moving{
            /*初始状态*/
            from{
                width: 200px;
            }
            /*结束状态*/
            to{
                width: 500px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

人物走路动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>人物走路动画</title>
    <style type="text/css">
        .box{
            width: 120px;
            height: 182px;
            /*border: 1px solid black;*/
            margin: 50px auto 0;
            overflow: hidden;
            position: relative;
            animation: moving 2s linear infinite;
        }
        .box img{
            position: absolute;
            left: 0;
            top: 0;
            /*steps动画步数，图片有8帧，所以设置为8步*/
            animation: walking 2s steps(16) infinite;
        }
        @keyframes moving{
            0%{
                transform: translate(0px,0px);/*位移*/
            }
            50%{
                transform: translate(200px,0px);
            }
            100%{
                transform: translate(0px,0px);
            }
        }
        @keyframes walking{
            from{
                left: 0px;
            }
            to{
                left: -1920px;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="img/walking1.png" alt="人物走路">
    </div>
</body>
</html>

多帧动画
例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多帧动画</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;
            margin: 50px auto 0;
            animation: moving 1s ease 1s both;
        }
        @keyframes moving{
            0%{
                /*位移动画*/
                transform: translateY(0px);
                background-color: cyan;
            }
            50%{
                transform: translateY(400px);
                background-color: gold;
                border-radius: 0px;
            }
            100%{
                transform: translateY(0px);
                background-color: red;
                border-radius: 50px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

loading动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>loading动画</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 125px;
            border: 1px solid #000;
            margin: 200px auto 0;
        }
        .box p{
            text-align: center;
            width: 100%;

        }
        .box div{
            width: 30px;
            height: 70px;
            float: left;
            background-color: gold;
            margin: 15px;
            border-radius: 10px;
        }
        .box div:nth-child(1){
            background-color: red;
            animation: loading 500ms ease 0s infinite alternate;
        }
        .box div:nth-child(2){
            background-color: green;
            animation: loading 500ms ease 100ms infinite alternate;
        }
        .box div:nth-child(3){
            background-color: pink;
            animation: loading 500ms ease 200ms infinite alternate;
        }
        .box div:nth-child(4){
            background-color: greenyellow;
            animation: loading 500ms ease 300ms infinite alternate;
        }
        .box div:nth-child(5){
            background-color: cyan;
            animation: loading 500ms ease 400ms infinite alternate;
        }
        @keyframes loading{
            from{
                transform: scaleY(1);
            }
            to{
                transform: scaleY(0.5);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <p>loading...</p>
    </div>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,254评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,875评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,682评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,896评论 1赞 285
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,015评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,152评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,208评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,962评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,388评论 1赞 304
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,700评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,867评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,551评论 4赞 335
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,186评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,901评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,689评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,757评论 2赞 351

推荐阅读更多精彩内容

  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    love2013阅读 2,308评论 0赞 11
  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    wzhiq896阅读 1,738评论 0赞 2
  • CSS相关总结
    一、CSS入门 1、css选择器 选择器的作用是“用于确定（选定）要进行样式设定的标签（元素）”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,591评论 0赞 6
  • 框架集，动画，HACK
    框架集 框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面框架集可以同时引入多个页面，而内联框架...
    幸而0407阅读 210评论 0赞 0
  • 绘画班第六次作业
    有了马克笔，上色真的好好看啊。小男孩比小女孩小了点。
    小太阳777阅读 178评论 2赞 1