CSS3 新特性

最新推荐文章于 2021-11-28 15:32:34 发布
最新推荐文章于 2021-11-28 15:32:34 发布
阅读量209 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_zdk/article/details/82773227
版权

过渡transition

transition: 过渡的属性 过渡的时间 过渡的类型 延迟时间;

如：

   transition：all 2s linear 2s;

   transition：width 2s ease-in-out 2s,height .2s ease 3s;

变形transform

transform:

   平移:  translate(X轴,Y轴)

   缩放:  scale(2,-2) --- 正数：默认是1 负数：先翻转，再缩放相应倍数

   倾斜（扭曲）: skew(45deg,45deg)  单位deg（度）

   旋转:  rotate(360deg)

缩放设置基准：transform-origin：left |center| right | % | px  top | middle | bottom | % | px;

动画animation

animation: 动画规则的名称 动画执行的时间 动画的类型 延迟时间 动画执行的次数 执行动画结束后是否停止在结束的位置 动画反向执行;

如：

animation: mymove(动画规则的名称)  4s  linear 2s 2(执行次数|infinite) forwards(在动画结束位置停止) alternate(反向执行);

自定义规则如下2种方式：

方式1：

  @Keyframes mymove{

     from{

   

}

     to{

 

}

}

方式2:

 @Keyframes mymove{

     10%{

   

}

40%,60%{

  

}

     100%{

 

}

}

过渡的练习案例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>CSS3的过渡</title>
        <style type="text/css">
            .box-main{
                width: 400px;
                height: 400px;
                background-color: #CCCCCC;
            }
            .box{
                width: 200px;
                height: 200px;
                background-color: red;
                /*display: none;*/
                /*在我们的过渡效果中尽量避免使用display
                 */
                visibility: hidden;
                opacity: 0;
            }
            .box-main:hover .box{
                /*过渡效果:
                 *   过渡属性 过渡的时间  过渡效果的类型  延迟时间s
                 */
                transition: opacity 3s ease-in-out 1s,width 3s ease-in-out 1s;
                /*display: block;*/
                visibility: visible;
                opacity: 1;
                width: 300px;
                height: 300px;
            }
        </style>
    </head>
    <body>
        <div class="box-main">
            <div class="box">
                
            </div>
        </div>
    </body>
</html>

变形的练习案例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>变形</title>
        <style type="text/css">
            div{
                margin: 5px auto;
                width: 300px;
                height: 300px;
                line-height: 300px;
                text-align: center;
                font-size: 28px;
                color: white;
                font-weight: bold;
                transition: all 2s linear;
            }
            .box-one{
                background-color: blue;
            }
            .box-one:hover{
                /*变形：transform()
                 *X轴偏移量
                 *Y轴偏移量
                 */
                transform: translate(40px,0px);
            }
            .box-two{
                background-color: yellow;
            }
            .box-two:hover{
                /*缩放
                 *负数：先翻转，再进行缩放。
                 */
                transform: scale(-2,1);
                /*设置基准*/
                transform-origin: left top;
            }
            .box-three{
                background-color: pink;
            }
            .box-three:hover{
                /*倾斜*/
                transform: skew(45deg,180deg);
                transform-origin: 100px 100px;
            }
            .box-four{
                /*border-radius: 50%;*/
                background-color: orangered;
            }
            .box-four:hover{
                /*旋转*/
                transform: rotate(720deg);
            }
            .box-total{
                background-color: gold;
            }
            .box-total:hover{
                transform: skew(45deg,180deg) translate(40px,0px) scale(-2,1)  rotate(720deg);
            }
        </style>
    </head>
    <body>
        <!-- 平移 -->
        <div class="box-one">
             平移
        </div>
        <!-- 缩放 -->
        <div class="box-two">
            缩放
        </div>
        <!-- 倾斜 -->
        <div class="box-three">
             倾斜
        </div>
        <!-- 旋转 -->
        <div class="box-four">
            旋转
        </div>
        <!--整合-->
        <div class="box-total">
            整合
        </div>
    </body>
</html>

