Css3新增属性

日期：2022-04-30 栏目：程序人生浏览：次

新增了透明功能:

#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="http://www.likecs.com/img/audiovidio/花の子ルンルン.mp3"autoplay preload="auto" loop controls></audio>
       <ul>
           <li title="http://www.likecs.com/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

转载注明出处：https://www.heiqu.com/zzdpdw.html

Css3新增属性

相关推荐