css3

最新推荐文章于 2024-09-05 16:15:02 发布

aiyanfa0733

最新推荐文章于 2024-09-05 16:15:02 发布

阅读量164

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/evident/p/11598514.html

版权

css3

1.圆角边框与阴影

文本阴影：

鼠标悬停动态效果：图片上停留出现说明文字

文字排版分列：文字分为两列，类似报刊

盒子：圆角边框，阴影，倾斜，旋转效果。

浏览器前缀表:(w3school)

浏览器内核	浏览器	css3前缀
Webkit	Safari	-webkit-
Webkit	Chrome	-webkit-
Gecko	Firefox	-moz-
Presto	Opera	-o-
Trident	IE	-ms-

1.1圆角边框border-radius属性：

border-top-left-radius左上角的形状

border-top-right-radius 右上角的形状

border-bottom-left-radius 左下角的形状

border-bottom-right-radius 右下角的形状

border-radius：水平值垂直值

//方型，对角椭圆
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>D</title>
 <style type="text/css" media="screen">
  div{
   height: 100px;
   width: 150px;
   border:1px solid blue;
   border-top-left-radius: 40px 20px;
   border-bottom-right-radius: 20px;
  }
 </style>
</head>
<body>
 <div>
  
 </div>
</body>
</html>

//导航栏格式，两头圆
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>D</title>
 <style type="text/css" media="screen">
  div{
   height: 50px;
   width: 350px;
   border:2px solid #a1a1a1;
   background:#ddd;
   border-radius: 25px;//上下左右都是25px;
  }
 </style>
</head>
<body>
 <div>
  
 </div>
</body>
</html>

//圆形 width=height&&border-radius=0.5*height
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>D</title>
 <style type="text/css" media="screen">
  div{
   height: 50px;
   width: 50px;
   border:2px solid #a1a1a1;
   background:#ddd;
   border-radius: 25px;
  }
 </style>
</head>
<body>
 <div>
  
 </div>
</body>
</html>

sublime里面用 bdrs扩展 -webkit-border-radius:|;

-moz-border-radius:|;

border-radius:|;

1.2阴影 box-shadow属性

inset 水平偏移垂直偏移模糊距离颜色；

inset 可选，内部阴影

outset 默认值，外部阴影

//阴影
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>D</title>
 <style type="text/css" media="screen">
  div{
   height: 100px;
   width: 300px;
   background-color: #f90;
   box-shadow: 10px 10px 5px #888;//10px都是指阴影位置，5px指模糊范围，#888指阴影颜色
  }
 </style>
</head>
<body>
 <div>
  
 </div>
</body>
</html>

bxsh扩展

-webkit-box-shadow:inset hoff voff blur color;

-moz-box-shadow:inset hoff voff blur color;

box-shadow:inset hoff voff blur color;

2.文本与文字

2.1text-shadow属性

水平偏移垂直偏移阴影大小颜色 <h1>Web Design<h1>

//阴影

h1{

text-shadow:2px 2px #FF0000;

}

//模糊背景

h1{

text-shadow:2px 2px 8px blue;//8px是模糊大小

}

h1{

text-shadow:0 0 3px #F00;//阴影位置没有偏移，阴影与原位置重合=描边

}

h1{

color:white;//文字设为白色

text-shadow:2px 2px 4px #000;//投影设为黑色

}

2.2word-wrap属性

允许长单词、URL强制进行换行

word-wrap属性：normal 、break-word(防止溢出效果)

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>D</title>
 <style type="text/css">
  p.wdrp{
   width: 8em;
   border: 1px solid #333;
   word-wrap: break-word;
  }
 </style>
</head>
<body>
 <p class="wdrp">这是最长的英文单词，pneumonoultramicroscopicsilicovolcsandfjhsisi.</p>
</body>
</html>

2.3@font-face规则

利用@font-face规则，定义web字体，并引用需要字体的四种文件格式，确保能在主流浏览器中都能正常显示该字体。

字体文件后缀	适用于浏览器
.TTF或.OTF	Firefox ,Safari,Opera
.EOT	interner Explorer 4.0+
.SVG	Chrome,IPhone
.WOFF	Chrome,Firefox

下载字体只有一种.ttf格式。生成其他格式https://www.fontsquirrel.com/tools//webfont-

//特殊字体的显示
<style type="text/css">
  @font-face{
   font-family: kastlerFont;/*定义字体的名称,可以起新的名字*/
   src:url('fonts/kastler.ttf'),
    url('fonts/kastler.eot'),
    url('fonts/kastler.woff'),
    url('fonts/kastler.svg');
  }/*指明下载的字体来源*/
  p{
   font-family: kastlerFont;
  }
 </style>

