CSS3的属性、使用及动画

最新推荐文章于 2021-12-18 21:31:55 发布

进击的小野马

最新推荐文章于 2021-12-18 21:31:55 发布

阅读量143

点赞数

分类专栏： CSS 文章标签： css css3 前端

本文链接：https://blog.csdn.net/mab_1994/article/details/110295524

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS3是升级的css2 ：多了动画、选择器之类、布局

边框：borderborder: 30px solid red;
圆角：border-radius

border-radius: 10px 20px 30px 40px
         border-radius: 10px 20px 30px;
         border-radius: 10px 20px;
         border-radius: 10px;
         border-bottom-left-radius: 20px;

阴影：box-shadow

box-shadow:0 0 10px #000;
       box-shadow:0 0  20px #000 inset;  设置内阴隐

边框图片:border-image

border-image: url("./img/border.png") 30 30 round;
        /*border-image-source: url("./img/border.png");*/用于指定要用于绘制边框的图像的位置
        /*border-image-width: 30px;*/图像边界的宽度
        /*border-image-slice:30;*/图像边界向内偏移
        /*border-image-outset:0;*/用于指定在边框外部绘制 border-image-area 的量
        /*border-image-repeat: round;*/用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。

css3 渐变：
closest-side:半径为从圆心到最近边
closest-corner:半径为从圆心到最近角
farthest-side:半径为从圆心到最远边
farthest-corner:半径为从圆心到最远角

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box1,.box2{
            width: 200px;
            height: 200px;
            border: 1px solid deeppink;
        }
        .box2{
            border-radius: 50%;
            /*
            closest-side:半径为从圆心到最近边
            closest-corner:半径为从圆心到最近角
            farthest-side:半径为从圆心到最远边
            farthest-corner:半径为从圆心到最远角
            */
            background: radial-gradient(farthest-side at 150px 50px,#fff,#ff65e6);
        }
        .box1{
            background: linear-gradient(to left,#fff 20%,#fb1aff);
        }
    </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>
</html>

css3 文本效果：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        span {
            font-size: 3rem;
            display: inline-block;
            width: 100px;
            border: 1px solid red;
            /*下面这三个是单行溢出省略*/
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            
            /*多行溢出省略*/
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp:3;
            -webkit-box-orient: vertical;
            word-wrap: break-word;

            /*下面这个属性是控制单词  换行  是否截断换行*/
            break-all  截断换行
            keep-all  全单词换行
            word-break: break-all;
        }
        
        div {
            width: 200px;
            height: 100px;
            border: 1px solid red;
            word-wrap: break-word;
        }
        p{
        text-align: center;
        text-shadow: 2px 2px 2px #ff15f8,
        4px 4px 4px #6e42ff,
        6px 6px 6px #30aaff,
        8px 8px 8px #5affdf;
        }
    </style>
</head>
<body>
<span>我是大漂亮</span>
<div>
    This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap
    to the next line.
</div>
<p>
    This paragraph contains
</p>
</body>
</html>

css3里面的2d转化：
2d----3d：transform-style:preserve-3d;
设置转化中心的宽和高类设置：transform-origin:50%;
旋转：rotate 默认z轴 rotatex rotatey rotatez
平移： translate() 默认x轴 translatex(100px) x轴 translatey(100px)y轴 translatez(100px)z轴
拉伸：skew skew(45deg,10deg) skewx(45deg) skewy(45deg)
缩放：scale（1） scale（1，2）
3d 转化：transform-style:preserve-3d; 可以将2d转化为三维
3d缩放：scale3d(.5,.5,.5)；

rotate3d(1,1,1,45deg)  前三个值   那个为0不转
transform: rotate3d(0,1,0,180deg);

/*perspective: 1px;*/
 /*调3d元素底部位置*/
/*perspective-origin:50px 50px;*/

css3里面的过渡：transition

/*设置过渡延迟*/
transition-delay: 1s;
/*设置过渡的时间*/
transition-duration: .5s;
/*设置过渡属性  如果过渡的属性比较多  其他的一样 可以写成all  也可以使用逗号连写*/
/* transition:text-shadow .5s linear,font-size .5s ease-in;*/
transition:all .5s linear;
transition-property: text-shadow;
/*设置动画的方式  linear  ease  ease-in  ease-out ease-in-out*/
transition-timing-function:linear;

css3里面的动画：animation：动画属性 @keyframes ：动画播放器
@keyframes里面两种写法： from{} to{} 、 0%{} 100%{}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: radial-gradient(at 80px 30px,#fff,#cbcbcb);

            /*
            css3动画
            animation: ;
            */
            /*/!*动画执行的次数  number infinite*!/*/
            /*animation-iteration-count: 2;*/
            /*/!*播放方式*!/*/
            /*animation-direction:alternate;*/
            /*/!*动画的延迟*!/*/
            /*animation-delay: 1s;*/
            /*/!*动画的时间*!/*/
            /*animation-duration: 5s;*/
            /*/!*播放完成的位置*!/*/
            /*animation-fill-mode: forwards;*/
            /*/!*动画名称*!/*/
            /*animation-name: animte_1;*/
            /*/!*动画的状态  running  paused*!/*/
            /*animation-play-state: paused;*/
            /*/!*动画的运动方式*!/*/
            /*animation-timing-function: linear;*/

            animation: animte_1 .5s linear infinite alternate;
            /*animation-fill-mode: forwards;*/

        }
        
        @keyframes animte_1 {
            /*这个里面两种写法
            from to
            0%   100%
            */
            from{
                transform: translatex(0) rotatez(0deg);
            }
            to{
                transform: translatex(300px) rotatez(360deg);;
            }

          /*  0%{

            }
            100%{

            }*/
        }
    </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

进击的小野马

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3的属性、使用及动画

Transition：属性设置元素当过渡效果；四个简写属性为：transition-propertytransition-durationtransition-timing-functiontransition-delay
复制链接

扫一扫