CSS3背景与边框相关样式 CSS3中的变形处理 CSS3中的动画功能

最新推荐文章于 2022-07-21 18:58:27 发布

chenggou9601

最新推荐文章于 2022-07-21 18:58:27 发布

阅读量156

点赞数

原文链接：https://my.oschina.net/u/3161974/blog/948435

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Insert title here</title>
    <style>
       /*背景与边框相关样式
       1.1指定背景的显示范围 background-clip属性
       1.2指定背景图像的绘制起点 background-origin属性 利用background-origin属性来指定绘制时从边框的左上角开始绘制，或者从内容的左上角开始绘制
       1.3指定背景图像的尺寸 background-size属性  例:background-size:40px 20px;40px为背景图片的宽度，20px为背景图像的高度
        可以将background-size属性指定为contain关键字，这将把原始图像在维持纵横比的前提下自动放大或缩小，以使原始图像的宽度或高度完全等于元素的宽度或高度
        可以将background-size属性指定为cover关键字，这会使原始图像在维持纵横比的前提下将背景图像自动缩放到填满元素内部，
        如果元素的长宽比例与原始图像的长宽比例不一致，那么多余部分将被剪去
       1.4新增的用于平铺背景图像的选项 space与round space选项在水平方向或垂直方向平铺背景图像时并不裁剪图像超出背景的部分，
       也不会调整背景图像尺寸，而是自动调节图像与图像之间的间距
       而round选项在水平方向或垂直方向平铺背景图像时同样不会裁剪掉图像超出背景的部分，而是会自动调整背景图像的尺寸
       1.5使用渐变色背景
       background:linear-gradient(to bottom,orange,black);
       1.6绘制放射性渐变 
       background-image:radial-gradient(orange,black);
       1.7使用图像边框
       border-image:url(图像文件路径) A B C D (ABCD参数表示当浏览器自动把边框所使用到的图像进行分割时的上边距、右边距、下边距以及左边距)
       使用border-image属性来指定边框宽度border-image:url(图像文件路径) A B C D/border-width
       指定元素4条边中图像的显示方法border-image:url(图像文件路径) A B C D/border-width topbottom leftright (topbottom表示元素的
       上下两条边中图像的显示方法  leftright表示元素的左右两条边中显示的方法
              */
        /*div{*/
            /*background-color: black;*/
            /*border: dashed 15px green;*/
            /*padding:30px;*/
            /*color: white;*/
            /*font-size: 30px;*/
            /*font-weight: bold;*/
        /*}*/
        /*div.div1{*/
            /*-moz-background-clip: border;*/
            /*-webkit-background-clip: border;*/
        /*}*/
        /*div.div2{*/
            /*-moz-background-clip: padding;*/
            /*-webkit-background-clip: padding;*/
        /*}*/
        div#hh{
            width: 500px;
            height: 500px;
            border: 1px solid blue;
            background: #339933;
            background-image: url("border.png"),url("clock_34_bj.jpg");
            background-repeat: no-repeat,repeat-x;
            background-position: 30% 50%,50%;
        }
        div#ss{
            width: 300px;
            height: 300px;
            background: linear-gradient(30deg,orange,black);/*30deg定义渐变线的角度为30度*/
            background: linear-gradient(to bottom,orange 20%,black 70%);/*从div元素的顶端往下20%一直渐变到离元素底端30%*/
            background: linear-gradient(to bottom,orange 0%,red 25%,yellow 50%,green 75%,black 100%);/**/
            
        }
        div#ff{
            width: 400px;
            height: 200px;
            background-image: radial-gradient(orange,black);
            background-image: radial-gradient(at left top,orange,black);/*可以通过关键字指定渐变起点位置 从左上角向外扩散*/
            background-image: radial-gradient(ellipse closest-side at 130px 50px,orange,black);/*closest-side可渐变到离渐变起点最近的一条边*/
            background-image: radial-gradient(circle 130px at 130px 50px,orange 0%,red 25%,yellow 50%,green 75%,black);
            /*指定多个渐变中间点 添加红色、黄色及绿色中间点*/
        }
        div#cc{
            width: 200px;
            height: 200px;
            background-image: url("clock_34_bj.jpg");
            border: solid 5px;
            border-image: url("border.png") 30 15 15 15 /5px stretch repeat;
        }
    </style>

