Day11-网页布局实战-CSS3动画

文章目录

  • 一 CSS3动画
    • 1 2D动画
      • 案例1-鼠标输入移入DIV 让图片旋转90度
      • 案例2-鼠标输入移入DIV 缩放图片
      • 案例3-贯穿项目-DIV移动
    • 2 animation动画
      • 播放器
      • 案例1-基础案例
      • 案例2-使用百分比关键帧定义动画
      • 案例3-旋转的图片
      • 案例4-贯穿案例-轮播图
    • 3 多余文本省略号...代替
      • 案例1-多余文本...代替
    • 4 雪碧图技术(了解)

一 CSS3动画

1 2D动画

  • css3提供了transiform属性来对图形在2D上进行一系列的 旋转、缩放、位移等

  • 一般搭配hover以及transition来使用

rotate 旋转 
scale  缩放 
translate 位移 
skew	倾斜
选择器 {transiform: rotate(10deg) scale(2) translate(100px,0) }
	旋转10度	体积放大2倍	往右移动100像素

案例1-鼠标输入移入DIV 让图片旋转90度

Day11-网页布局实战-CSS3动画_第1张图片

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>Documenttitle>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            border: 1px red solid;
            display: flex;
            justify-content: center;
            align-items: center;
        }


        .box1 img{
            transition: all 1s;
        }

        .box1:hover img{
            /* 
                transform:2D动画要配合 过度 和悬浮一起使用
                    rotate 旋转
            */
            transform: rotate(90deg);
        }
    style>
head>
<body>
    <div class="box1">
        <img src="./img/icon-1.png" alt="">
    div>
body>
html>

案例2-鼠标输入移入DIV 缩放图片

Day11-网页布局实战-CSS3动画_第2张图片

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>Documenttitle>
    <style>
        div{
            width: 260px;
            height: 350px;
            border: 1px solid red;
            /* 内容溢出隐藏 */
            overflow: hidden;
            position: relative;
        }
        div img{
            width: 100%;
            /* 消除图片的基线 */
            vertical-align: top;
            /* 过度 */
            transition: all 1s;
        }
        /* 当鼠标移动到div时,放大图片 */
        div:hover img{
            transform: scale(1.2);
        }
        /* 使用伪元素做一个浏览按钮 */
        div::after{
            content: "快速浏览";
            width: 100px;
            height: 50px;
            background-color: white;
            text-align: center;
            line-height: 50px;
            /* 居中 */
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            /* 透明不显示 */
            opacity: 0;
            /* 过度 */
            transition: all 2s;
        }
        /* 当鼠标移动到div时显示伪元素 */
        div:hover::after{
            opacity: 0.6;
            cursor: pointer;
        }
    style>
head>
<body>
    <div>
        <img src="./images/i1.jpg" alt="">
    div>
body>
html>

案例3-贯穿项目-DIV移动

Day11-网页布局实战-CSS3动画_第3张图片

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>Documenttitle>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            vertical-align: top;
        }


        .box{
            width: 268px;
            height: 268px;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            /* 溢出隐藏 */
            overflow: hidden;
        }

        /* 添加伪元素 */
        .box::before{
            content: "";
            display: block;
            width: 268px;
            height: 268px;
            background-color: paleturquoise;
            position: absolute;
            opacity: 0.3;
            top: -268px;
            left: -268px;

            /* 过度效果 */
            transition: all 1s;
        }

        /* 添加伪元素 */
        .box::after{
            content: "";
            display: block;
            width: 268px;
            height: 268px;
            background-color: paleturquoise;
            position: absolute;
            opacity: 0.3;
            top: 268px;
            left: 268px;
            /* 过度效果 */
            transition: all 1s;
        }

        /* 给伪元素添加动画 */
        .box:hover::before{
            transform: translate(268px,268px);
        }

        /* 给伪元素添加动画 */
        .box:hover::after{
            transform: translate(-268px,-268px);
        }
        
    style>
head>
<body>
    <div class="box">
        <img src="./img/s7.jpg" alt="">
    div>
body>
html>

2 animation动画

动画的实现步骤:

  1. 关键帧(动作)

    • css3提供了(@keyframes来定义关键帧)

      • 例子:蹲下(两个关键帧)——开始蹲下——》结束蹲下
  2. animation播放器属性通过控制关键帧来播放动画

播放器

