好玩又酷炫的css3特效

白色玫瑰 程序猿

时间: 2023-05-22 阅读: 1 字数:36940

css
{}
今天复习了CSS3新增属性，并做了一些demo，案例如下，一起学习… （请忽略兼容性问题和代码顺序规范问题）兼容问题可通过caniuse.com网站查询并加前缀解决 1.鼠标经过图片放大 核心语法： img:hover { /*鼠标...

今天复习了CSS3新增属性，并做了一些demo，案例如下，一起学习…

（请忽略兼容性问题和代码顺序规范问题）兼容问题可通过caniuse.com网站查询并加前缀解决

1.鼠标经过图片放大

核心语法：
      img:hover {
           /*鼠标经过时，大小变为原来1.1倍*/
           transform:scale(1.1);   
       }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 demo1 鼠标经过图片fda</title>
   <style type="text/css">
       body {
           text-align: center;
       }
       img {
           border-radius: 50%;
           /*过渡效果：0.5s过渡完成全部属性*/
           /* 属性兼容性查询 caniuse.com */
           transition: all .5s;
           -webkit-transition: all .5s;
           -o-transition: all .5s;
           cursor: pointer;
       }
       img:hover {
           /*鼠标经过时，大小变为原来1.1倍*/
           transform:scale(1.1);   
       }
   </style>
</head>
<body>
![](./panda.jpeg)
</body>
</html>

2. a标签的动态伪类选择器+input状态选择器

核心语法：
    a:link     未访问的链接的状态
    a:visited   以访问的链接状态
    a:hover    鼠标移动到链接上时的链接状态
    a:active   选定（点击，鼠标按下未松开）时的链接状态
    根据点击链接时，链接状态的变化可知，书写顺序不可变，记忆方法：LoVe HAte

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo2 a标签的动态伪类选择器+input状态选择器</title>
    <style>
        /*a标签的动态伪类选择器*/
        a:link{
            color: #666;
        }
        a:visited{
            color: #f00;
        }
        a:hover{
            color:#000;
        }
        a:active{
            color:#0f0;
        }
        /*ui元素状态选择器，用于表单中*/
        input:enabled{
            background-color: #0f0;
        }
        input:disabled{
            background-color: #f00;
        }
    </style>
</head>
<body>
    <a href="">demo2</a>


    <input type="text"><br/>
    <input type="text" disabled>
</body>
</html>

3. 结构伪类选择器

核心语法：
    .demo li:first/last-child   选中 . demo下的第一个/最后一个 li
    .demo li:nth-child($$)    选中 . demo下的第满足$$要求的 li
    .demo li:nth-of-type(3)   选中 . demo下的第三个的 li（此时本例中的
元素为第一个元素）
    .demo li:empty            选中 . demo下为空的li标签 
注意：结构中的
标签只有在验证.demo li:nth-of-type(3) 时添加，其他时候去掉；验证时按注释的序号一段一段验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo3 结构伪类选择器</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .clearfix{
            clear: both;
            overflow: auto;
        }
        .demo{
            width: 300px;
            margin: 100px auto;
            padding: 10px;
            border: 1px solid #ccc;
        }
        .demo li{
            float: left;
            width:20px;
            padding: 2px;
            margin-right: 4px;
            list-style: none;
            border:1px solid #ccc;
        }
        .demo a{
            display: block;
            width: 20px;
            height: 20px;
            text-align: center;
            text-decoration: none; 
            border-radius: 10px;
            background-color: #f36;
        }
        /*1、 第一个元素和最后一个元素加相应样式*/
        .demo li:first-child{
            background-color: #0f0;
        }
        .demo li:last-child{
            background-color: #00f;
        }


        /*2、 奇偶行隔行设置相应样式   :nth-child()*/
        .demo li:nth-child(2n){    /*偶数行背景色为黄色*/
            background-color: yellow;
        }
        .demo li:nth-child(2n+1){   /*奇数行背景色为蓝色*/
            background-color: blue;
        }


        /*3、 按要求行数设置样式*/
        .demo li:nth-child(n+5){
            background-color: pink;
        }
        .demo li:nth-last-child(3){  /*选中从后向前数第三个标签并设置样式*/
            background-color: red;
        }


        /*4、 nth-of-type 限制显示的标签只能为li，其他标签不算*/
        .demo li:nth-child(3){
            background-color: yellow;
        }
        .demo li:nth-of-type(3){
            background-color: #d3a0a3;
        }
        .demo li:last-of-type{
            background-color: #0f0;
        }


        /*5、 标签内为空时选中该标签*/
        .demo li:empty{
            background-color: #d3a0a3;
        }

    </style>
