2. 程式人生 > >css常用屬性以及動畫效果程式碼

css常用屬性以及動畫效果程式碼

阿新 • • 發佈：2018-11-20

/*css常用效果，直接可以執行，基本包含了大部分樣式使用以及簡單動畫的實現*/


<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8"> 
<title>css-test(runoob)</title> 

<style>

#divBox{
position: relative;
}
div#div1,#div2,#div3
{
width:100px;
height:75px;
background-color:red;
padding: 20px;

border:3px solid black;
background-clip: padding-box;
    box-shadow:5px 5px 2px #888888  ;
}
div#div1{
/*改變位置*/
-webkit-transform:translate(100px,10px); /* Safari and Chrome */
/*改變與原來大小相比的比例*/
-webkit-transform: scale(0.9,0.8); /* Safari */
/*xy方向旋轉*/
/*-webkit-transform: skew(30deg,3deg);*/
/*-webkit-transform: skewX(10deg)/skewY();*/
/*matrix()方法和2D變換方法合併成一個。
    matrix 方法有六個引數，包含旋轉，縮放，移動（平移）和傾斜功能。*/
    -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
    /*transition: 2s;*/
     -webkit-transition: width 0.1s, height 1.4s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    /*transition: width 2s, height 0.1s, transform 4s;*/
    /*-webkit-transition:2s;*/
}
/*transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;*/
/* Safari */
/*-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;*/

/*transition: width 1s linear 2s;*/
    /* Safari */
    /*-webkit-transition:width 1s linear 2s;*/
div#div1:hover{
width:200px;
height: 150px;
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
}
div#div2
{
display: inline-block;

transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
box-shadow: 10px 10px 5px #888888;
background-clip: content-box;
text-shadow: 5px 5px 2px #888888 ;
/*content-box,padding-box,border-box*/

}
div#div3{
position: absolute;
right:0;
top: 0;
-webkit-transform:rotateX(60deg); 
/*-webkit-transform:rotateY(160deg);*/
}
#tdiv1
{   
display: inline-block;
float:right;
position: relative;
height: 200px;
width: 200px;
padding:10px;
border: 1px solid black;
perspective:150;
-webkit-perspective:220; /* Safari and Chrome */
perspective-origin: 10% 10%;
/*backface-visibility: visible|hidden;*/
}
#tdiv2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari and Chrome */
-webkit-transform-style: preserve-3d; /* Safari and Chrome */
/*transform-style: flat|preserve-3d;*/
}


#tdiv3
{
padding:40px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateY(-60deg);
-webkit-transform: rotateY(-60deg); /* Safari and Chrome */


}
#round,#stretch
{
border:15px solid transparent;
width:250px;
padding:10px 20px;
}


#round
{
-webkit-border-image:url(images/border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(images/border.png) 30 30 round; /* Opera */
border-image:url(images/border.png) 30 30 round;
resize:both;
overflow:auto;
}
#stretch
{
*-webkit-border-image:url(images/border.png) 30 30 stretch; /* Safari 5 and older */*/
-o-border-image:url(images/border.png) 30 30 stretch; /* Opera */
border-image:url(images/border.png) 30 30 stretch;
}
#filterImg{
-webkit-filter: grayscale(50%);
/*filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() 
| hue-rotate() | invert() | opacity() | saturate() | sepia() | url();*/
}
/*border-top-right-radius
    border-radius: 50px/15px;
    border-radius: 15px/50px;
    */
.circle {
    border-radius:50%;
    background: red;
    padding: 20px; 
    width: 100px;
    height: 75px;
    display: inline-block;
} 
#rcorners9
{
/*animation:myfirst 5s;*/
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
/*@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}*/


@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
#rcorners10
{    
    opacity: 0.7;

/*animation:myfirst 5s;*/
-webkit-animation:myfirst2 5s; /* Safari and Chrome */
}
@-webkit-keyframes myfirst2 /* Safari and Chrome */
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}
/*#rcorners12*/
{    
position: relative;

width:30px;
height:30px;
background:red;
/*animation:myfirst 5s;*/
 
-webkit-animation:myfirst3 5s;  /*Safari and Chrome */
     -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    /*-webkit-animation: myfirst3 5s linear 2s infinite alternate;*/
    
}
@-webkit-keyframes myfirst3{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:100px; top:0px;}
50%  {background:blue; left:100px; top:100px;}
75%  {background:green; left:0px; top:100px;}
100% {background:red; left:0px; top:0px;}
}


