0
点赞
收藏
分享

微信扫一扫

【CSS3】一些听课记录（样例代码）

捡历史的小木板 2022-03-27 阅读 29
前端vue.js小程序

这里写自定义目录标题

-前端兼容性自查工具 caniuse

简单放大效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        text-align: center;
        margin-top: 200px;
    }
    img{
        width: 200px;
        height: 200px;
        border-radius: 50%;
        
        -webkit-transition: all 0.5s;//兼容不同浏览器的不同前缀
        -o-transition: all 0.5s; //持续时间 0.5s
        
        cursor: pointer;//手
    }
    img:hover{
        transform: scale(1.1); //放大1.1倍
    }
</style>
<body>
    <img src="./../123.jpg" alt="">
</body>
</html>

在这里插入图片描述在这里插入图片描述

伪类

伪类选择器

不存在html中但是能选中改变样式
  • 动态伪类选择器
    1. :link
    2. :visited
    3. :hover
    4. :active

状态选择器

<style type='text/css'>

	input:enabled{// input框可用时
	}
	input:disabled{// input框禁用时
	}
	radio:disabled{
	}
	...
</style>

结构伪类选择器

<style type='text/css'>

	li:first-child{ //选择第一个子元素
	}
	li:last-child{//选择最后一个子元素
	}

	li:nth-child（）{//选择一个或多个特定的子元素 
					()内填2n -> 偶数个  ()内填2n+1 或odd  奇数个					
	}
	li:nth-last-child(){//基本同上，但是是从最后一个子元素开始算
	}

	li:nth-of-type(){//限type 
	}
	li:nth-last-of-type(){//限type  从最后一个子元素算
	}
	li:first-of-type{//限type 的第一个子元素
	}
	li:last-of-type{// type 的最后一个子元素
	}

	li:only-child{//选择父元素的唯一一个子元素
	}
	li:only-of-type{ //选择父元素的唯一一个子元素 限type
	}
	...
	
</style>

伪元素

  css伪元素用于向某些选择器设置特殊效果
  • :first-letter 将特殊的样式添加到文本的首字母
  • :first-line 将特殊的样子添加到文本首行
  • :before 在某元素之前插入某些内容
  • :after 在某元素之后插入某些内容

border-radius 及 实操

 border-radius: 20px 30px 40px 50px //左上，右上，右下，左下
 border-top-left-radius:20%  //左上角圆角 
 border-top-left-radius:60px 100px //圆角 x轴 y轴 不一样

画一个半圆

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        text-align: center;
        margin-top: 200px;
    }
    .demo{
        width: 100px;
        height: 200px;
        margin: 0 auto;
        background-color: #F66;
        border: 1px solid #ccc;
        border-radius:100px 0 0  100px ;
    }
</style>
<body>
  <div class="demo"></div>
</body>
</html>

css3画三角形

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画三角形</title>
    <style>
        .demo{
            margin: 0 auto;
            width: 0px;
            height: 0px;

            border-top: 50px solid transparent;
            border-left:50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 50px solid gray;
        }
    </style>
</head>
<body>
    <div class="demo"></div>
</body>
</html>

css画菱形

在这里插入图片描述
在这里插入图片描述

在这里插入代码片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菱形</title>
    <style>
        .demo{
            margin: 100px auto;
            width: 200px;
            height: 200px;
            background-color: gray;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
            //平行四边形
           //-webkit-transform: skew(45deg,20deg);
            //-moz-transform: skew(45deg,20deg);
            //-ms-transform: skew(45deg,20deg);
            //-o-transform: skew(45deg,20deg);
            //transform: skew(45deg,20deg);
        }
    </style>
</head>
<body>   
    <div class="demo"></div>
</body>
</html>

css画五角星/六角星

