css3 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="utf-8">
  5     <title>css3</title>
  6     圆角边框：
  7         border-radius属性：
  8                 border-radius：水平值 垂直值  两个值一样时，写一个
  9                 border-top-left-ridius：左上角的形状
 10                 border-top-right-ridius：右上角的形状
 11                 border-bottom-left-ridius：左下角的形状
 12                 border-bottom-right-ridius：右下角的形状
 13             如果画圆形，水平值=垂直值=1/2正方形边长    
 14     阴影：
 15         box-shadow属性：
 16                 box-shadow：inset/outset 水平偏移 垂直偏移 模糊距离 阴影颜色
 17                 inset：可选，内部阴影
 18                 outset：默认值，外部阴影
 19                 水平偏移、垂直偏移都为正数，则阴影向右下角偏移；都为负数，则阴影都向左上角偏移
 20 
 21     文本与文字：
 22         text-shadow属性：设置文本阴影属性，可以设置字体效果
 23                 text-shadow：水平偏移 垂直偏移 阴影大小 阴影颜色；    阴影大小可以省略
 24                 水平偏移、垂直偏移都为正数，则阴影向右下角偏移；都为负数，则阴影都向左上角偏移
 25         word-wrap属性：设置长文本换行属性，允许长单词、url强制换行
 26                 normal:正常显示，默认不拆分
 27                 break-word:拆分成若干行
 28         @font-face规则：定义网页字体即web字体,放在服务器上，需要时下载使用
 29                 字体格式文件后缀：.TTF、.OTF、.EOT、.SVG、.WOFF；支持不同的浏览器
 30                 生成其他格式字体网站：https://www.fontsquirrel.com/tools/webfont;提供一种字体，转换成其他格式，下载使用
 31                 使用@font-face规则，引用的字体名称font-family的值要相同,如下:P{font-family:FontName;}
 32 
 33     2D转换方法：对元素进行平面上旋转、缩放、移动、拉伸
 34         transform属性：
 35                 rotate():旋转函数，单位为deg，值可以是正负值，如：transform:rotate(xx deg);
 36                          正值顺时针旋转，负值逆时针旋转
 37                 scale():缩放函数，如：transfrom:scale(x,y);
 38                         x-水平方向缩放的倍数，y-垂直方向缩放的倍数，y若省略，值同x；
 39                         0-1：缩小；>1:放大
 40 
 41     过度：从一种状态过度都另一种状态，两种状态之间的变化
 42         transition属性：将元素的某个属性从“一个值”在指定的时间内过度到“另一个值”
 43                 transition: 属性名 持续时间 过度方法 延迟时间
 44                 transition-property属性：属性名/all；多个属性名用逗号隔开；  对哪个属性进行变化
 45                 transition-duration属性：持续时间
 46                 transition-timing-function属性：过度使用的方法（函数）；过度的效果
 47                         属性取值：
 48                                 linear：匀速
 49                                 ease：慢快慢
 50                                 ease-in：慢快
 51                                 ease-out：快慢
 52                                 ease-in-out：慢快慢
 53                 transition-delay属性:延迟开始播放时间
 54 
 55     动画：一个元素通过animation属性来完成若干种状态之间的一个转换
 56         动画规则：@keyframes:关键帧
 57             @keyframes mycolor{定义动画名称；播放图片可以设置：50%{background: url(image/image-05.jpg);}
 58                 0%   {background-color: red;}         定义每个动画状态名称，0%表示开始状态
 59                 30%  {background-color: blue;}        30%表示动画进行到30%状态
 60                 60%  {background-color: yellow;}    60%表示动画进行到60%状态
 61                 100% {background-color: green;}        100%表示动画结束状态
 62             }
 63         animation属性：
 64             #anima:hover{
 65                 animation: mycolor 5s linear;
 66                            简写方式：mycolor表示调用动画规则的名称，5s表示动画（0%-100%）完成的时间，linear表示动画播放的方法
 67                 animation-name：引用@keyframes动画的名称
 68                 animation-duration：动画完成的时间
 69                 animation-timing-function：动画的播放方式，规定动画的速度曲线，默认是ease
 70                 animation-play-state：running/paused，表示动画播放中或者结束状态，可以设置鼠标悬停时播放或者结束
 71             }
 72 
 73     3D变换
 74         3D：transfrom-style：perserve-3d,声明这是个3D变换,要使用3d变换，必须设置3d声明
 75         旋转：
 76             transform属性：空间上的旋转角度XYZ deg，沿着XYZ轴旋转，z轴垂直于XY轴
 77                 rotateX(n deg)：沿着X轴旋转,n为旋转角度，deg为单位
 78                 rotateY(n deg)：沿着Y轴旋转
 79                 rotateZ(n deg)：沿着Z轴旋转
 80             transfrom:rotateX(60deg);表示沿X轴旋转60度
 81         透视：perspective属性: 近大远小，表示视线的距离，值越大则越不明显，值越小则越明显
 82              perspective：100px;视线的距离为100px；
 83 
 84     <style type="text/css">
 85     #box{
 86         text-align: center;
 87         height: 100px;
 88         width: 150px;
 89         border: 1px solid blue;
 90         border-top-left-radius: 40px 20px;
 91         border-bottom-right-radius: 20px;
 92         box-shadow: 20px 20px 10px #888
 93     }
 94     #text{
 95         margin: 100px auto;
 96         height: 100px;
 97         width: 200px;
 98         border: 1px solid blue;
 99         text-shadow: 2px 2px 1px #FF0000;