/*#example1 {
    background-image: url(images/pen.png), url(images/paper.png);
    background-position: right  bottom, left top ;
    background-repeat: no-repeat, repeat ;
    padding: 15px;
}*/
#round,#stretch
{
background-image:url('images/jy_suess.png');
background-repeat:no-repeat;
background-position:left;
}
#example1 {
    background: url(images/flower.png) right bottom  no-repeat, url(images/paper.png) left top repeat;
    padding: 15px;
    box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2),  0 6px 20px 0 rgba(0, 0, 0, 0.19);/*卡片效果*/
    word-wrap:break-word;
    /*word-break:keep-all;*/
    /*word-break:break-all;*/


}
h2
{
/*-webkit-column-span:all; /* Safari and Chrome */
}
#column{
-webkit-column-count:2;
-webkit-column-gap:10px;
/*-webkit-column-rule-style:solid;
-webkit-column-rule-color: lightblue; */
-webkit-column-rule: 3px dotted lightblue;
}


#round
{
background-origin:border-box;
}
#stretch
{
background-origin:content-box;
}
/*content-box,padding-box,border-box*/
#grad1 {
    height: 20px;
    background: -webkit-linear-gradient(left,yellow, red); /* Safari 5.1 - 6.0 */
    /*background: -webkit-linear-gradient(yellow, red); /* Safari 5.1 - 6.0 */*/
    /*background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */*/
    /*background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */*/
    /*background: linear-gradient(red, blue); /* 標準的語法（必須放在最後） */*/
}
#grad2{
height: 80px;
width: 20px;
margin-top: 10px;
background: linear-gradient(yellow,red) ;
display: inline-block;
}
#grad3{
height: 80px;
width: 150px;
margin-top: 10px;
display: inline-block;
    background: linear-gradient(to bottom right, yellow , red); /* 標準的語法（必須放在最後）*/
}
#grad4{
height: 80px;
width: 70px;
margin-top: 10px;
display: inline-block;
    background: linear-gradient(45deg, yellow , red);
}
#grad5{
height: 80px;
width: 70px;
margin-top: 10px;
display: inline-block;
    background: linear-gradient(green,yellow , red);
}
#grad6{
height: 80px;
width: 70px;
margin-top: 10px;
display: inline-block;
    background: linear-gradient(green 10%,yellow 20%, red 70%);
}
#grad7{
height: 30px;
margin-top: 5px;
    background: repeating-linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1));
}
#grad8{
height: 30px;
margin-top: 5px;
    background: repeating-linear-gradient(to right,red, yellow 10%, green 20%); /* 標準的語法（必須放在最後） */
}
#grad9 {
display: inline-block;

    height: 80px;
    width: 100px;
    background: radial-gradient(circle,red, orange, yellow); 
    /*background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);*/
    /*closest-side
farthest-side
closest-corner
farthest-corner*/
/*repeating-radial-gradient*/
}
    /*text-overflow:ellipsis/hidden/clip*/


div.container
{
width:30em;
border:1em solid;

}
div.box
{
box-sizing:border-box;
width:50%;
border:1em solid red;
float:left;

}
#grad10 {
display: inline-block;
margin-left: 5px;
    height: 40px;
    width: 50px;
    outline:2px solid red;
    outline-offset:5px;
-webkit-appearance:button;
/*appearance: normal|icon|window|button|menu|field;*/


}


</style>

</head>
<body>
<div id="div1">你好。這是一個 DIV 元素。</div>
<div id="div2">你好。這是一個 DIV 元素。</div>
<div id="div3">你好。這是一個 DIV3D 元素。</div>

<div id="tdiv1">
<div id="tdiv2">HELLO
  <div id="tdiv3">YELLOW</div>
</div>
</div>




<p><b>注意: </b> Internet Explorer 不支援 border-image 屬性。</p>
<p> border-image 屬性用於設定圖片的邊框。</p>


<div id="round">這裡，影象平鋪（重複）來填充該區域。</div>
<br>
<div id="stretch">這裡，影象被拉伸以填充該區域。</div>
<p>這是我們使用的圖片素材：</p>
<img id="filterImg" src="images/border.png" />


<p>橢圓邊框 - border-radius: 50%  && animiation:</p>
<p class="circle"  id="rcorners9"></p>
<p class="circle" id="rcorners10"></p>
<div id="rcorners12"></div>


<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p id="column">
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</div>




<h3>線性漸變 - 從上到下</h3>
<p>從頂部開始的線性漸變。起點是紅色，慢慢過渡到藍色：</p>


<div id="grad1"></div>
<div id="grad2"></div>
<div id="grad3"></div>
<div id="grad4"></div>
<div id="grad5"></div>
<div id="grad6"></div>
<div id="grad7"></div>
<div id="grad8"></div>
<div id="grad9"></div>
<div id="grad10"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支援漸變。</p>


<div class="container">
<div class="box">這個 div 佔據了左邊的一半。.</div>
<div class="box">這個 div 佔據了右邊的一半。</div>
</div>
</body>
</html>

相關推薦

css常用屬性以及動畫效果程式碼