在这里插入图片描述 在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五角星</title>
    <style>
        .demo{
            margin:  150px auto;
            width: 0px;
            height: 0px;
            border-bottom:70px solid red ;
            border-left:100px solid transparent ;
            border-right:100px solid transparent ;
            -webkit-transform: rotate(35deg);
            -ms-transform: rotate(35deg);
            -o-transform: rotate(35deg);
            transform: rotate(35deg);
            position: relative;
           
        }
        .demo::before{
            content: '';
            width: 0px;
            height: 0px;
            border-bottom:70px solid red ;
            border-left:30px solid transparent ;
            border-right:30px solid transparent ;
            -webkit-transform: rotate(-35deg);
            -ms-transform: rotate(-35deg);
            -o-transform: rotate(-35deg);
            transform: rotate(-35deg);
            position:absolute;
            top: -45px;
            left: -65px;
         }
        .demo::after{
            content: '';
            width: 0px;
            height: 0px;
            border-bottom:70px solid red ;
            border-left:100px solid transparent ;
            border-right:100px solid transparent ;
            -webkit-transform: rotate(-70deg);
            -ms-transform: rotate(-70deg);
            -o-transform: rotate(-70deg);
            transform: rotate(-70deg);
            position:absolute;
            top: -0;
            left: -105px;
         }
        
        
        
    </style>
</head>
<body>   
    <div class="demo"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>六角星</title>
    <style>
        .demo{
            margin:  150px auto;
            width: 0px;
            height: 0px;
            border-bottom:70px solid red ;
            border-left:70px solid transparent ;
            border-right:70px solid transparent ;
            
            position: relative;
           
        }
        .demo::before{
            content: '';
            width: 0px;
            height: 0px;
            border-bottom:70px solid red ;
            border-left:70px solid transparent ;
            border-right:70px solid transparent ;
            -webkit-transform: rotate(-180deg);
            -ms-transform: rotate(-180deg);
            -o-transform: rotate(-180deg);
            transform: rotate(-180deg);
            position:absolute;
            top: 20px;
            left: -70px;
         }
    
    </style>
</head>
<body>   
    <div class="demo"></div>
</body>
</html>

css画五边形/六边形

在这里插入图片描述 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五边形</title>
    <style>
        .demo{
            margin:  150px auto;
            width: 100px;
            height: 100px;
            border-bottom:100px solid red ;
            border-left:100px solid transparent ;
            border-right:100px solid transparent ;           
            position: relative;
           
        }
        .demo::before{
            content: '';
            width: 0px;
            height: 0px;
            border-top:100px solid red ;
            border-left:150px solid transparent ;
            border-right:150px solid transparent ; 
            position:absolute;
            top: 200px;
            left: -100px;
         }
    
    </style>
</head>
<body>   
    <div class="demo"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五边形</title>
    <style>
        .demo{
            margin:  150px auto;
            width: 100px;
            height: 50px;
            border-bottom:100px solid red ;
            border-left:80px solid transparent ;
            border-right:80px solid transparent ;           
            position: relative;
           
        }
        .demo::before{
            content: '';
            width: 100px;
            height: 50px;
            border-bottom:100px solid red ;
            border-left:80px solid transparent ;
            border-right:80px solid transparent ;           
            -webkit-transform: rotate(-180deg);
            -ms-transform: rotate(-180deg);
            -o-transform: rotate(-180deg);
            transform: rotate(-180deg);
            position:absolute;
            top: 150px;
            left: -80px;
         }
    
    </style>
</head>
<body>   
    <div class="demo"></div>
</body>
</html>

css画❤ / 蛋

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>♥</title>
    <style>
        .demo{
            margin:  150px auto;
            width: 100px;
            height: 200px;
            background-color: red;
            border-radius:100px 100px 0  0 ; 
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);    
            position: relative;
           
        }
        .demo::before{
            content: '';
            width: 100px;
            height: 200px;
            background-color: red;
            border-radius:100px 100px 0  0 ;         
            -webkit-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg);
            position:absolute;
            right: -50px;
            top: 50px;
            /* left: -80px; */
         }
    
    </style>
</head>
<body>   
    <div class="demo"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蛋</title>
    <style>
        .demo{
            margin:  150px auto;
            width: 150px;
            height: 200px;
            background-color: #FA3;
            border-radius: 50% 50% 50% 50%   / 60% 60% 40% 40%;//x轴/Y轴
            position: relative;
           
        }
        
    
    </style>
</head>
<body>   
    <div class="demo"></div>
</body>
</html>

css太极

