Css3新增属性

Posted 夜枭

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Css3新增属性相关的知识,希望对你有一定的参考价值。

新增了透明功能:

#box1{
                width: 100px;height: 100px; background: linear-gradient(greenyellow,green);
                position: absolute;top: 120px;right: 100px;opacity: 0.5;border: 1px solid green;
                }

新增动画效果:

#cir{
                width: 100px; height: 100px;
                background: linear-gradient(red,orange,yellow);
                border-radius: 50%;
                -webkit-animation-name: names;
                -webkit-animation-duration: 3s;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-timing-function: linear;
                -moz-animation: names;
                -moz-animation-duration: 3s;
                -moz-animation-iteration-count: infinite;
                -moz-animation-timing-function: linear;
            }
            @-webkit-keyframes names{
                /*from{-webkit-transform: rotate(0deg);}
                to{-webkit-transform: rotate(360deg);}*/
                0%{-webkit-transform:translate(0);}
                30%{-webkit-transform: translateX(150px) scale(0.5) rotate(90deg);}
                50%{-webkit-transform: translateX(300px) scale(1) rotate(180deg);}
                75%{-webkit-transform: scale(2) rotate(270deg);}
                100%{-webkit-transform: translateX(0) scale(1) rotate(360deg);}
            }

新增了音频功能:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            ul,ol{list-style: none;}
            ul li{margin-bottom: 15px;}
        </style>
    </head>
    <body>
        <!--<audio src="img/audiovidio/花の子ルンルン.mp3" autoplay controls loop></audio>
        <audio controls autoplay>
            <source src="img/audiovidio/Come You Are.mp3"></source>
            <source src="img/audiovidio/movie.ogg"></source>
            <source src="img/audiovidio/MP3.mp3"></source>
        </audio>-->
        <audio src="img/audiovidio/花の子ルンルン.mp3"autoplay preload="auto" loop controls id="audio1"></audio>
        <ul id="music-list">
            <li title="img/audiovidio/花の子ルンルン.mp3">花の子ルンルン</li>
            <li title="img/audiovidio/机器猫.mp3">机器猫</li>
            <li title="img/audiovidio/新世纪福音战士主题曲.mp3">新世纪福音战士主题曲</li>
        </ul>
        
    </body>
    <script>
        onload=function(){
            audio1=document.getElementById("audio1");
            li1=document.getElementById("music-list").getElementsByTagName("li");
            for(var i=0;i<li1.length;i++){
                li1[i].onclick=function(){
                    audio1.src=this.title;
                }
            }
        }
    </script>
</html>

新增内嵌框架ifream

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
        <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css"/>
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile.external-png-1.4.5.css"/>
        <script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery.mobile-1.4.5.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            body{margin:0 auto;}
        </style>
    </head>
    <body>
        <img src="img/lastday.png" alt="消息" width="339"height="229" usemap="#map"/>
        <map name="Map">
        <area shape="rect" coords="31,28,112,100" href="http://www.baidu.com" target="_blank" alt="方形"/>
        <area shape="circle" coords="187,142,47" href="http://www.163.com" target="_blank" alt="圆形"/>
        <area shape="poly" coords="287,26,240,66,308,112" href="http://www.sohu.com" target="_blank" alt="多边形"/>
        <a href="index.html" target="in"> index</a>
        <a href="http://www.sina.com" target="in">新浪</a><br/>
        <iframe src="http://www.qq.com"width="1150" height="400" name="in"></iframe>
        <progress min="0" max="1000" style="width: 1000px;" id="pro"></progress>
        <meter value="50" min="10" max="100"></meter>
    </body>
    <script type="text/javascript">
        onload=function(){
            p=document.getElementById("pro")
            s=setInterval(go,300);
            function go(){
                p.value=p.value+50;
                if(p.value>=1000){clearInterval(s); alert("完成")}
            }
        }
    </script>
</html>

新增阴影效果

#Start{
                text-align: center;
                line-height: 70px;
                font-size: 27px;
                font-family:arial;
                color: #b9144c;
                width: 120px; height: 70px;
                background: linear-gradient(#f5eaee,#f5afc7);
                border-radius: 60% 10% 60% 10%;
                box-shadow: 3px 10px 8px #b9144c;
                margin-bottom: 18px;
            }

