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>
        <div class="box z">
            <img src="img/frong.png">
            
        </div>
        
    </div>
        
</body>
</html>

一张图片悬停翻转背面出现内容：

父元素设置position:relative;

子元素设置position:absolutive;

运用了层定位：父元素用了相对定位，另个子元素都用了决定定位，丢失了原有文档流的位置所以两个子元素front,back重叠在一起。

背面子元素设置初始状态就翻转180度；

//图片翻转是文字（chrome）
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>D</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #0d3462;
        }
        #pic{
            width: 760px;
            height: 220px;
            margin: 100px auto;
            

        }
        .picbox{
            float: left;
            width: 170px;
            height: 190px;
            margin: 5px;
            position: relative;
            transform-style: preserve-3d;
            transition:1.5s;


        }
        .picbox:hover{
            transform: rotateY(180deg);
        }
        .face{
            width: 170px;
            height: 190px;
            position: absolute;

        }
        .font{
            border: 2px solid #4b2518;

        }
        .back{
            
            transform: rotateY(180deg);
            background-color: #4b2518;
            border: 2px solid #fff;
            
        }
        .back h3{
            color: white;/*文字颜色*/
            text-align: center;/*文本内容：居中对齐*/

        }
    </style>
</head>
<body>
    <div id="pic">
        <div class="picbox">
            <div class="face front"><img src="img/1.jpg" alt=""></div>
            <div class="face back"><h3>浓缩咖啡</h3></div>      
                
        </div>
        <div class="picbox">
            <div class="face front"><img src="img/2.jpg" alt=""></div>
            <div class="face back"><h3>浓缩咖啡</h3></div>          
        </div>
        <div class="picbox">
            <div class="face front"><img src="img/3.jpg" alt=""></div>
            <div class="face back"><h3>浓缩咖啡</h3></div>          
        </div>
        <div class="picbox">
            <div class="face front"><img src="img/4.jpg" alt=""></div>
            <div class="face back"><h3>浓缩咖啡</h3></div>          
        </div>
        
    </div>
</body>
</html>

posted @ 2019-09-27 16:02 Evident 阅读(269) 评论(0) 编辑收藏举报

刷新页面返回顶部

Evident

css3

css3

1.圆角边框与阴影

1.1圆角边框border-radius属性：

1.2阴影 box-shadow属性

2.文本与文字

2.1text-shadow属性

2.2word-wrap属性

2.3@font-face规则

3.css3中的2D 转换方法

3.1旋转transform:rotate()

3.2缩放transform:scale()

4.css3 过渡与动画

4.1过渡transition属性

4.2动画

animation动画

5.css3的3D变换

公告