在这里插入图片描述
在这里插入图片描述

  • 听课前写的 比较复杂，多个div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>太极</title>
    <style>
        .demo{
            margin:  150px auto;
            width: 200px;
            height: 200px;
            background-color: ghostwhite;
            display: flex;
            position: relative;
           
        }
        .demo::before{
            content: '';
            width: 100px;
            height: 100px;
            background-color: white;
            border-radius:50% ;  
            position: absolute;
            right: 50px;
            bottom: 0;
            
        }    
        .demo::after{
            content: '';
            width: 100px;
            height: 100px;
            background-color: black;
            border-radius:50% ;  
            position: absolute;
            left: 50px;
        }    
        .left{
            width: 100px;
            height: 200px;
            background-color: black;
            border-radius:100px 0 0  100px ;              
        } 

        .right{
            width: 100px;
            height: 200px;
            background-color: white;
            border-radius:0 100px 100px 0 ; 
        }
        .dot1{
            width: 20px;
            height: 20px;
            background-color: white;
            border-radius: 50%;
            position: absolute;
            left: 100px;
            top: 40px;
            z-index: 9999;
        }
        .dot2{
            width: 20px;
            height: 20px;
            background-color: black;
            border-radius: 50%;
            position: absolute;
            right: 100px;
            bottom: 40px;
            z-index: 9999;
        }
    </style>
</head>
<body>   
    <div class="demo">
        <div class="left">
            <div class="dot1"></div>
        </div>
        <div class="right">
             <div class="dot2"></div>
        </div>
    </div>
</body>
</html>
  • //听课后写的 ，简化，一个div 搞定，需要活用boder 样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>♥</title>
    <style>
        body{
            background-color: ghostwhite;
        }
        .demo{
            margin:  150px auto;
            width: 150px;
            height: 300px;
            background-color: white;
            border-left: 150px solid black;
            border-radius: 50%;   
            position: relative;       
        }
        .demo::after{
            content: '';
            width: 0;
            height: 0;
            border: 50px solid black;
            border-radius: 50%;
            padding: 25px;
            background-color: white;
            position: absolute;
            left: -75px;
        }
        .demo::before{
            content: '';
            width: 0;
            height: 0;
            border: 50px solid white;
            border-radius: 50%;
            padding: 25px;
            background-color: black;
            position: absolute;
            bottom: 0;
            left: -75px;
        }
    </style>
</head>
<body>   
    <div class="demo">
       
    </div>
</body>
</html>

渐变 、 效果

透明背景层

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>♥</title>
    <style>
        .demo{
            margin: 150px auto;
            width: 1000px;
            height: 1000px;
            background-image: url(./backimg.jpeg);
            position: relative;
        }
        .content{
            position: absolute;
            bottom: 200px;
            left: 100px;

            width: 400px;
            height: 200px;
            text-align: center;
            padding-top: 20px;
            
            border-radius: 20px;
            box-shadow: 3px 4px 5px #888;

            background-color: #fff;
            opacity: 0.4;

        }
    </style>
</head>
<body>   
    <div class="demo">
        <div class="content">  
            hello everyone! <br/> 
            hello everyone! <br/> 
            hello everyone! <br/> 
            hello everyone! <br/> 
            hello everyone! <br/> 
            hello everyone! <br/> 
            hello everyone! <br/> 
            hello everyone! <br/> 
        </div>
    </div>
</body>
</html>

颜色模式

rgba(R,G,B,A)
R:红色值。正整数 | 百分比
G:绿色值。正整数 | 百分比
B:蓝色值。正整数 | 百分比
A:Alpha透明度。取 0 - 1 之间

hsla(H,S,L,A) 少见
S:Hue(色调)。 0 （或360）表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。（取值范围 0 - 360）
H:绿色值。 Saturation （饱和度） 。取值为：0.0% - 100.0%
L:蓝色值。Lightness（亮度） 。取值为：0.0% - 100.0%
A:Alpha透明度。取 0 - 1 之间

线型渐变

lineat-gradient
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>线形渐变</title>
    <style>
        .demo{
            margin: 150px auto;
            width: 260px;
            height: 200px;
            border: 1px solid black;
            background-image: linear-gradient(to top,orange ,green  ,red);//to left  / to right  / to bottom   (颜色后可加百分百或xx像素 
            background-image: -webkit-linear-gradient(to top,orange ,green  ,red);
            background-image: -o-linear-gradient(to top,orange ,green  ,red);
        }
    </style>
</head>
<body>   
    <div class="demo">
       
    </div>
</body>
</html>

径向渐变

radial-gradient