动画的练习案例代码（轮播效果）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>轮播</title>
        <style type="text/css">
            *{
                padding: 0px;
                margin: 0px;
            }
            section{
                height: 273px;
                /*background-color: #efefef;*/
            }
            .container{
                width: 570px;
                height: 273px;
                margin: 0 auto;
                /*超出隐藏*/
                overflow: hidden;
                /*定位*/
                position: relative;
            }
            .scroll{
                width: 2280px;
                height: 273px;
                font-size: 0;
                /*position: relative;*/
                /*加动画*/
                animation: my-scroll 10s linear infinite;
            }
            .scroll:hover{
                animation-play-state: paused;
                cursor: pointer;
            }
            /*切换轮播图的规则*/
            @-webkit-keyframes my-scroll{
                0%,20%{
                    margin-left: 0px;
                }
                25%,45%{
                    margin-left: -570px;
                }
                50%,75%{
                    margin-left: -1140px;
                }
                80%,100%{
                    margin-left: -1710px;
                }
            }
            span:nth-child(1){
                width: 30px;
                height: 30px;
                line-height: 30px;
                border: 1px solid yellow;
                display: inline-block;
                border-radius: 50%;
                text-align: center;
                color: white;
                font-weight: bold;
                background-color: gold;
                position: absolute;
                left: 280px;
                top: 230px;
            }
            span:nth-child(1):hover{
               background-color: green;
               border: 1px solid green;
               cursor: pointer;
               animation-play-state: running;
            }
            span:nth-child(1):hover ~.scroll{
               /*定义动画*/
               animation: one 2s linear;
            }
            /*切换第一章的规则*/
            @-webkit-keyframes one{
                0%,10%{
                    margin-left: 0px;
                }
                90%,100%{
                    margin-left: 0px;
                }
            }
            
            span:nth-child(2){
                width: 30px;
                height: 30px;
                line-height: 30px;
                border: 1px solid yellow;
                display: inline-block;
                border-radius: 50%;
                text-align: center;
                color: white;
                font-weight: bold;
                background-color: gold;
                position: absolute;
                left: 320px;
                top: 230px;
            }
            span:nth-child(2):hover{
               background-color: green;
               border: 1px solid green;
               cursor: pointer;
               animation-play-state: running;
            }
            span:nth-child(2):hover ~.scroll{
               /*定义动画*/
               animation: two 2s linear;
            }
            /*切换第一章的规则*/
            @-webkit-keyframes two{
                0%,10%{
                    margin-left: -570px;
                }
                90%,100%{
                    margin-left: -570px;
                }
            }
            span:nth-child(3){
                width: 30px;
                height: 30px;
                line-height: 30px;
                border: 1px solid yellow;
                display: inline-block;
                border-radius: 50%;
                text-align: center;
                color: white;
                font-weight: bold;
                background-color: gold;
                position: absolute;
                left: 360px;
                top: 230px;
            }
            span:nth-child(3):hover{
               background-color: green;
               border: 1px solid green;
               cursor: pointer;
               animation-play-state: running;
            }
            span:nth-child(3):hover ~.scroll{
               /*定义动画*/
               animation: three 2s linear;
            }
            /*切换第一章的规则*/
            @-webkit-keyframes three{
                0%,10%{
                    margin-left: -1140px;
                }
                90%,100%{
                    margin-left: -1140px;
                }
            }
            span:nth-child(4){
                width: 30px;
                height: 30px;
                line-height: 30px;
                border: 1px solid yellow;
                display: inline-block;
                border-radius: 50%;
                text-align: center;
                color: white;
                font-weight: bold;
                background-color: gold;
                position: absolute;
                left: 400px;
                top: 230px;
            }
            span:nth-child(4):hover{
               background-color: green;
               border: 1px solid green;
               cursor: pointer;
            }
            span:nth-child(4):hover ~.scroll{
               /*定义动画*/
               animation: four 2s linear;
            }
            /*切换第一章的规则*/
            @-webkit-keyframes four{
                0%,10%{
                    margin-left: -1710px;
                }
                90%,100%{
                    margin-left: -1710px;
                }
            }
        </style>
    </head>
    <body>
        <section>
            <div class="container">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <!--设置放4张图片的div(width | height)-->
                <div class="scroll">
                    <img src="img/one.jpg" alt="" />
                    <img src="img/two.jpg" alt="" />
                    <img src="img/three.jpg" alt="" />
                    <img src="img/four.jpg" alt="" />
                </div>
            </div>
        </section>
    </body>
