首页 > > 网页制作 > css >

Css3新增属性

2018-06-24 00:20:19来源：未知阅读 ()

新增了透明功能:

#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 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>