</head>
<body>
    <div class="demo">
        <ul class="clearfix">
     
 0 

            <a href="">1</a>            <a href="">2</a>            <a href="">3</a>            <a href="">4</a>            <a href="">5</a>            <a href="">6</a>            <a href="">7</a>            <a href="">8</a>            <a href="">9</a>            <a href="">10</a>        
    </div>
</body>
</html>

4、伪元素

核心语法：
    .demo::first-letter   选中文中第一个字
    .demo::first-line     选中文中第一行
    .demo01::before      在选中的元素前面加一个伪元素
    .demo01::after       在选中的元素后面加一个伪元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo4 CSS伪元素</title>
    <style>
        .demo{
            width: 300px;
            margin: 50px auto;
            padding:10px;
            border:1px solid #ccc;
        }
        /*首字下沉*/
        .demo::first-letter{
            float:left;
            font-size: 40px;
            font-weight: bold;            
        }
        /*首行突出显示*/
        .demo::first-line{
            color:#f66;
        }
        /*demo01： 伪元素实现结构样式分离*/
        .demo01{
            width: 600px;
            margin:10px auto;
            padding:10px;
            color:blue;
            font-size: 40px;
            text-align: center;
            border:1px solid #ccc;
        }
        .demo01::before{
            content:url(./timg.jpg);
            display:block;
        }
        .demo01::after{
            content:url(./timg1.jpg); /*content属性必须有，可为空*/
            display:block;
        }
    </style>
</head>
<body>
    <div class="demo">
        伪元素：before和：after可以做很多东西，伪元素：before和：after可以做很多东西，伪元素：before和：after可以做很多东西，伪元素：before和：after可以做很多东西，伪元素：before和：after可以做很多东西，伪元素：before和：after可以做很多东西，伪元素：before和：after可以做很多东西，伪元素：before和：after可以做很多东西，伪元素：before和：after可以做很多东西，伪元素：before和：after可以做很多东西，伪元素：before和：after可以做很多东西，伪元素：before和：after可以做很多东西，伪元素：before和：after可以做很多东西，伪元素：before和：after可以做很多东西，伪元素：before和：after可以做很多东西。
    </div>

    <div class="demo01">
        玩转CSS3新特性
    </div>
</body>
</html>

5、圆角border-radius

核心语法：
    border-radius：左上角   右上角   右下角   左下角（左上角开始顺时针方向）
    参数可为 px  和  %形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo5 border-radius</title>
    <style>
        .demo{
            width: 100px;
            height: 200px;
            margin:50px auto;
            background-color: #f66;
            border: 1px solid #ccc;
            border-radius:100px 0px 0px 100px;
        }
    </style>
</head>
<body>
    <div class="demo">

    </div>
</body>
</html>

6、画三角形

技术核心：伪元素 + 定位 + border的巧妙使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画三角形</title>
    <style>
        .demo{
            position:relative;
            width: 300px;
            height: 25px;
            margin: 50px auto;
            padding:10px;
            color: #fff;
            background-color:#6a6;
            border-radius: 5px;
        }
        .demo::before{
            position: absolute;
            left: -10px;
            top: 14px;
            content: '';
            border-top: 10px solid transparent;
            border-left: 0px solid #6a6;
            border-bottom: 10px solid transparent;
            border-right: 10px solid #6a6;
        }
    </style>
</head>
<body>
    <div class="demo">
        hello everyone!
    </div>
</body>
</html>