新增了视频播放功能:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <video src="img/audiovidio/video.webm"  id="video2" width="600px" height="400px"; controls preload="auto" loop poster="img/audiovidio/PLMM.jpg"></video><br/>
        <button>播放</button>
        <button>v--</button>
        <button>v++</button>
        <button>静音</button>
        <button>全屏</button>
        <button>快退</button>
        <button>快进</button>
        <p>播放时间:<span id="playtime">0</span></p>
        <p>总时间:<span id="alltime">0</span></p>
        <progress min="0" max="100" value="0" id="pro"></progress>
    </body>
    <script type="text/javascript">
        
            video2=document.getElementById("video2");
            btn2=document.getElementsByTagName("button");
            playtime=document.getElementById("playtime");
            alltime=document.getElementById("alltime");
            pro=document.getElementById("pro");
            btn2[0].onclick=function(){
                if(this.innerHTML=="播放"){
                    video2.play();
                    alltime.innerHTML=Math.round(video2.duration);
                    this.innerHTML="暂停";
                }else{video2.pause();this.innerHTML="播放"}
                    
                }
            btn2[1].onclick=function(){
                video2.volume-=0.1;
            }
            btn2[2].onclick=function(){
                video2.volume+=0.1;
            }
            btn2[3].onclick=function(){
                if(video2.muted==true){
                    video2.muted=false;
                    this.innerHTML="静音";
                }else{video2.muted=true;this.innerHTML="恢复"}
            }
            btn2[4].onclick=function(){
                video2.mozRequestFullScreen();
                video2.webkitRequestFullScreen();
            }
            btn2[5].onclick=function(){
                video2.currentTime-=10;
            }
            btn2[6].onclick=function(){
                video2.currentTime+=10;
            }
            setInterval(function(){
                playtime.innerHTML=Math.round(video2.currentTime);
                //var m=video2.currentTime/video2.duration;
                pro.value=video2.currentTime/video2.duration*100;
            },1000)
    </script>
</html>

新增了旋转动画功能:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #space{width: 300px;height: 300px; border: 1px solid purple;}
            #sun{
                width:50px;height: 50px;background: linear-gradient(red,orange,yellow);border-radius: 50%;
                position: relative;top: 125px;left: 125px;box-shadow: 0px 0px 20px red;
                -webkit-transform-origin: center;
                -webkit-animation-name: names;
                -webkit-animation-duration: 3s;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-timing-function: linear;
                
                -moz-transform-origin: center;
                -moz-animation-name: names;
                -moz-animation-duration: 3s;
                -moz-animation-iteration-count: infinite;
                -moz-animation-timing-function: linear;
                }
            #sun:hover{-webkit-animation-play-state: paused;}
            #earth{
                width: 30px;height: 30px;background: linear-gradient(green,greenyellow,blue);border-radius: 50%;
                position: absolute;top:35px;left: 22px;
                -webkit-transform-origin: center 110px;
                -moz-transform-origin: center 110px;
            }
            #moon{
                width: 15px;height: 15px;background: linear-gradient(yellow,orange);border-radius: 50%;
                position: absolute;top:10px;left: 30px;
                -webkit-transform-origin: center 40px;
                -webkit-animation: names;
                -webkit-animation-duration: 2s;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-timing-function: linear;
                
                -moz-transform-origin: center 40px;
                -moz-animation: names;
                -moz-animation-duration: 2s;
                -moz-animation-iteration-count: infinite;
                -moz-animation-timing-function: linear;
            }
            #moon:hover{-webkit-animation-play-state: paused;}
            #earthmoon{
                width: 70px;height: 70px; position: absolute;left: 110px;top: 40px;
                -webkit-transform-origin: center 125px;
                -webkit-animation-name: names;
                -webkit-animation-duration: 4s;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-timing-function: linear;
                
                -moz-transform-origin: center 125px;
                -moz-animation-name: names;
                -moz-animation-duration: 4s;
                -moz-animation-iteration-count: infinite;
                -moz-animation-timing-function: linear;
                }
            #earthmoon:hover{-webkit-animation-play-state: paused;}
            @-webkit-keyframes names{
                from{-webkit-transform: rotate(0deg);}
                to{-webkit-transform: rotate(360deg);}
            }
            @-moz-keyframes names{
                from{-moz-transform: rotate(0deg);}
                to{-moz-transform: rotate(360deg);}
            }
        </style>
    </head>
    <body>
        <div id="space">
            <div id="earthmoon">
                <div id="moon"></div>
                <div id="earth"></div>
            </div>
            
            <div id="sun"></div>
        </div>
    </body>
</html>