在这里插入图片描述
（使用时需要加兼容前缀）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变</title>
    <style>
        .demo{
            margin: 10px;
            width: 100px;
            height: 100px;
            border: 1px solid black;
            border-radius: 50%;
            float: left;
        }
        .circle{
            background-image: radial-gradient(circle at center,orange,green);
        }
        .ellipse{
            background-image: radial-gradient(ellipse at center,orange,green);
        }
        .circle-right{
            background-image: radial-gradient(circle at right,orange,green);
        }
        .ellipse-right{
            background-image: radial-gradient(ellipse at right,orange,green);
        }
        .circle-topLeft{
            background-image: radial-gradient( circle at top left,orange,green);
        }
        .ellipse-topLeft{
            background-image: radial-gradient( ellipse at top left,orange,green);
        }
        .circle-20{
            background-image: radial-gradient(20px circle at center,orange,green);
        }
        .ellipse-20{
            background-image: radial-gradient(40px 30px ellipse at center,orange,green);
        }
        .circle-more{
            background-image: radial-gradient(circle ,orange,green,blue);
        }
        .ellipse-more{
            background-image: radial-gradient( ellipse at center,orange,green,blue);
        }
    </style>
</head>
<body>   
    <div>
        <div class="demo circle"></div>
        <div class="demo ellipse"></div>
    </div>
    <div>
        <div class="demo circle-right"></div>
        <div class="demo ellipse-right"></div>
    </div>
    
    <div>
        <div class="demo circle-topLeft"></div>
        <div class="demo ellipse-topLeft"></div>
    </div>
    <div>
        <div class="demo circle-20"></div>
        <div class="demo ellipse-20"></div>
    </div>
    <div>
        <div class="demo circle-more"></div>
        <div class="demo ellipse-more"></div>
    </div>
</body>
</html>

重复性渐变

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变</title>
    <style>
        .demo{
            margin: 10px auto;
            width: 300px;
            height: 300px;
            border: 1px solid black;
            background-image: repeating-linear-gradient(red 0px,orange 40px,yellow 80px);
        }
        .demo2{
            margin: 10px auto;
            width: 300px;
            height: 300px;
            border: 1px solid black;
            background-image: repeating-radial-gradient(red 0px,orange 40px,yellow 80px);
        }
       
    </style>
</head>
<body>   
    
    <div class="demo"></div>
    <div class="demo2"></div>
    
    
</body>
</html>

盒子阴影效果

box-shadow : h-shadow v-shadow blur spread color inset

  • h-shadow 必须 。 水平阴影位置 可以负值
  • v-shadow 必须 。 垂直阴影位置 可以负值
  • blur 可选 。 模糊距离
  • spread 可选 。 阴影尺寸
  • color 可选 。 阴影颜色
  • inset 可选。 将外部阴影（outset）改变成内部阴影

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
       
        .demo{
            margin: 150px auto;
            padding: 20px 10px;
            width: 300px;
            height: 200px;
            border: 1px solid black;
            transform: rotate(7deg);
            -o-transform: rotate(7deg);
            -webkit-transform: rotate(7deg);
            -ms-transform: rotate(7deg);
            box-shadow: 3px 2px 4px #aaa ;
        }
        .demo img{
            width: 300px;
            
        }
       
    </style>
</head>
<body>   
    
    <div class="demo">
        <img src="./backimg.jpeg" alt="">
        <p>文字文字文字文字</p>
    </div>
       
</body>
</html>

过渡效果

