08-css动画

作者: 努力爬行中的蜗牛 | 来源:发表于2018-12-12 23:00 被阅读11次

css3新增选择器

1、css3圆角
设置某一个角的圆角，比如设计左上角的圆角。

<!DOCTYPE html>
<html>
<head>
    <title>圆角</title>
    <style type="text/css">
        .box {
            width: 300px;
            height: 300px;
            border: 3px solid #000;
            background-color: gold;
            margin: 50px auto 0;

            /*border-top-left-radius: 30px 60px;*/
            border-top-left-radius: 60px;
            border-top-right-radius: 100px;
        }

        .box1 {
            width: 300px;
            height: 300px;
            border: 3px solid #000;
            background-color: gold;
            margin: 50px auto 0;
            border-bottom-left-radius: 150px;
            border-top-right-radius: 150px;
        }

        .box2 {
            width: 300px;
            height: 300px;
            border: 3px solid #000;
            background-color: gold;
            margin: 50px auto 0;

            /*border-radius: 60px;*/
            border-radius: 50%;
        }
    </style>
</head>
<body>

    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>

</body>
</html>

2、rgba（新的颜色值表示法）
1、盒子透明度表示法
2、rgba(0,0,0,0.1)前三个数值表示颜色，最后一个数值表示透明度

<!DOCTYPE html>
<html>
<head>
    <title>rgba</title>
    <style type="text/css">
        body {
            background: url(images/banner01.jpg);
        }

        .box {
            width: 300px;
            height: 100px;
            background-color: #000;
            color: #fff;
            font-size: 30px;
            text-align: center;
            line-height: 100px;

            /* 元素透明的完整写法*/
            opacity: 0.3;
            /* 兼容IE浏览器*/
            filter: alpha(opacity=30);
        }

        .box2 {
            width: 300px;
            height: 100px;
            /* 透明度写法*/
            background-color: rgba(0,0,0,0.3);
            color: #fff;
            font-size: 30px;
            text-align: center;
            line-height: 100px;

            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="box">这是一个div</div>
    <div class="box2">这是一个div2</div>

</body>
</html>

css3 transition动画

1、transition-property 设置过度的属性，比如width height background-color
2、transition-duration 设置过度的时间比如1s 500ms
3、transition-timing-function 设置过的运动方式，常用有linear（匀速）、ease（缓冲运动）
4、transition-delay 设置动画的延迟
5、transition：property duration timing-function delay 同时设置四个属性

<!DOCTYPE html>
<html>
<head>
    <title>css transition动画</title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            background-color: gold;

            /* transition动画设置*/
            /*transition: width 1s ease, height 1s ease, background-color 1s ease;*/
            /* 如果多个属性同时做动画，可以合并成下面一句*/
            transition: all 1s ease;
        }

        .box:hover {
            width: 600px;
            height: 500px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>

</body>
</html>

图片说明文字动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .pic_con{
            width:200px;
            height:300px;
            margin:50px auto 0;
            position:relative;
            overflow:hidden;
        }
        .pic_info{
            position:absolute;
            left:0;
            top:300px;
            width:180px;
            height:100px;
            background-color:rgba(0,0,0,0.3);
            color:#fff;
            padding:10px;
            transition:all 500ms ease;
        }

        .pic_con:hover .pic_info{
            top:180px;
        }

    </style>
</head>
<body>
    <div class="pic_con">
        <img src="images/banner01.jpg" alt="banner">
        <div class="pic_info">
            <h3>文字说明标题</h3>
            <p>文字说明文字说明文字说明文字说明</p>
        </div>
    </div>
</body>
</html>

css3 transform变换

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、rotateZ设置三维缩放
10、transform-origin 设置变形的中心点
11、backface-visibility 设置盒子背面是否可见

<!DOCTYPE html>
<html>
<head>
    <title>transform</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            border: 3px solid #000;
            background-color: gold;
            margin: 50px auto 0;
            /* translate 位移比定位做的位移性能高，建议使用这种位移*/
            transform: translate(0px, 0px);

            transition: all 500ms ease;
        }

        .box:hover {
            transform: translate(30px,30px);
        }

        .box2 {
            width: 200px;
            height: 200px;
            border: 3px solid #000;
            background-color: gold;
            margin: 50px auto 0;
            transform: scale(1,1);

            transition: all 500ms ease;
        }

        .box2:hover {
            transform: scale(2,2);
        }

        .box3 {
            width: 200px;
            height: 200px;
            border: 3px solid #000;
            background-color: gold;
            margin: 50px auto 0;
            transform: rotate(0deg);

            transition: all 500ms ease;
        }

        .box3:hover {
            transform: rotate(90deg);
        }

        .box4 {
            width: 200px;
            height: 200px;
            border: 3px solid #000;
            background-color: gold;
            margin: 50px auto 0;
            transform: skew(0deg, 0deg);

            transition: all 500ms ease;
        }

        .box4:hover {
            transform: skew(0deg, 45deg);
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
</html>

变形中心demo

<!DOCTYPE html>
<html>
<head>
    <title>transform-origin</title>
    <style type="text/css">
        .box01,.box02,.box03,.box04{
            width: 200px;
            height: 200px;
            border: 3px solid#000;
            background-color: gold;
            margin: 30px;
            float: left;
            transition: all 500ms ease;
        }

        .box02 {
            transform-origin: left center;
        }

        .box03 {
            transform-origin: left top;
        }

        .box034{
            /*transform-origin: right top;*/
            transform-origin: 50px 50px;
        }

        .box01:hover,.box02:hover,.box03:hover,.box04:hover {
            transform: rotate(45deg);
        }
    </style>
</head>
<body>

    <div class="box01"></div>
    <div class="box02"></div>
    <div class="box03"></div>
    <div class="box04"></div>

</body>
</html>

三维旋转demo

<!DOCTYPE html>
<html>
<head>
    <title>三维旋转</title>
    <style type="text/css">
        /* 对着轴向，顺时针旋转*/
        .box {
            width: 300px;
            height: 300px;
            background-color: gold;
            border: 3px solid #000;
            margin: 50px auto 0;

            /* 设置盒子按3d空间旋转*/
            transform-style:preserve-3d;
            /* 设置透视距离 需要设置初始值，否则会出现bug*/
            transform: perspective(800px) rotateX(0deg);
            transition: all 500ms ease;
        }

        .box:hover {
            transform: perspective(800px) rotateX(45deg);
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: gold;
            border: 3px solid #000;
            margin: 50px auto 0;

            /* 设置透视距离 需要设置初始值，否则会出现bug*/
            transform: perspective(800px) rotateY(0deg);
            transition: all 500ms ease;
        }

        .box2:hover {
            transform: perspective(800px) rotateY(45deg);
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box2"></div>
</body>
</html>

图片翻转demo

<!DOCTYPE html>
<html>
<head>
    <title>翻转动画</title>
    <style type="text/css">
        .box {
            width: 700px;
            height: 272px;
            /*background-color: gold;*/
            border: 3px solid #000;
            margin: 50px auto 0;

            position: relative;
            transform-style: preserve-3d;
        }

        .box img {
            position: absolute;
            left: 0;
            top: 0;

            transform: perspective(800px) rotateY(0deg);
            transition: all 500ms ease;
        }

        .box:hover img {
            transform: perspective(800px) rotateY(180deg);
        }
    </style>
}
</head>
<body>
    <div class="box">
        <img src="images/location_bg.jpg" alt="背景图片">
    </div>

</body>
</html>

翻页效果demo

!DOCTYPE html>
<html>
<head>
    <title>翻转动画</title>
    <style type="text/css">
        .box {
            width: 700px;
            height: 272px;
            /*background-color: gold;*/
            border: 3px solid #000;
            margin: 50px auto 0;

            position: relative;
            transform-style: preserve-3d;
        }

        .box img {
            position: absolute;
            left: 200px;
            top: 0;

            transform: perspective(800px) rotateY(0deg);
            transition: all 500ms ease;
            /* 转到背面不可见*/
            backface-visibility: hidden;
        }

        .box:hover img {
            transform: perspective(800px) rotateY(180deg);
        }

        .box .back {
            width: 300px;
            height: 272px;
            background-color: pink;
            position: absolute;
            left: 200px;
            top: 0;

            font-size: 20px;
            text-align: center;
            line-height: 272px;

            transform: perspective(800px) rotateY(-180deg);
            /* 转到背面不可见*/
            backface-visibility: hidden;
        }

        .box:hover .back {
            transform: perspective(800px) rotateY(0deg);
            transition: all 500ms ease;
        }
    </style>
}
</head>
<body>
    <div class="box">
        <img src="images/location_bg.jpg" alt="背景图片">

        <div class="back">
            图片的说明文字
        </div>
    </div>

    