</head>
<body>
<!--<div class="div1">示例文字1</div>-->
<!--<div class="div2">示例文字2</div>-->
<div id="hh">示例文字</div>
<div id="ss">示例文字</div>
<div id="ff">示例文字</div>
<div id="cc">示例文字</div>
<br>
</body>
</html>

//CSS3变形处理

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Insert title here</title>
    <style>
      /*CSS3中的变形处理
      1.1缩放 scale scale(0.5)缩小一半  scale(0.5,2)(水平方向缩小一半，垂直方向放大一倍)
      1.2倾斜 skew(30deg,30deg)表示水平方向倾斜30°，垂直方向倾斜30°
      1.3移动 translate(50px,50px)表示水平方向上移动50px,垂直方向上移动50px
      指定变形的基准点 transform-origin属性，可以改变变形的基准点
      3D旋转变形方法的使用示例如下：
      */
        /*div{*/
            /*width: 300px;*/
            /*margin: 150px auto;*/
            /*background-color: yellow;*/
            /*text-align: center;*/
            /*transform: rotate(45deg);*/
            /*transform: scale(0.5,2);*/
            /*transform: skew(30deg,30deg);*/
            /*transform:rotate(45deg) scale(0.5,2) translate(30px,30px) ;*/
        /*}*/
        /*div{*/
            /*width: 200px;*/
            /*height: 200px;*/
            /*display: inline-block;*/
        /*}*/
        /*div#a{*/
            /*background-color: pink;*/
        /*}*/
        /*div#b{*/
            /*background-color: green;*/
            /*transform: rotate(45deg);*/
            /*!*修改变形基准点*!*/
            /*transform-origin: left bottom;*/
            /*transform: rotateX(30deg) rotateY(45deg) rotateZ(60deg);*/
        /*}*/
        div{
            width: 300px;
            height: 100px;
            background-color: yellow;
            text-align: center;
        }
    </style>

</head>
<body>
<div id="div">示例文字</div>
<input type="button" value="绕X轴旋转" οnclick="rotateX()">
<input type="button" value="绕Y轴旋转" οnclick="rotateY()">
<input type="button" value="绕Z轴旋转" οnclick="rotateZ()">
<script>
    var n,rotINT,rotXINT,rotYINT,rotZINT;
    var div=document.getElementById("div");
    function rotateX() {
        n=0;
        clearInterval(rotXINT);
        rotXINT=setInterval("startXRotate()",10);
    }
    function startXRotate() {
        n=n+1;
        div.style.transform="rotateX(" + n +"deg)";
        if(n==180){
            clearInterval(rotXINT);
            n=0;
        }
    }
    function rotateY() {
        n=0;
        clearInterval(rotYINT);
        rotYINT=setInterval("startYRotate()",10);
    }
    function startYRotate() {
        n=n+1;
        div.style.transform="rotateY(" + n +"deg)";
        if(n==180){
            clearInterval(rotYINT);
            n=0;
        }
    }
    function rotateZ() {
        n=0;
        clearInterval(rotZINT);
        rotZINT=setInterval("startZRotate()",10);
    }
    function startZRotate() {
        n=n+1;
        div.style.transform="rotateZ(" + n +"deg)";
        if(n==180){
            clearInterval(rotZINT);
            n=0;
        }
    }
</script>
</body>
</html>