7、画菱形和平行四边形

    核心技术： 伪元素 + 定位 + border的巧妙使用 + transform: rotate(45deg)旋转角度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo7 画菱形和平行四边形</title>
    <style>
        .diamond{
            width: 200px;
            height: 200px;
            margin:100px auto;
            background-color:#6a6;
            /*transform有浏览器兼容问题，使用caniuse.com查询以及使用autoprefixer兼容性前缀插件*/
            /*rotate(旋转角度)*/
            -webkit-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }
        .parallel{
            width: 200px;
            height: 100px;
            margin:100px auto;
            background-color:#6a6;
            /*skew(倾斜角度)  第一个参数代表X轴倾斜，第二个参数代表Y轴倾斜*/
            -webkit-transform: skew(20deg,20deg);
            -o-transform: skew(20deg,20deg);
            -moz-transform: skew(20deg,20deg);
            -ms-transform: skew(20deg,20deg);
            transform: skew(20deg,20deg);
        }
    </style>
</head>
<body>
    <div class="diamond">

    </div>
    <div class="parallel">

    </div>
</body>
</html>

8、画五角星和六角星

    核心技术： 伪元素 + 定位 + border的巧妙使用 + transform: rotate(45deg)旋转角度
    拆解、拼接图形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画五角星</title>
    <style>
        #star{
            width: 0;
            height: 0;
            border-bottom: 70px solid red;
            border-top: 70px solid transparent;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            margin: 50px auto;
            -webkit-transform: rotate(35deg);
            -o-transform: rotate(35deg);
            -ms-transform: rotate(35deg);
            -moz-transform: rotate(35deg);
            transform: rotate(35deg);
            position: relative;
        }
        #star::before{
            content:'';
            width: 0;
            height: 0;
            border-bottom: 80px solid red;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            -webkit-transform: rotate(-35deg);
            -o-transform: rotate(-35deg);
            -ms-transform: rotate(-35deg);
            -moz-transform: rotate(-35deg);
            transform: rotate(-35deg);
            position: absolute;
            top:-45px;
            left:-65px;
        }
        #star::after{
            content:'';
            border-bottom: 70px solid red;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            -webkit-transform: rotate(-70deg);
            -o-transform: rotate(-70deg);
            -ms-transform: rotate(-70deg);
            -moz-transform: rotate(-70deg);
            transform: rotate(-70deg);
            position:absolute;
            top:4px;
            left:-105px;
        }
    </style>
</head>
<body>
    <div id="star">
    </div>
</body>
</html>

html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画六角形</title>
    <style>
        #star{
            width: 0;
            height: 0;
            margin:100px auto;
            border-bottom: 100px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            position:  relative;
        }
        #star::before{
            content:'';
            width: 0;
            height: 0;
            border-top: 100px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            position: absolute;
            top:30px;
            left:-50px;
        }
    </style>
</head>
<body>
    <div id="star">

    </div>
</body>
</html>

9、画五角形和六角形

    核心技术： 伪元素 + 定位 + border的巧妙使用 
    拆解、拼接图形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo9 画五角形、六角形</title>
    <style>
        #zheng{
            width: 50px;
            height: 50px;
            border-top:50px solid #f00;
            border-left:50px solid #0f0;
            border-right:50px solid #00f;
            border-bottom:50px solid #ff0;
            
        }
        #wubian{
            width: 54px;
            height: 0px;
            margin:100px auto;
            border-top:50px solid red;
            border-left:18px solid transparent;
            border-right:18px solid transparent;
            position:relative;
        }
        #wubian::after{
            content:'';
            width: 0;
            height: 0;
            border-bottom:35px solid blue;
            border-left:45px solid transparent;
            border-right:45px solid transparent;
            position:absolute;
            top:-84px;
            left:-18px;
        }
        #six{
            width: 100px;
            height: 56px;
            margin:100px auto;
            background-color: red;
            position:relative;
        }
        #six::before{
            content:'';
            width: 0;
            height: 0;
            border-bottom: 28px solid blue;
            border-right: 50px solid transparent;
            border-left: 50px solid transparent;
            position:absolute;
            top:-28px;
            left:0;
        }
        #six::after{
            content:'';
            width: 0;
            height: 0;
            border-top: 28px solid blue;
            border-right: 50px solid transparent;
            border-left: 50px solid transparent;
            position:absolute;
            top:56px;
            left:0;
    </style>
