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新增属性的主要内容，如果未能解决你的问题，请参考以下文章