美文网首页
08-css动画

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新增选择器 1、css3圆角设置某一个角的圆角，比如设计左上角的圆角。 2、rgba（新的颜色值表示法）1...

  • 08-CSS浮动流

    网页布局方式 什么是网页的布局方式?网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的 标准流(文档流/...

  • 08-CSS基础-体验CSS

    CSS起源 web的衰落： 在web早期（1990-1993）,html是一个很局限的语言。几乎完全由用于描述段落...

  • 08-CSS基础-定位流

    position定位属性 取值static: 静态定位 默认relative: 相对定位 相对自己原来...

  • 08-CSS基础-体验CSS

    CSS起源 web的衰落： 在web早期（1990-1993）,html是一个很局限的语言。几乎完全由用于描述段落...

  • Python学习之旅-08-CSS选择器

    1.什么是Xpath 简单说，xpath就是选择XML文件中节点的方法。 在 XPath 中，有七种类型的节点：元...

  • Android回顾--(十六) 动画简析

    动画： 补间动画(Tween动画) 帧动画(Frame动画) 属性动画(Property动画) 补间动画 特点： ...

  • 在山西太原，做个二维动画需要哪些制作流程？

    二维动画有哪些类型？ flash动画，课件动画，mg动画，ae动画，GIF动画，手绘动画，网页动画，企业动画，宣传...

  • Android 动画

    【Android 动画】 动画分类补间动画(Tween动画)帧动画(Frame 动画)属性动画(Property ...

  • 动画学习

    动画 分为 组动画，属性动画，渐变动画，其中属性动画包括 普通动画和关键帧动画，其他动弹动画，动画层分为 pres...

网友评论

      本文标题：08-css动画

      本文链接：https://www.haomeiwen.com/subject/jqcmhqtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|08-css动画|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！