播放器属性
animation-name
设置动画名要和关键帧对应
animation-duration
设置动画时长,单位秒
animation-timing-function
设置动画的执行速率
ease
默认值,前后减速,中间加速
linear
匀速
animation-iteration-count
设置动画的执行次数
infinite
无限次
animation-fill-mode
设置动画结束后保持的状态
forwards
保持结束后的状态
animation-play-state
播放过程中的状态,一般搭配hover使用
paused
暂停

案例1-基础案例

Day11-网页布局实战-CSS3动画_第4张图片

案例2-使用百分比关键帧定义动画

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>Documenttitle>
    <style>

        /* 1定义关键帧 */
        @keyframes move{
            0%{
                transform: translate(0,0);
            }
            25%{
                transform: translate(200px,0);
            }
            50%{
                transform: translate(200px,200px); 
            }
            75%{
                transform: translate(0,200px)
            }  

        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            /* 2使用animation播放器播放动画 */
            animation-name: move;
            /* 设置动画的播放时长 */
            animation-duration: 2s;
            /* 设置动画的播放速率 */
            animation-timing-function: linear;
            /* 设置动画的执行次数 */
            animation-iteration-count: infinite;

        }
    style>


head>
<body>
    <div class="box1">div>
body>
html>

案例3-旋转的图片

Day11-网页布局实战-CSS3动画_第5张图片

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>Documenttitle>
    <style>
        /* 定义关键帧 */
        @keyframes go {
            form{
                transform: rotate(0deg);
            }
            to{
                transform: rotate(360deg);
            }
        }


        img{
            width: 300px;
            border-radius: 200px;
            border: 4px solid #cccccc;
            /* 动画名称 */
            animation-name: go;
            /* 动画时长 */
            animation-duration: 3s;
            /* 动画速率-匀速 */
            animation-timing-function:linear;
            /* 动画一直执行 */
            animation-iteration-count:infinite;
        }
        /* 鼠标移入图片,暂停动画 */
        img:hover{
            animation-play-state:paused;
        }
    style>
head>
<body>
    <img src="./images/lh.png" alt="">
body>
html>

案例4-贯穿案例-轮播图

Day11-网页布局实战-CSS3动画_第6张图片

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>Documenttitle>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        img{
            vertical-align: top;
        }

        /* 定义关键帧 */
        @keyframes banner {
            0%{
                transform: translate(0,0);
            }
            30%{
                transform: translate(0,0);
            }
            50%{
                transform: translate(-33.3%,0);
            }
            80%{
                transform: translate(-33.3%,0);
            }
            100%{
                transform: translate(-66.6%,0);
            }
        }

        .box{
            width: 100%;
            border: 1px red solid;
            overflow: hidden;
        }

        .box .banner{
            width: 300%;
            display: flex;
            /* animation动画 */
            animation-name: banner;
            /* 动画时间 */
            animation-duration: 6s;
            /* 设置动画的执行次数为无限次 */
            animation-iteration-count: infinite;
        }
        .box .banner img{
            width: 100%;
        }
    style>
head>
<body>
    <div class="box">
        <div class="banner">
            <img src="./img/banner1.jpg" alt="">
            <img src="./img/banner2.jpg" alt="">
            <img src="./img/banner1.jpg" alt="">
        div>
    div>
body>
html>

3 多余文本省略号…代替

在页面中经常会遇到文字太多,放不下需要用省略号来实现。

案例1-多余文本…代替




    
    
    
    Document
    


    
"box1"> 落霞与孤鹜齐飞,秋水共长天一色

4 雪碧图技术(了解)

CSS sprites 雪碧图技术(精灵图技术)

将多张小图片有序的组合在一起,形成一张图片。减少网络请求次数,只需要加载一次就能加很多的小图片

https://static.ws.126.net/163/f2e/www/index20170701/images/sprite_img20211126.png

Day11-网页布局实战-CSS3动画_第7张图片

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>Documenttitle>
    <style>
        .box1{
            width: 50px;
            height: 50px;
            background-image: url("./img/20221128094534.png");
            /* 修改背景图片的位置 */
            background-position: -50px -50px;
        }

        .box2{
            width: 50px;
            height: 50px;
            background-image: url("./img/20221128094534.png");
            /* 修改背景图片的位置 */
            background-position: -110px -50px;
        }

        .box1:hover{
            /* 修改背景图片的位置 */
            background-position: -54px -154px;
        }
    style>


head>
<body>
    <div class="box1">div>

    <div class="box2">div>

body>
html>

你可能感兴趣的:(前端,css3,css,动画)