100     }
101     p.wrap{
102         width: 8em;
103         border: 1px solid #333;
104         word-wrap: break-word;
105     }
106     @font-face{
107         font-family: FontName；
108         src:url('fonts/kastler.ttf'),
109             url('fonts/kastler.eot'),
110             url('fonts/kastler.woff'),
111             url('fonts/kastler.svg');
112     }
113     p{
114         font-family: FontName;
115     }
116     div{
117         width: 100px;
118         height: 75px;
119         background-color: #ccc;
120         border: 1px solid black;
121     }
122     #rotateDiv{
123         transform: rotate(30deg);
124     }
125     #box1{
126         margin: 100px auto;
127     }
128     #box1:hover{
129         transform: scale(1.2);
130     }
131     #trsf{
132         margin: 100px auto;
133         height: 30px;
134         width: 150px;
135         border-radius: 5px;
136         color: #000;
137         background-color: silver;
138         transition: all 3s linear 3s;
139     }
140     #trsf:hover{
141         color: white;
142         background-color: #45B823;
143     }
144     @keyframes mycolor{
145         0% {background-color: red;}
146         30% {background-color: blue;}
147         60% {background-color: yellow;}
148         100% {background-color: green;}
149     }
150     @keyframes img{
151         0%{background: url(image/image-03.jpg);}
152         50%{background: url(image/image-05.jpg);}
153         100%{background: url(image/image-06.jpg);}
154     }
155     #anima:hover{
156         animation: img 5s linear 2s;
157     }
158     #anima{
159         margin: 100px auto;
160     }
161     #stage{
162         width: 306px;
163         height: 101PX;
164         margin: 100px auto;
165         perspective: 100px;
166     }
167     .box3{
168         width: 100px;
169         height: 100px;
170         float: left;
171         transition: 1s linear 5s;
172         transform-style: preserve-3d;
173     }
174     img{
175         width: 100px;
176         height: 100px;
177     }
178     .x:hover{
179         transform: rotateX(60deg);
180     }
181     .y:hover{
182         transform: rotateY(60deg);
183     }
184     .z:hover{
185         transform: rotateZ(60deg);
186     }
187 
188 
189     </style>
190 </head>
191 <body>
192     <h1></h1>
193     <p class="wrap">ASDFGHJKLZXCVBNMQWERTYUIOP</p>
194     <div id="box">圆角边框及阴影</div>
195     <div id="text">文本阴影</div>
196     <div id="container">
197         <div>正常角度</div>
198         <div id="rotateDiv">旋转角度</div>
199     </div>
200     <div id="box1">鼠标悬停放大缩小效果</div>
201     <div id="trsf">鼠标悬停过度效果</div>
202     <div id="anima">鼠标悬停动画播放效果</div>
203     <div id="stage">
204         <div class="box3 x">
205             <img src="image/image-03.jpg">
206         </div>
207         <div class="box3 y">
208             <img src="image/image-05.jpg">
209         </div>
210         <div class="box3 z">
211             <img src="image/image-06.jpg">
212         </div>
213         
214     </div>
215     <br/>
216     <br/>
217     <br/>
218 </body>
219 </html>

 

posted @ 2019-09-02 21:44  cty136  阅读(386)  评论(0)    收藏  举报