//ＣＳＳ３动画功能

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Insert title here</title>
    <style>
      /*CSS3中的动画功能
      transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能
      transition:property duration timing-function (property表示对哪个属性进行平滑过渡
         duration表示在多久时间内完成属性值的平滑过渡 timing-function表示通过什么方法进行平滑过渡)
         transition-delay属性，该属性指定变换动画特效延迟多久后开始执行 或在第四个参数中写延迟时间
      */
      /*Animation
      Animation功能与transitions功能相同，都是通过改变元素的属性值来实现动画效果。它们的区别在于：使用transitions功能时只能通过
         指定属性的开始值与结束值，然后在这两个属性值之间进行平滑过渡的方式来实现动画效果，因此不能实现比较复杂的动画效果；Animations通过定义
         多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果
       使用Animations功能的时候，通过如下所示的方法来创建关键帧的集合
       @keyframes 关键帧集合名{创建关键帧的代码}
       40%{
       本关键帧中的样式代码
       }
       创建好关键帧的集合之后，在元素的样式中使用该关键帧的集合，代码类似如下：
        div#cc:hover{
            animation-name: mycolor; //指定关键帧集合的名称
            animation-duration: 5s;//指定完成整个动画所花费的时间
            animation-timing-function: linear;//指定实现动画的方法
                linear在动画开始时与结束时以同样速度进行改变
                ease-in动画开始时速度很慢，然后速度沿曲线值进行加快
                ease-out动画开始时速度很快，然后速度沿曲线值进行放慢
                ease动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢
                ease-in-out动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢
            animation-iteration-count//用于指定动画的执行次数，可指定为infinite（无限次）
            animation-direction//用于指定动画的执行方向
        }
     */
        div#aa{
            background-color: #ffff00;
            /*transition: background-color 1s linear 1s;*/
            width: 300px;
            color: #000000;
            /*同时平滑过渡多个属性值*/
            transition: background-color 1s linear,color 1s linear,width 1s linear;
        }
        div#aa:hover{
            background-color: #00ffff;
            color: #ffffff;
            width: 800px;
        }
        img{
            position: absolute;
            top:70px;
            left: 0;
            transform: rotate(0deg);
            transition: left 1s linear,transform 1s linear;
        }
        div#bb:hover img{
            position: absolute;
            left:30px;
            transform: rotate(720deg);
        }
        div#cc{
            position: absolute;
            background-color: yellow;
            top:500px;
            width: 500px;
        }
        @keyframes mycolor {
            0%{
                background-color: red;
                transform: rotate(0deg);
            }
            40%{
                background-color: darkblue;
                transform: rotate(30deg);
            }
            70%{
                background-color: yellow;
                transform: rotate(-30deg);
            }
            100%{
                background-color: red;
                transform: rotate(0deg);
            }
        }
        @keyframes aaa {
            0%{
                width:100px;
                height: 100px;
            }
            100%{
                width: 500px;
                height: 500px;
            }
        }
        div#dd{
            background-color: red;
            width: 500px;
            height: 500px;
            -webkit-animation-name: aaa;
            -moz-animation-name: aaa;
            -o-animation-name: aaa;
            animation-name: aaa;
            animation-duration: 5s;
            animation-timing-function: ease;
        }
        div#cc:hover{
            animation-name: mycolor;
            animation-duration: 5s;
            animation-timing-function: linear;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            -o-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
        }
        /*网页的淡入效果*/
        @keyframes fadein {
            0%{
                opacity: 0;
                background-color: white;
            }
            100%{
                opacity: 1;
                background-color: white;
            }

        }
        body{
            animation-name: fadein;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-iteration-count: 1;
        }
    </style>

</head>
<body>
<div id="aa">示例文字</div>
<div id="bb">
    <img src="border.png" alt="*">
</div>
<div id="cc">dddd</div>
<div id="dd">dddd</div>

</body>
</html>

转载于:https://my.oschina.net/u/3161974/blog/948435

chenggou9601

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3背景与边框相关样式 CSS3中的变形处理 CSS3中的动画功能

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta htt...
复制链接

扫一扫