css3效果大杂烩

绝地灬酷狼 2022-07-13 09:38 237阅读 0赞

1.  <!DOCTYPE html**>**  
2.  **<****html****>**      
3.  **<****head****>**  
4.  **<****meta** charset="utf-8"**>**   
5.  **<****title****>**菜鸟教程(runoob.com)**</****title****>**   
6.  **<****style****>**   
7.  div  
8.  \{  
9.        
10.     /\*颜色渐变的相关知识\*/  
11.     background: -webkit-linear-gradient(red, blue); /\* Safari 5.1 - 6.0 \*/  
12.     background: -o-linear-gradient(red, blue); /\* Opera 11.1 - 12.0 \*/  
13.     background: -moz-linear-gradient(red, blue); /\* Firefox 3.6 - 15 \*/  
14.     background: linear-gradient(green, \#f32394); /\*颜色的渐变 标准的语法（必须放在最后） \*/  
15.     background: linear-gradient(to bottom right, red , blue); /\*颜色对角的渐变 标准的语法 \*/  
16.     background: linear-gradient(90deg, red, blue); /\* 以某些角度来渐变标准的语法 \*/  
17.     background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /\*颜色渐变有透明度：标准的语法 \*/  
18.       
19.     /\* 径向的颜色渐变\*/  
20.     background: -webkit-radial-gradient(red, green, blue); /\* Safari 5.1 - 6.0 \*/  
21.     background: -o-radial-gradient(red, green, blue); /\* Opera 11.6 - 12.0 \*/  
22.     background: -moz-radial-gradient(red, green, blue); /\* Firefox 3.6 - 15 \*/  
23.     background: radial-gradient(yellow, green, blue); /\* 标准的语法（必须放在最后） \*/  
24.       
25.     background: repeating-radial-gradient(red, yellow 10%, green 15%);/\*重复的径向渐变\*/  
26.       
27.       
28.     width:400px;  
29.       
30.     height:75px;  
31.     background-color:red;  
32.     border:1px solid black;  
33. \}  
34. div\#div2  
35. \{   
36.     /\*背景图片的相关属性:图片所在位置、是否平铺等等\*/  
37.     background-image: url(img\_flwr.gif), url(paper.gif);  
38.     background-size:80px 60px;/\*设置图片大小：也可以是百分比：50% 50% \*/  
39.     background-position: right bottom, left top;  
40.     background-repeat: no-repeat, repeat;  
41.     background-origin:content-box;/\*图片的以哪个元素进行定位\*/  
42.      background-clip: content-box; /\*图片的以哪个元素进行裁剪，有边界\*/  
43.       
44.     /\*边框的属性：角度、背景、圆角、阴影效果\*/  
45.     border:2px solid \#a1a1a1;/\*边界宽度/颜色\*/  
46.     border-radius:25px;/\*边界的角度\*/  
47.     background-color:yellow;/\*背景颜色\*/  
48.     box-shadow: 10px 10px 5px \#888888;/\*阴影效果\*/  
49.     transform:rotate(10deg);/\* 旋转60度\*/  
50.     -ms-transform:rotate(10deg); /\* IE 9 \*/  
51.     -webkit-transform:rotate(10deg); /\* Safari and Chrome   
52.       
53.     -webkit-border-image:url(border.png) 30 30 round; /\* Safari 5 and older \*/  
54.     -o-border-image:url(border.png) 30 30 round; /\* Opera \*/  
55.     border-image:url(border.png) 30 30 round;/\*边界图片修饰\*/  
56.       
57.     width:200px;  
58.       
59.       
60.       
61. \}  
62.   
63. span\#div3  
64. \{  
65.     /\*文字效果设置\*/  
66.     text-shadow: 5px 5px 5px \#FF0000;/\*文字阴影效果\*/  
67.     word-wrap:break-word;/\*换行\*/  
68.     word-break:break-all;  
69.       
70.     -webkit-transition:width 2s; /\* Safari \*/  
71.       
72.     width:500px;  
73.     margin:300px;  
74.       
75.       
76. \}  
77.   
78. /\*鼠标放在上面会有宽度变化的过度效果\*/  
79. div  
80. \{  
81.     width:100px;  
82.     height:100px;  
83.   
84.     /\*鼠标悬浮，有颜色变化的动画效果\*/  
85.     background:red;  
86.     animation:myfirst 5s;  
87.     -webkit-animation:myfirst 5s; /\* Safari and Chrome \*/  
88.       
89.     background:red;  
90.     transition:width 2s;/\*宽度的变化\*/  
91.     -webkit-transition:width 2s; /\* Safari \*/  
92.       
93.      transition: width 2s, height 2s, transform 2s;/\*多个效果的组合\*/  
94.     -webkit-transition: width 2s, height 2s, -webkit-transform 2s;  
95. \}  
96.   
97. div:hover  
98. \{  
99.     width:300px;  
100.     height: 200px;  
101.     transform: rotate(180deg);  
102. \}  
103.       
104. /\*鼠标悬浮，有颜色变化的动画效果\*/   
105. @keyframes myfirst  
106. \{  
107.     from \{background:red;\}  
108.     to \{background:yellow;\}  
109. \}  
110. /\*鼠标悬浮，有颜色变化的动画效果\*/  
111. @-webkit-keyframes myfirst /\* Safari and Chrome \*/  
112. \{  
113.     from \{background:red;\}  
114.     to \{background:yellow;\}  
115. \}  
116.       
117. **</****style****>**  
118. **</****head****>**  
119. **<****body****>**  
120.   
121. **<****div****>**css3的所有效果总结**</****div****>**  
122.   
123. **<****div** id="div2"**>**你好。这是一个 DIV 元素。**</****div****>**  
124.       
125. **<****span** id="div3"**>**文字相关的效果，是否支持换行的呢，我来测测看，看看是否会换行the word will turn around**</****span****>**  
126.       
127. **<****p****>**鼠标移动到 div 元素上，查看过渡效果。**</****p****>**  
128.   
129. **</****body****>**  
130. **</****html****>**