3.css3中的2D 转换方法

2D转换方法：

对元素进行旋转、缩放、移动、拉伸

transform属性

rotate()旋转

scale()缩放

3.1旋转transform:rotate()

transform:rotate( deg);

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>D</title>
 <style type="text/css">
  div{
   width: 100px;
   height: 75px;
   background-color: #ccc;
   border: 1px solid black;
  }
  #rotateDiv{
   transform: rotate(30deg);//30deg：旋转角度，-30deg逆时针旋转
  }
 </style>
</head>
<body>
 <div id="container">
  <div>web前端开发</div>
  <div id="rotateDiv">web前端开发/div>
  
 </div>
</body>
</html>

3.2缩放transform:scale()

transform:scale(x,y)

x:水平方向的缩放倍数

y:垂直方向的缩放倍数，若省略，同x

0~1，缩小；>1放大

.box:hover{
    transform:scale(1,2);
}

4.css3 过渡与动画

4.1过渡transition属性

将元素的某个属性从“一个值”在指定的时间内过渡到“另一个值”。

transition 属性名持续时间过度方法
transition-property 属性名|all 对哪个属性进行变化
transition-duration 持续时间

transition-timing-function 过渡使用的方法（函数）

值	描述
linear	匀速
ease	慢快慢
ease-in	慢快
ease-out	快慢
ease-in-out	慢快慢

//盒子中字体的颜色和背景都变了
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>D</title>
 <style type="text/css" media="screen">
  div{
   height: 30px;
   width: 100px;
   line-height: 30px;
   border-radius: 5px;//圆角边框
   color: #000;//文字颜色
   background-color: silver;//背景颜色
   transition: all is linear;//所有属性都变化，linear匀速变化
  }
  div:hover{//变化后的效果
   color: white;
   background-color: #45B832; 
  }
 </style>
</head>
<body>
 <div>
  web design
 </div>
</body>
</html>

transition-delay

4.2动画

@keyframes

animation属性

animation动画

1.定义动画：采用@keyframes规则

2.调用动画：animation属性

//背景颜色动画渐变
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>D</title>
 <style type="text/css" media="screen">
  @keyframes mycolor{//mycolor动画的名字
   0% {background-color: red;}//0%表示关键帧动画出现的时刻，background-color表示当前关键帧状态下某个属性取值。
   30% {background-color: blue;}
   60% {background-color: yellow;}
   100% {background-color: green;}
  }
  div:hover{
   animation: mycolor 5s linear;//animation属性播放mycolor动画,利用5s时间完成动画播放。
  }
 </style>
</head>
<body>
 <div>
  web sigin
 </div>
</body>
</html>

animation属性

值	描述
animation	简写
animation-name	引用@keyframes动画的名称
animation-duration	动画完成时间
animation-timing-function	规定动画的速度曲线。默认是"ease".
animation-play-state	running\|paused

5.css3的3D变换

5.1 3D

transform-style:preserve-3d

5.2旋转 transform属性

rotateX()

rotateY() 角度deg 60deg

rotateZ()

5.3透视 perspective属性

像素值越小离舞台越近。

父容器：旋转

transform-style:preserve-3d;

transform:rotateY(60deg);
舞台：透视关系

眼睛到舞台的距离 perspective:100px;

像素值越小离舞台越近,效果越明显。

//?3d旋转
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>D</title>
 <style type="text/css" media="screen">
  #stage{
   width: 300px;
   margin:100px auto;
   perspective: 100px;
  }
  .box{
   width: 100px;
   height: 100px;
   float:left;
   transition: linear 1s;
   transform-style: preserve-3d; 
  }
  img{
   width: 75px;
   height:100px;
  }
  .x:hover{
   transform: rotateX(60deg);

  }
  .y:hover{
   transform: rotateY(60deg);
  }
  .z:hover{
   transform: rotateZ(60deg);
  }

 </style>
</head>
<body>
 <div id="stage">
  <div class="box x">
   <img src="img/frong.png">
   
  </div>
  <div class="box y">
   <img src="img/frong.png">
   
  </div>
  <

转载于:https://www.cnblogs.com/evident/p/11598514.html

aiyanfa0733

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3

css31.圆角边框与阴影文本阴影：鼠标悬停动态效果：图片上停留出现说明文字文字排版分列：文字分为两列，类似报刊盒子：圆角边框，阴影，倾斜，旋转效果。浏览器前缀表:(w3school)浏览器内核浏览器css3前缀WebkitSafari-webkit-WebkitChrome-webkit-...
复制链接

扫一扫