</head>
<body>
    <div id="zheng">

    </div>
    <div id="wubian">

    </div>
    <div id="six">

    </div>
</body>
</html>

10、画心型，蛋型

    核心技术： 伪元素 + 定位  + transform: rotate(45deg)旋转角度 + border-radius（X轴Y轴）
    拆解、拼接图形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo10 画心型，蛋型</title>
    <style>
        #heart{
            width: 100px;
            height: 150px;
            margin:100px auto;
            background-color: red;
            border-radius: 50px 50px 0 0;
            transform: rotate(45deg);
            position:relative;
        }
        #heart::after{
            content:'';
            width: 100px;
            height: 150px;
            background-color: red;
            border-radius: 50px 50px 0 0;
            transform-origin:0 100%;
            transform: rotate(-90deg);
            position:absolute;
            top:0;
            left:100px;
        }
        #egg{
            width: 126px;
            height: 180px;
            background-color: #fa3;
            margin:100px auto;
            border-radius: 50% / 60% 60% 40% 40%; /* / 左边为X轴的角度   / 右边为Y轴的角度*/
        }
    </style>
</head>
<body>
    <div id="heart">
        
    </div>
    <div id="egg">

    </div>
</body>
</html>

11、画太极图

    核心技术：伪元素 + 定位  + border-radius（X轴Y轴）+ border巧妙用法
    拆解、拼接图形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo11 画太极阴阳图</title>
    <style>
        body{
            background-color: #ccc;
        }
        #taiji{
            width: 150px;
            height: 300px;
            margin:100px auto;
            border-radius: 50%;
            background-color: #fff;
            border-left: 150px solid #000; /*border-left + width = height 太极底圆一半黑一半白*/
            position:relative;
        }
        #taiji::before{
            content:'';
            width: 0;
            height:0;
            padding:25px;
            border-radius: 50%;
            border:50px solid #000;
            background-color: #fff;
            position:absolute;
            top:0px;
            left:-75px;
        }
        #taiji::after{
            content:'';
            width: 0;
            height:0;
            padding:25px;
            border-radius: 50%;
            border:50px solid #fff;
            background-color: #000;
            position:absolute;
            top:150px;
            left:-75px;
        }
        
    </style>
</head>
<body>
    <div id="taiji">

    </div>
</body>
</html>

12、晚会致辞背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>晚会致辞背景</title>
    <style>
        #background{
            width: 1000px;
            height:1200px;
            margin:100px auto;
            background: url('timg3.jpg') no-repeat;
            position: relative;
        }
        #content{
            width: 600px;
            height: 400px;
            padding:10px;
            font-size:20px;
            text-align: center;
            line-height: 30px;
            border-radius: 15px;
            box-shadow: 3px 3px 5px #ccc;
            background-color: #fff;
            opacity:.8;
            position:absolute;
            top:150px;
            left:200px;
        }
    </style>
</head>
<body>
    <div id="background">
        <div id="content">
            hello everyone!<br/>
            hello everyone!<br/>
            hello everyone!<br/>
            hello everyone!<br/>
            hello everyone!<br/>
            hello everyone!<br/>
        </div>
    </div>
</body>
</html>

13、仿天猫产品展示效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo13 仿天猫产品展示效果</title>
    <style>
        body{
            background-color: #ccc;
        }
        #main{
            width: 1000px;
            margin:100px auto;
            clear:both;    
        }
        #main li{
            float:left;
            width: 240px;
            padding:1px;
            margin-right: 2px;
            list-style: none;
            border:1px solid rgba(255, 0 ,0 ,0);
            background-color: #fff;
            cursor:pointer;
        }

        #main li:hover{
            border:1px solid rgba(255, 0 ,0 ,1);

        }
        #main li:hover .img img{
            opacity: .7;
        }
        .img img{
            width: 240px;
            height:200px;
            transition: all .5s;
        }
        .goods_title{
            height: 35px;
            margin:10px;
            color:#666;
            overflow: hidden;
        }
        .price{
            margin:10px;
            color:red;
        }
    </style>
</head>
<body>
    <div id="main">
        
    
   <div class="img">