</body>
</html>

css3 animation动画

1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线linear（匀速）、ease（缓冲）、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（开始时停留在定义的开始帧）、both（前后都应用）
10、animation：name duration ti ming-function delay iteration-count direction;同时设置多个属性

<!DOCTYPE html>
<html>
<head>
    <title>css animation动画</title>
    <style type="text/css">
        /* 定义动画*/
        @keyframes moving {
            from {
                width: 100px;
            }

            to {
                width: 500px;
            }
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: gold;

            animation: moving 1s ease infinite alternate;
            animation-play-state: paused;
        }

        .box:hover {
            animation-play-state: running;
        }


    </style>
</head>
<body>
    <div class="box"></div>

</body>
</html>

风车动画demo

<!DOCTYPE html>
<html>
<head>
    <title>风车旋转</title>
    <style type="text/css">

        @keyframes rotating {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        .zhuan {
            display: block;
            width: 400px;
            height: 400px;
            margin: 50px auto 0;

            animation: rotating 1s linear infinite;
        }
    </style>
</head>
<body>
    <img src="images/fengche.png" alt="风车图片" class="zhuan">

</body>
</html>

loading动画demo

<!DOCTYPE html>
<html>
<head>
    <title>loading动画</title>
    <style type="text/css">

        @keyframes loading {
            from {
                transform: scale(1, 1);
            }

            to {
                transform: scale(1, 0.5);
            }
        }

        .con {
            width: 300px;
            height: 158px;
            border: 1px solid #000;
            margin: 150px auto 0;
        }

        .con div {
            width: 30px;
            height: 100px;
            float: left;
            background-color: gold;
            margin: 15px;
            border-radius: 15px;
            animation: loading 500ms ease infinite alternate;
        }

        .con div:nth-child(1) {
            background-color: red;
        }

        .con div:nth-child(2) {
            background-color: green;
            animation-delay: 100ms;
        }

        .con div:nth-child(3) {
            background-color: pink;
            animation-delay: 200ms;
        }

        .con div:nth-child(4) {
            background-color: lightgreen;
            animation-delay: 300ms;
        }

        .con div:nth-child(5) {
            background-color: lightblue;
            animation-delay: 400ms;
        }

        .con p {
            text-align: center;
        }


    </style>
</head>
<body>
    <div class="con">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <p>loading...</p>
    </div>

</body>
</html>

走路动画demo

<!DOCTYPE html>
<html>
<head>
    <title>走路动画</title>
    <style type="text/css">
        @keyframes walking {
            from {
                left: 0px;
            }

            to {
                left: -960px;
            }
        }

        .box {
            width: 120px;
            height: 180px;
            border: 1px solid #ddd;
            margin: 50px auto 0;
            overflow: hidden;
            position: relative;
        }

        .box img {
            position: absolute;
            left: 0;
            top: 0;

            animation: walking 1s steps(8) infinite;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="images/walking.png" alt="走路动画">
    </div>

</body>
</html>

css3新增选择器1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">

        /*  匹配第二个类型是div子元素  */

        .con div:nth-child(2){
            color:red;
        }

        .con div:nth-child(3){
            color:pink;
        }

        /* 
        .list li:nth-child(1){
            background-color:red;
        }

        等同于下面的写法：

        */

        .list li:first-child{
            background-color:red;
        } 

        /* .list li:nth-child(8){
            background-color:green;
        } 

        等同于下面的写法：

        */


        .list li:last-child{
            background-color:green;
        } 

        /*  
            2n:偶数行;
            2n+1:奇数行;

         */

        .list2 li:nth-child(2n+1){
            background-color:gold;
        }


    </style>
</head>
<body>

    <div class="con">
        <h3>标题</h3>
        <div>这是一个div</div>
        <div>这是第二个div</div> 
    </div>


    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>


    <ul class="list2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>

</body>
</html>

css3新增选择器2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">     
        .box > div{         
            border:1px solid red;
            padding:10px;
            margin:10px;
        }
        .box2 .title2{
            color:red;
        }
        .box2 .title2 ~ p{
            color:pink
        }
        .box2 .title2 + p{
            color:gold;
        }
        .box2 .title1 + p{
            color:green;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>
            <div>这是div里面的文字</div>
        </div>
    </div>


    <div class="box2">
        <h3 class="title1">这是标题一</h3>
        <p>这是段落一</p>
        <h3 class="title2">这是标题二</h3>
        <p>这是段落二</p>
        <p>这是段落二二</p>
        <h3>这是标题三</h3>
        <p>这是段落三</p>
    </div>

</body>
</html>

css3新增选择器3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /* 匹配所有有class属性的div    */
        .con div[class]{
            background-color:gold;
            margin-bottom:10px;
        }
         /* 匹配class属性值是ok的div  */
        .con div[class="ok"]{
            background-color:pink
        }

        /* 匹配class属性值是“ok”开头的div  */
        .con div[class^="ok"]{
            text-indent:30px;
        }

        /* 匹配class属性值是“ok”结尾的div  */
        .con div[class$="ok"]{
            font-size:30px;
        }

        /* 匹配class属性值含有“ok”的div  */
        .con div[class*="ok"]{
            border-bottom:2px solid #000;
        }
        
    </style>
</head>
<body>
    <div class="con">
        <div class="ok">1</div>
        <div class="okabc">2</div>
        <div class="abcok">3</div>
        <div class="abcok123">4</div>
        <div>5</div>
    </div>
</body>
</html>

css权重

css权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用，权重相同的，后写的样式会覆盖前面写的样式。

权重的等级

可以把样式的应用方式分为几个等级，按照等级来计算权重
1、!important，加在样式属性值后，权重为1000
2、内联样式，如style=“”，权重值为1000
3、ID选择器，如#content，权重值为100
4、类、伪类和属性选择器，如content、:hover 权重值为10
5、标签选择器和伪元素选择器，如div、p、:before权重值为1
6、通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)、权重值为0

<!DOCTYPE html>
<html>
<head>
    <title>权重</title>
    <style type="text/css">
        .box {
            color: red !important;
        }

        /*body #content .main_content h2 {
            color: blue;
        }*/

        #content div.main_content h2 {
            color: blue;
        }

        #content .main_content h2 {
            color: red;
        }
    </style>
</head>
<body>
    <div class="box" style="color: blue">这是一个div元素</div>

    <div id="content">
        <div class="main_content">
            <h2>这是一个h2标题</h2>
        </div>
        
    </div>
</body>
</html>

08-css动画

css3新增选择器

css3 transition动画

css3 transform变换

css3 animation动画

css3新增选择器1

css3新增选择器2

css3新增选择器3

css权重

权重的等级

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读