transition(使用时需要前缀

  • transiton-property 过渡属性（默认all）
  • transition-duration 过渡时间 （默认 0s）
  • transition-timing-function 过渡函数 （默认ease函数）
  • transition-delay 过渡延迟时间（默认 0s）

缓慢边长的长方形

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
       
        .demo{
            margin: 150px auto;
            width: 100px;
            height: 100px;
            background-color: green;
            cursor: pointer;
            transition-duration: 3s;
            transition-property: width;
            transition-delay: 0.2s;
            transition-timing-function: ease;
            
        }
        .demo:hover{
            background-color: pink;
            width: 300px;
        }
       
    </style>
</head>
<body>   
    
    <div class="demo"></div>
       
</body>
</html>

transition-timing-function

  简写   transiton : all 2s .2s ease

ease 快慢快
linear 匀速
ease-in 慢快
ease-out 快慢
ease-in-out 基本和ease相同
step-start 直接变化
step-end 时间到了以后直接变化

动画

@keyframes

使用时需前缀

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .demo{
            width: 100px;
            height: 100px;
            background-color: green;
            position: fixed;
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            /* animation: mymove 2s infinite; */
            animation-name: mymove;  /*动画名*/
            animation-duration: 3s; /*时间 */
            animation-timing-function: ease ; /*过渡函数*/
            animation-delay: 3s; /*延迟*/
            animation-iteration-count: 3 ; /*循环几次   无限infinite*/
            animation-direction: normal(alternate);/*正向反向*/
        }
        @keyframes mymove{
            from {top:0;left:0}
            top {top:10;left: 80%;}
        }
       
    </style>
</head>
<body>   
    
    <div class="demo"></div>
       
</body>
</html>

demo

在这里插入图片描述在这里插入图片描述在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .demo{
            margin: 100px auto;
            width: 60px;
            height: 60px;
            text-align: center;
            font-size: 10px;

        }
        .demo >div{
            background-color: #67CF22;
            height: 100%;
            width: 6px;
            display: inline-block;
            animation: mymove 1.2s infinite ease-in;
        }
        .demo >div:nth-child(2){
            animation-delay: -1.1s;
        }
        .demo >div:nth-child(3){
            animation-delay: -1s;
        }
        .demo >div:nth-child(4){
            animation-delay: -0.9s;
        }
        .demo >div:nth-child(5){
            animation-delay: -0.8s;
        }
        @keyframes mymove{
            0% ,40%,100%{transform: scaleY(0.4);}
            20% {transform: scaleY(1);}
        }
       
    </style>
</head>
<body>   
    
    <div class="demo">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
       
</body>
</html>

demo2

在这里插入图片描述在这里插入图片描述在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .demo{
            margin: 100px auto;
            width: 60px;
            height: 60px;
            position: relative;

        }
        .demo >div{
            background-color: #67CF22;
            height: 100%;
            width: 100%;
            border-radius: 50%;
            opacity: .6;
            position: absolute;
            top: 0;
            left: 0;
            animation: mymove 2s infinite ease-in;
        }
        .demo >div:nth-child(2){
            animation-delay: -1s;
        }

        @keyframes mymove{
            0%,100% {transform: scale(0.0);}
            50% {transform: scale(1);}
        }
       
    </style>
</head>
<body>   
    
    <div class="demo">
        <div></div>
        <div></div>
    </div>
       
</body>
</html>

字体效果

发光字 、苹果字体 、立体字

text-shadow : h-shadow v-shadow bulr color
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        body{
            background-color: #666;
            text-align: center;
            font:bold 55px 'Microsoft YaHei'
        }
        .demo1{
            color: white;
            text-shadow: 0px 0px 20px red;
        }
        .demo2{
            color: black;
            text-shadow: 0px 1px 1px #fff;
        }
        .demo3{
            color: #fff;
            text-shadow: 1px 1px  rgba(197, 223, 248,.8),
                         2px 2px  rgba(197, 223, 248,.8),
                         3px 3px  rgba(197, 223, 248,.8);
        }
       
    </style>
</head>
<body>   
    
    <div class="demo1">文字</div>
    <div class="demo2">文字</div>
    <div class="demo3">文字</div>
       
</body>
</html>

text-overflow

text-overflow : clip | ellipsis | string
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>

        .demo{
            width: 100px;
            height: 50px;
            margin: 30px auto;
            padding: 10px;
            border: 1px solid #ccc;
            
            text-overflow: clip;
            overflow: hidden;
        }
        .demo2{
            width: 100px;
            height: 50px;
            margin: 30px auto;
            padding: 10px;
            border: 1px solid #ccc;

            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
       
    </style>
</head>
<body>   
    
    <div class="demo">
        文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
    </div>
    <div class="demo2">
        文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
    </div>
</body>
</html>

rem

根据父级元素来进行换算

举报

相关推荐

关于CSS3的一些冷门属性

css3

一些记录一些备忘

java

关于css3媒体查询Media的一些用法小结

媒体查询css3自适应网页开发Html/CSS前端开发yyds干货盘点

CSS3样式分类：

phpandroidandroid studiophp常量php可变变量php魔术变量

css3选择器----nth-child的一些问题

nth-childnth-of-typecss3css3选择器

关于css的一些问题记录

css

一些css效果

cssHtml/CSS前端开发

css3整理（一）

csshtml内边距选择器块元素Windows系统/运维

CSS3基础（一）

html5

MySQL一些命令记录

mysql数据库
0 条评论