</html>

 

不码不疯魔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3新特性
qq_43276642的博客
05-20 3128
1.选择器： 伪元素选择器 ::before ::after ::first-line ::first-letter ::section 伪类选择器 .list>li:first-child 选中第一个子元素 .list>li:last-child 选中最后一个子元素 .list>li:nth-child(n) 选中第五个子元素 .list>li:nth-child(odd) 选中偶数行 .list>li:nth-child(...
1.07 css3新特性
最新发布
10-07
CSS3新特性 本资源摘要信息主要介绍CSS3的新特性，包括CSS3的介绍、CSS3选择器、CSS3文本、CSS3边框、CSS3背景、CSS3颜色、CSS3渐变、CSS3盒模型等。 CSS3介绍 CSS3是CSS（层叠样式表）技术的升级版本，于1999年...
CSS3 的新特性
向往的那片海洋
01-25 181
在 CSS3 中大致有以下几种新特性： 新的特性： 渐变：gradients 过渡：transitions 动画：animations 新的布局方式： multi-colimns flexble box grid layouts 在 CSS3 中包含的几部分：渐变、变形、过度、动画、布局 人类在 21 世纪面临的最大挑战就是 “自我管理” ，学会自我管理首先要明白 “我是谁”。…而最重要也是最难的是 “认识你自己”。
CSS3的新特性
11-28 300
文章目录1、兼容性2、新增选择器2.1、属性选择器2.2、结构伪类选择器2.2.1、nth-child选择器2.2.2、nth-of-type选择器2.2.3、nth-child与nth-of-type选择器区别2.3、伪元素选择器 1、兼容性 IE9+才支持 移动端支持优于PC端 2、新增选择器 2.1、属性选择器 选择符 简介 input[value] 根据属性选择 input[type=text] 根据属性值选择 input[class^=txt] 选择class属性值以
深入了解CSS3新特性
07-22
资源名称：深入了解 CSS3 新特性资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
css3新特性.png
03-17
CSS3新特性，带你一小时学完CSS3
css3的新特性
liuhongboke的博客
04-25 72
css圆角属性：border-radius css阴影：Shadow css3渐变效果 background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E)); 这里 linear 表示线性渐变，从左到右，由蓝色（#2A8BBE）到红色（#FE280E）的渐变。 css弹性盒子模型 多列布局：multi-column layout 动画特效：Animation transfrom：用来向元素应用各种2D和3D转换，
H5 和 CSS3 新特性
weixin_30918415的博客
10-12 168
博客地址：https://ainyi.com/52 H5 新特性 语义化标签：header、footer、section、nav、aside、article 增强型表单：input 的多个 type 新增表单元素：datalist、keygen、output 新增表单属性：placehoder、required、min 和 max 音频视频：audio、video ca...
day7小结
KanaseKanon的博客
09-24 787
1、CSS3是CSS2.1的一个升级版，它是对CSS的一个扩展。 2、CSS3的主要新特性： 1）选择器 2）阴影 3）形状转换（2D<->3D） 4）变形 5）动画（过渡动画、帧动画） 6）边框 7）多重背景 8）反射 9）文字 10）颜色（rgba/hsl/hsla） 11）滤镜（filter） 12）弹性布局 13）多列布局 14）盒模型 15）Web字体 16）媒体查询 3、CSS3不是所有浏览器或同一浏览器的不同版本都支持，所以需要兼容处理，通常的做法就是加厂商前缀。 1）主流浏览器内
css3新特性开发网页样式
03-28
CSS3是在CSS2.1基础上发展而来的，它引入了许多新特性，可以让开发者更加灵活地控制网页样式，以下是一些常用的CSS3新特性： 1. 边框圆角（border-radius）：可以将盒子的四个角变成圆角。 2. 盒子阴影（box-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值