![](timg4.jpg)
   </div>
   <div class="goods_title">
       天猫购物节，一起来狂欢吧！天猫购物节，一起来狂欢吧！
   </div>

   <div class="price">￥499优惠券</div>
      
   <div class="img">
![](timg5.jpg)
   </div>
   <div class="goods_title">
       天猫购物节，一起来狂欢吧！天猫购物节，一起来狂欢吧！
   </div>

   <div class="price">￥199优惠券</div>
       
    </div>
</body>
</html>

14、线性渐变

    核心技术：background-image: linear-gradient(to right, orange 30% ,green 60%, yellow 100%);
    文章推荐：https://blog.csdn.net/succuba_ckr/article/details/82080548

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo14 线性渐变</title>
    <style>
        .ceng{
            width: 260px;
            height: 200px;
            border:1px solid black;
            background-image: linear-gradient(to right, orange 30% ,green 60%, yellow 100%);
        }
    </style>
</head>
<body>
    <div class="ceng">

    </div>
</body>
</html>

15、径向渐变 圆circle/椭圆ellipse

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo15 径向渐变 圆circle / 椭圆ellipse</title>
    <style>
        .ceng{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 1px solid black;
            margin:10px;
            float：left;
        }
        /*简单渐变、局部渐变   上下左右 具体px值 注意椭圆形的渐变第一组参数要X轴和Y轴参数同时存在*/
        .circle{
            background-image: radial-gradient(circle at center, orange,green);
        }
        .ellipse{
            background-image: radial-gradient(ellipse at top left, orange,green);
        }
        .circle1{
            background-image: radial-gradient(20px circle at center, orange,green);
        }
        .ellipse1{
            background-image: radial-gradient(20px 30px ellipse at center, orange,green);
        }
        .circle2{
            background-image: radial-gradient(20px circle at center, orange,yellow,pink);
        }
        .ellipse2{
            background-image: radial-gradient(20px 30px ellipse at center, orange,yellow,pink);
        }
    </style>
</head>
<body>
    <div class="ceng circle"></div>
    <div class="ceng ellipse"></div>
    <div class="ceng circle1"></div>
    <div class="ceng ellipse1"></div>
    <div class="ceng circle2"></div>
    <div class="ceng ellipse2"></div>
</body>
</html>

16、重复性渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo16 重复性渐变</title>
    <style>
        .linear{
            width: 300px;
            height: 300px;
            margin:20px auto;
            background-image: repeating-linear-gradient(red 0px,green 40px,orange 80px);
        }
        .circle{
            width: 300px;
            height: 300px;
            margin:20px auto;
            border-radius: 50%;
            background-image: repeating-radial-gradient(red 0px,green 30px,orange 40px);
        }
    </style>
</head>
<body>
    <div class="linear">

    </div>
    <div class="circle">

    </div>
</body>
</html>

17、盒子阴影效果 box-shadow

    核心技术：box-shadow: h-shadow(水平距离)  v-shadow（垂直距离） blur（模糊距离） spread（阴影尺寸） color（阴影颜色） inset（内阴影）/outset（外阴影）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo17 盒子阴影效果 box-shadow</title>
    <style>
    /*box-shadow: h-shadow(水平距离) v-shadow（垂直距离） blur（模糊距离） spread（阴影尺寸） color（阴影颜色） inset（内阴影）/outset（外阴影）*/
        body{
            background-color: #eaeaea;
        }
        img{
            width: 300px;
            height: 200px;
        }
        .ceng{
            width: 300px;
            padding: 10px 10px 20px 10px;
            border:1px solid #bfbfbf;
            background-color: #fff;
            box-shadow: 2px 2px 5px #aaa;
            float:left;
        }
        .rotate_left{        
            transform: rotate(7deg);
        }
        .rotate_right{
            transform: rotate(-7deg);
        }
    </style>
</head>
<body>
    <div class="ceng rotate_left">
![](timg7.jpg)
        
今天风景很美，女朋友更美

    </div>
    <div class="ceng rotate_right">
![](timg8.jpg)
        
今天草地很绿，真是美好的一天

    </div>
</body>
</html>

18、 过渡transition

   transition:
        transition-propert：(过渡属性，默认值为all)
        transition-duration：（过渡持续时间，默认值为0S）
        transition-timing-function：（过渡函数。默认值为ease函数）
    ease:先慢后快再慢  linear：匀速  ease-in：先慢后快  ease-out：先快后慢  ease-in-out：和ease一样;
        transition-delay：（过渡延迟时间，默认值为0S）;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo18 过渡transition</title>
    <style>
        /*transition:
        transition-propert：(过渡属性，默认值为all)
        transition-duration：（过渡持续时间，默认值为0S）
        transition-timing-function：（过渡函数。默认值为ease函数）
            ease:先慢后快再慢  linear：匀速  ease-in：先慢后快  ease-out：先快后慢  ease-in-out：和ease一样;
        transition-delay：（过渡延迟时间，默认值为0S）;
         */
        .ceng{
            width: 100px;
            height: 100px;
            background-color: pink;
            cursor:pointer;
            transition:all 2s ease-out 1s;
        }
        .ceng:hover{
            width: 300px;
            height:200px;
            background-color: orange;
            border-radius: 30px;
        }
    </style>
</head>
<body>
    <div class="ceng">

    </div>
</body>
</html>

19、仿天猫类别过渡效果制作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo19 仿天猫类别过渡效果制作</title>
    <style>
        .main{
            width: 260px;
            height: 270px;
            border: 1px solid #ccc;
            margin: 50px auto;
            font-family:'Microsoft Yahei';
        }
        .m_title{
            
            font-size:20px;
            padding:20px 10px 10px 10px;
        }
        .m_content{
            color:#11ccaa;
            padding: 0px 10px 10px 10px;
        }
        .m_img{
            text-align: center;
            position:relative;
        }
        .m_img img{
            position:absolute;
            width: 180px;
            top:0px;
            right:0px;
            transition: right .3s ease .3s;
        }
        .main:hover img{
            right:15px;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="m_title">品牌车也降价</div>
        <div class="m_content">不要错过这机会</div>
    
        <div class="m_img">
![](timg9.jpg)
        </div>
    </div>
</body>
</html>

20、动画中的关键帧@keyframes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo20 动画中的关键帧@keyframes</title>
    <style>
        .rect{
            width: 100px;
            height: 100px;
            background-color: red;
            position:fixed;
            animation: mymove 2s infinite;
        }
        @keyframes mymove{
            /*
            from{ top:0; left:20%;}
            to{top:0; left: 80%;}
   */
            0% {top:0; left:20%; background-color:'red';}
            25%{top:0; left:80%; background-color:'green';}
            50%{top:80%; left:80%;background-color:'yellow';}
            75%{top:80%; left:20%;background-color:'blue';}
            100%{top:0; left:20%;background-color:'red';}
        }
    </style>
</head>
<body>
    <div class="rect">

    </div>
</body>
</html>

21、复合属性animation

       animation:
            animation-name：  动画名称
            animation-duration:  持续时间
            animation-timing-function:  过渡函数
   linear:匀速行驶; ease/ease-in-out：先慢后快再慢； ease-in：先慢后快；  ease-out：先快后慢
            animation-delay   延迟
            animation-iteration-count： 循环次数infinite无限循环  
            animation-direction：方向   normal/alternate反向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo21 复合属性animation</title>
    <style>
        /*animation:
            animation-name：  动画名称
            animation-duration:  持续时间
            animation-timing-function:  过渡函数
   linear:匀速行驶; ease/ease-in-out：先慢后快再慢； ease-in：先慢后快；  ease-out：先快后慢
            animation-delay   延迟
            animation-iteration-count： 循环次数infinite无限循环  
            animation-direction：方向   normal/alternate反向
        */
    
        .rect{
            width: 100px;
            height: 100px;
            background-color: red;
            position:fixed;
            animation: mymove 2s infinite;
        }
        @keyframes mymove{
            /*
            from{ top:0; left:20%;}
            to{top:0; left: 80%;}
   */
            0% {top:0; left:20%; background-color:red;}
            25%{top:0; left:80%; background-color:green;}
            50%{top:80%; left:80%;background-color:yellow;}
            75%{top:80%; left:20%;background-color:blue;}
            100%{top:0; left:20%;background-color:red;}
        }
    
    </style>
</head>
<body>
    <div class="rect">

    </div>
</body>
</html>

22、加载loading动画实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo22 加载loading动画实现</title>
    <style>
        .spinner{
            margin:100px auto;
            width: 60px;
            height: 60px;
            text-align: center;
            font-size: 10px;
        }
        .spinner div{
            background-color: #67cf22;
            width: 6px;
            height: 100%;
            display:inline-block;
            animation: mymove 1.2s infinite ease-in-out;
        }
        .spinner > div:nth-child(2){
            animation-delay:-1.1s;
        }
        .spinner > div:nth-child(3){
            animation-delay:-1.0s;
        }
        .spinner > div:nth-child(4){
            animation-delay:-0.9s;
        }
        .spinner > 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="spinner">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

23、原点加载中动画实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo23 原点加载中动画实现</title>
    <style>
        .spinner{
            width: 60px;
            height: 60px;
            margin:100px auto;
            position:relative;
        }
        .spinner div{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #67cf22;
            opacity:.6;
            position:absolute;
            top:0;
            left:0;
            animation: mymove 2s infinite ease-in-out;
        }
        .spinner div:nth-child(2){
            animation-delay:-1s;   /*尽量做负延时*/
        }
        @keyframes mymove{
            0%,100%{transform: scale(0.0);}
            50%{transform: scale(1.0);}
    </style>
</head>
<body>
    <div class="spinner">
        <div></div>
        <div></div>
    </div>
</body>
</html>

24、三种字体效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo24 字体效果 </title>
    <style>
        body{
            background-color: #666;
            text-align: center;
            font:bold 55px "Mircrosoft YaHei";
        }
        .font1{
            color:#fff;
            text-shadow: 0px 0px 20px red;
        }
        .font2{
            color:black;
            text-shadow:0px 1px 1px #fff;
        }
        .font3{
            color:#fff;
            text-shadow: 1px 1px rgba(198,223,248,.8),
            2px 2px rgba(198,223,248,.8),
            3px 3px rgba(198,223,248,.8),
            4px 4px rgba(198,223,248,.8),
            5px 5px rgba(198,223,248,.8),
            6px 6px rgba(198,223,248,.8);
        }
    </style>
</head>
<body>
    <div class="font1">panda</div>
    <div class="font2">APPLE ATYLE</div>
    <div class="font3">3D TEXT EFFECT</div>
</body>
</html>

25、字体排版情况text-overflow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo25 字体排版情况text-overflow</title>
    <style>
        /* text-overflow:clip() | ellipsis(超出部分用...表示) | string（超出部分用自定义字符表示）*/
        .demo1{
            margin:30px auto;
            width: 200px;
            height:100px;
            padding:10px;
            border:1px solid #ccc;
            text-overflow: clip;
            overflow: hidden;
        }
        .demo2{
            margin:30px auto;
            width: 200px;
            padding:10px;
            border:1px solid #ccc;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space:nowrap;
        }
    </style>

</head>
<body>
    <div class="demo1">
        每年10月至次年1月，是流行性出血热的高发季节。厦门市疾控中心提醒市民，出血热的发病区域集中在农村和城市边缘地带，城市居民染上此病主要是因为在野外、草地或者其他潮湿的地方接触螨虫所致。除了及时防鼠、灭鼠，接种出血热疫苗，是最经济、最科学、最有效的措施。
    </div>

    <div class="demo2">
        每年10月至次年1月，是流行性出血热的高发季节。厦门市疾控中心提醒市民，出血热的发病区域集中在农村和城市边缘地带，城市居民染上此病主要是因为在野外、草地或者其他潮湿的地方接触螨虫所致。除了及时防鼠、灭鼠，接种出血热疫苗，是最经济、最科学、最有效的措施。
    </div>
</body>
</html>

原文地址：https://blog.csdn.net/m0_47900991/article/details/109086697?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168474917116800217217324%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=168474917116800217217324&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~baidu_landing_v2~default-4-109086697-null-null.142^v87^koosearch_v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88

本文章网址:https://www.sjxi.cn/detil/1ab8e5c7604048aaab6ed9c315a86da4

最新评论

当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号