新增圆形动画效果:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #mycanvas{border: 1px solid blue;}
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="300px" height="300px"></canvas>
    </body>
    <script>
        window.onload=function(){
            canvas=document.getElementById("mycanvas");
            context=mycanvas.getContext("2d");
                var m=0;
                setInterval(change,400);
                function change(){
                    if(m>6){
                        m=0;
                        context.clearRect(0,0,130,130);
                    }
                    context.beginPath();
                    context.arc(0,0,20*m,0,0.5*Math.PI,false);
                    context.strokeStyle="blue";
                    context.stroke();
                    m++;
                }
                context.beginPath();
                context.moveTo(150,150);
                context.quadraticCurveTo(10,100,150,250);
                context.strokeStyle="red"
                context.stroke();
                context.fillStyle="red";
                context.fill();
                
                context.beginPath();
                context.moveTo(150,150);
                context.quadraticCurveTo(300,100,150,250);
                context.strokeStyle="red"
                context.stroke();
                context.font="25px 楷体"
                context.fillText("这是我的文字",80,290);
                context.strokeStyle="aqua";
                context.font="40px 黑体"
                context.strokeText("你好",160,100);
                context.fillStyle="red";
                context.fill();
                
                }     
    </script>
</html>

新增了canvas画布效果:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #mycanvas{border: 1px solid indianred; position: absolute; left: 10px; top: 140px;}
            *{margin: 0;padding: 0;}
        </style>
    </head>
    <body>
        <button onclick="changeColor(‘red‘)">红</button><br/>
        <button onclick="changeColor(‘yellow‘)">黄</button><br/>
        <input type="color" id="col"><br/>
            <button id="rec">矩形</button>
            <button id="line">线形</button><br/>
        <input type="number" id="penwidth">粗细
        <canvas id="mycanvas" width="300px" height="300px"></canvas><br/>
        <button id="erever">橡皮</button>
    </body>
    <script>
        window.onload=function(){
            var mycolor="black";
            function changeColor(m){
                mycolor=m;
            }
            mycanvas=document.getElementById("mycanvas");
            pen=mycanvas.getContext("2d");
            col=document.getElementById("col");
            Rec=document.getElementById("rec");
            line=document.getElementById("line");
            erever=document.getElementById("erever");
            penweight=document.getElementById("penwidth");
            line.onclick=function(){
                mycanvas.onmousedown=function(line){
                pen.beginPath();
                pen.strokeStyle=mycolor;
                pen.strokeStyle=col.value;
                pen.lineWidth=penweight.value;
                x=line.clientX-mycanvas.offsetLeft;
                y=line.clientY-mycanvas.offsetTop;
                pen.moveTo(x,y);
                
                document.onmousemove=function(line){
                    x=line.clientX-mycanvas.offsetLeft;
                    y=line.clientY-mycanvas.offsetTop;
                    pen.lineTo(x,y);
                    pen.stroke();
                }
            }
            document.onmouseup=function(){
                document.onmousemove=null;    
                }
            }
            
            
            rec.onclick=function(){
                mycanvas.onmousedown=function(rec){
                pen.beginPath();
                pen.strokeStyle=col.value;
                x=rec.clientX-mycanvas.offsetLeft;
                y=rec.clientY-mycanvas.offsetTop;
                pen.moveTo(x,y);
                
                document.onmousemove=function(rec){
                    x0=rec.clientX-mycanvas.offsetLeft;
                    y0=rec.clientY-mycanvas.offsetTop;
                    
                    
                    pen.clearRect(x,y,(x0-x-1),(y0-y-1));
                    
                }
            }
            document.onmouseup=function(){
                pen.rect(x,y,(x0-x),(y0-y));
                pen.stroke();
                document.onmousemove=null;    
            }
            }
        }
    </script>
</html>
新增渐变效果:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        p::selection{color: pink;}
            #div1{
                width: 300px;
                height: 300px;
                border: 1px solid blue;
                background: radial-gradient(circle at top left,yellow 0%,orange 50%,red 100%);
                }
            #div2{background: url(img/1.jpg) no-repeat top center;}
        </style>
    </head>
    <body>
        <p>快乐渐变两个</p>
        <div id="div1"></div>
        <div id="div2"></div>
    </body>
</html>

改变背景图颜色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1{
                width: 200px;height: 200px;
                background: red;
                transition: 2s all 1s linear;
            }
            #div1:hover{background: blue;width: 260px; height: 260px;}
        </style>
    </head>
    <body>
        <div id="div1"></div>
        <button id="tran">淅变</button>
    </body>
    <script type="text/javascript">
        window.onload=function(){
            div1=document.getElementById("div1");
            tran=document.getElementById("tran");
            tran.onclick=function(){
                div1.style.background="pink";
                div1.style.width="300px";
                div1.style.height="300px";
            }
        }
    </script>
</html>

以上是关于Css3新增属性的主要内容,如果未能解决你的问题,请参考以下文章

CSS3 新增属性(边框,背景,文字,颜色属性)

border-radius是css3新增属性吗

Css3新增属性

CSS3新增属性

css3新增的表现力极强的几大属性

CSS3新增的哪些选择器和常见的属性是哪些?