/*css常用效果，直接可以執行，基本包含了大部分樣式使用以及簡單動畫的實現*/ <!DOCTYPE html> <html> <head> <meta charset="utf-8">  <title>

CSS常用屬性

position 縮進 cin 頁面 cli 距離 oat let ica 01. CSS背景屬性(Background) 屬性與描述 　　background：在一個聲明中設置所有的背景插件1 　　background-attachment：設置背景圖像是

第五章 CSS常用屬性筆記

nta 鼠標 :active 樣式 per tom vertica style cti 1. span標簽 突顯，強調局部文字的作用. 2.字體樣式 font-size: 字體大小 font-style:normal,italic(傾斜) font-weight:n

web開發中常用的jquery動畫效果

1、隱藏&顯示 設定元素的隱藏，顯示功能，語法如下： jquery show(speed ，callback); jquery hide(speed ，callback); jquery togger(speed ，callback); 說明：引數不是必須的，在

CSS 常用屬性

隱藏 1、display:none：隱藏，且不佔空間 2、visiblity:hidden：隱藏，並佔空間 3、overflow:hidden：隱藏超出部分 選擇器 id選擇器（#name）、類選擇器（.name）、標籤選擇器（div，p）、相鄰兄弟選擇器（div + p）、

css實現盾牌的動畫效果

直接上程式碼：用偽類選擇器去選擇每個圖片，再進行2d動畫的實現 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

你不知道的CSS常用屬性（不斷更新，未完待續）

顏色 HEX(16進位制色：color:#FFF000)。 RGB(紅綠藍：color:rgb(255,255,0)或color:rgb(100%,100%,20%))。 RGBA(紅綠藍透明度：color:rgba(255,255,0,0.5)。 HSL(

CSS常用屬性和值

1.字型 <html> <head> <title>font</title> <style> h1{ font-family:times,courter;

css常用屬性及屬性值

1.font：加粗 傾斜 大小 型別（font-weight; font-style; font-size;color） 2.text-decration: none underline overline line-through 3.text-shadow:水平位移值 垂

用純CSS實現載入中動畫效果

HTML &lt;div class="pswp__preloader__icn"&gt; &lt;div class="pswp__preloader__cut"&gt; &lt;div class="pswp__preloader__donut"&

CSS常用屬性(筆記)

#Note { color: green; /*設定字型顏色*/ background-color: red; /*設定背景顏色*/ font-size: 50px; /*設定字型大小*/ font-style: oblique; /*使

IOS UITableViewCell常用幾種動畫效果

前言：Cell常用幾種動畫效果 第一種動畫：從左到右，由小變大 CATransform3D transform = CATransform3DIdentity; transform = CAT

jQuery 多種高階頁面屬性和動畫效果

完成目標：利用jQuery語法完成多種頁面屬性和動畫效果 1.文字淡入淡出，顯示及隱藏。 程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

Android ViewPager多頁面滑動切換以及動畫效果

一、首先，我們來看一下效果圖，這是新浪微博的Tab滑動效果。我們可以手勢滑動，也可以點選上面的頭標進行切換。與此同方式， 白色橫條會移動到相應的頁卡頭標下。這是一個動畫效果，白條是緩慢滑動過去的。好了，接下來我們就來實現它。 二、在開始前，我們先要認識一個控制元件，ViewPager。它是google

HTML常用標籤彙總、CSS常用屬性彙總

  HTML標籤彙總 標籤名 屬性 及其取值 作用 單詞意思 是否記住 <a> href

Android-TextView 控件常用屬性以及基本用法

pan left 第一個 。。 android img 上下 ips 插入 前言 　　這是我第一次寫博客，第一次的筆記，不足之處多諒解。開門見山，這一篇博客主要講一下在Android開發中，UI控件TextView的一些使用方式，主要介紹一些常用的屬性，加上一些實例，希望大

TransitionDrawable使用以及動畫效果

一個TransitionDrawable是一個特殊的Drawable物件，可以實現兩個drawable資源之間淡入淡出的效果。 兩種形式實現：1.通過alphaAnimation實現2.通過trans

CSS偽類選擇器和CSS常用屬性

1:CSS偽類選擇器 1) 四種狀態: link:未訪問過的狀態  hover: 滑鼠停留在上面的狀態    active: 滑鼠點選時的狀態   visited: 訪問過後的狀態 2) 順序: 如果想讓四種狀態一直可以使用,必須按照link visited hover

好程式設計師web前端分享css常用屬性縮寫

好程式設計師web前端分享css常用屬性縮寫，使用縮寫可以幫助減少你CSS檔案的大小，更加容易閱讀。css縮寫的主要規則如下： 　

css中常用效果程式碼

1.子div垂直居中顯示常用的css .box { width: 100%; height: 100%; display: flex;//flex佈局 justify-content: center;//使子專案水平居中 align-items: