前端三剑客 —— CSS (第四节)

目录

内容回顾:

1.常见样式

2.特殊样式

特殊样式

过滤效果

动画效果

动画案例:

渐变效果

其他效果:

多列效果

字体图标(icon)


内容回顾:

1.常见样式

        text-shadow x轴 y 阴影的模糊程度 阴影的颜色

        box-shadow

        border-radio 实现圆角

        margin 内边距

        padding 外边距

        background

2.特殊样式

        媒体查询:@media

        自定义字体:@font-face {

        font-family:自定义名称;

        src:url(“字体的路径”);

        }

        选择{

                font-family:自定义名称;

        }

        转换:transform

        移动:translate()

        旋转:rotate()

        缩放:scale()

        翻转:skew()

        综合:matrix()

特殊样式

过滤效果

从一个状态变为另一个状态的过程,要想有过滤效果,我们就需要又触发条件,通常触发的条件为鼠标移动到元素上(hover)

单项过渡

多项过渡

transition这个属性的值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>过渡效果比较</title>

    <style>

        .box {

            width: 200px;

            height: 200px;

            background-color: #317FE5;

            /*transition: width 5s ease 2s;*/

            /*transition: width 3s linear;*/

            /*transition: width 3s ease-in;*/

            /*transition: width 3s ease-in-out;*/

            transition: width 3s ease-out;

        }

        .box:hover {

            width: 500px;

        }

    </style>

</head>

<body>

<div class="box"></div>

</body>

</html>

动画效果

在CSS3中提供了基于CSS动画效果,我们需要先定义动画,然后再使用动画

定义动画使用@keyframes,从而使用动画animate

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>动画效果</title>

    <style>

        /*.box {*/

        /*    width: 200px;*/

        /*    height: 200px;*/

        /*    background: #317FE5;*/

        /*    transition: transform 2s;*/

        /*}*/

        /*.box:hover {*/

        /*    transform: translateX(100px);*/

        /*}*/

        /* 定义动画 */

        @keyframes myAnimate {

            from {

                left: 5px;

                background: #317FE5;

            }

            to {

                left: 500px;

                background: red;

            }

        }

        .box {

            width: 200px;

            height: 200px;

            background: #317FE5;

            animation: myAnimate 5s;

            position: absolute;

            left: 5px;

            top: 5px;

        }

    </style>

</head>

<body>

<div class="box"></div>

</body>

</html>

另一个效果

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>动画效果</title>

    <style>

        /* 定义动画 */

        @keyframes myAnimate {

            0% {

                left: 5px;

                top: 5px;

            }

            25% {

                left: 500px;

                top: 5px;

            }

            50% {

                left: 500px;

                top: 200px;

            }

            75% {

                left: 5px;

                top: 200px;

            }

            100% {

                left: 5px;

                top: 5px;

            }

        }

        .box {

            width: 200px;

            height: 200px;

            background: #317FE5;

            animation: myAnimate 5s;

            position: absolute;

            left: 5px;

            top: 5px;

        }

    </style>

</head>

<body>

<div class="box"></div>

</body>

</html>

动画属性

属性

描述

@keyframes

规定动画。指定

css样式

animation

所有动画属性的简写属性,除了 animation-play-state 属性。

动画名称

animation-name

规定 @keyframes 动画的名称。

动画名称

animation-duration

规定动画完成一个周期所花费的秒或毫秒。默认是 0。

数值

animation-timing-function

规定动画的速度曲线。默认是 "ease"。

ease-in-out、linear、ease、ease-in、ease-out

animation-delay

规定动画何时开始。默认是 0。

数值

animation-iteration-count

规定动画被播放的次数。默认是 1。

数值或者infinite

animation-direction

规定动画是否在下一周期逆向地播放。默认是 "normal"。

normal、alternate

animation-play-state

规定动画是否正在运行或暂停。默认是 "running"。

paused、running

animation-fill-mode

规定对象动画时间之外的状态。

none、forwards、backwards、both

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>动画属性介绍</title>

    <style>

        .box {

            width: 200px;

            height: 200px;

            background: #317FE5;

            position: absolute;

            top: 5px;

            left: 5px;

            /*animation: myMove 5s;*/

            /* 指定动画名称 */

            /*animation-name: myMove;*/

            /* 定义动画持续时间,单位是秒或毫秒 */

            /*animation-duration: 3s;*/

            /* 定义动画执行的效果 */

            /*animation-timing-function: ease-in;*/

            /* 定义动画执行次数,默认为 1 次,如果希望无限次,则值为 infinite */

            /*animation-iteration-count: infinite;*/

            /*animation-iteration-count: 1;*/

            /* 定义动画的运行方向 */

            /*animation-direction: alternate-reverse;*/

            /*animation-direction: alternate;*/

            /*animation-play-state: paused;*/

            animation: myMove 3s ease-in infinite alternate;

        }

        @keyframes myMove {

            from {

                /*background: #317FE5;*/

                left: 5px;

                top: 5px;

            }

            to {

                /*background: red;*/

                left: 200px;

                top: 5px;

            }

        }

    </style>

</head>

<body>

<div class="box"></div>

</body>

</html>

动画案例:

定义两个圆,一个圆逆时针旋转,另一个圆顺时针旋转。

下图是定义分析

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>动画的案例</title>

    <style>

        .outer {

            width: 300px;

            height: 300px;

            background: url("image/5.jpeg") no-repeat center center;

            overflow: hidden;

            border-radius: 50%;

            /*transform: translateY(50%);*/

            position: absolute;

            left: 50%;

            top: 50%;

            margin-top: -150px;

            margin-left: -150px;

            animation: outerAnimate 5s linear infinite;

        }

        .inner {

            width: 200px;

            height: 200px;

            background: url("image/7.jpeg") no-repeat center center;

            /*transform: translate(25%, 25%);*/

            border-radius: 50%;

            position: absolute;

            left: 50%;

            top: 50%;

            margin-left: -100px;

            margin-top: -100px;

            animation: innerAnimate 3s linear infinite;

        }

        @keyframes outerAnimate {

            from {

                transform: rotate(360deg);

            }

            to {

                transform: rotate(0deg);

            }

        }

        @keyframes innerAnimate {

            from {

                transform: rotate(0deg);

            }

            to {

                transform: rotate(360deg);

            }

        }

    </style>

</head>

<body>

<div class="outer">

    <div class="inner"></div>

</div>

</body>

</html>

渐变效果

在CSS3中提供了可以让两种或多种颜色之间的显示平稳过渡。我们只需要使用background-image:linear-gradients 属性指定即可。它的语法为:

简单示例

其他效果:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>渐变效果2</title>

    <style>

        .box {

            width: 300px;

            height: 300px;

            margin: 50px auto;

            border: 1px solid #333333;

            border-radius: 50%;

            /* 可以指定渐变的角度 */

            /*background-image: linear-gradient(180deg, #ff0000, yellow);*/

            /* 可以指定渐变的透明度 */

            /*background-image: linear-gradient(to right, rgba(255,0,0,.5), rgba(255, 255, 0, 0.5));*/

            /* 重复的线性渐变 */

            /*background-image: linear-gradient(red, yellow 10%, green 20%);*/

            /* 径向渐变 */

            background-image: radial-gradient(red, yellow);

        }

    </style>

</head>

<body>

<div class="box"></div>

</body>

</html>

多列效果

在CSS3中提供了将文本内容设计成像报纸一样的多列布局

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>多列效果</title>

    <style>

        .box {

            column-count: 3;

        }

    </style>

</head>

<body>

<h1>下面的数据呈现3列展示</h1>

<div class="box">

    “当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。”

</div>

</body>

</html>

字体图标(icon

阿里 有阿里图标库 可在里面进行下载图标和代码 (百度搜索阿里图标库即可找到)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/596249.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

蓝桥杯-冶炼金属(二分求最大最小)

P9240 [蓝桥杯 2023 省 B] 冶炼金属 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 二分做法&#xff1a; #include<bits/stdc.h> using namespace std; #define int long long const int N 1e410; int n,a,b; int v[N],cnt[N]; int check(int x){for(int i1;i<n;i…

JS详解-设计模式

工厂模式&#xff1a; 单例模式&#xff1a; // 1、定义一个类class SingleTon{// 2、添加私有静态属性static #instance// 3、添加静态方法static getInstance(){// 4、判断实例是否存在if(!this.#instance){// 5、实例不存在&#xff0c;创建实例this.#instance new Single…

[AIGC] SpringMVC, Filter, Interceptor之间关系详解

在Web应用开发过程中&#xff0c;我们经常需要处理各样的HTTP请求和响应。在Spring框架中&#xff0c;我们主要借助SpringMVC、Filter和Interceptor来处理这些任务。那么&#xff0c;这三者之间有什么关系&#xff0c;又分别扮演着什么角色呢&#xff1f;本文将带你一探究竟。 …

VS Code 配置 cmake

CMake 用法参考 CMake学习 cmake使用详细教程&#xff08;日常使用这一篇就足够了&#xff09;_cmake教程-CSDN博客 手动添加 CMake 编译器的搜索路径 如果没有设置上面的路径&#xff0c;有些编译器是找不到的 指定cmake 生成文件的路径 生成makefile 等文件的路径 可以指…

Linux网卡IP地址配置错误的影响

在Linux系统中&#xff0c;网络配置是保持系统顺畅运行的关键一环。正确配置网卡的IP地址对于确保网络通信的准确性和效率至关重要。然而&#xff0c;如果在这个过程中发生错误&#xff0c;可能会带来一系列问题。让我们一起探讨一下&#xff0c;如果Linux网卡的IP地址配置错误…

网络基础(1)

以下是网络部分整体的学习路线&#xff1a; 网络的发展历程 因为人与人之间是需要合作去完成一些任务的&#xff0c;这也就意味着计算器之间也是需要互相"沟通"的。因为计算机也是人所使用的工具&#xff0c;人都需要互相协作&#xff0c;也就注定了计算机也是需要互…

Toyota Programming Contest 2024#4(AtCoder Beginner Contest 348)(A~D)

A - Penalty Kick i,1~N。如果 i 是 3 的倍数输出x&#xff0c;否则输出o #include <bits/stdc.h> //#define int long long #define per(i,j,k) for(int (i)(j);(i)<(k);(i)) #define rep(i,j,k) for(int (i)(j);(i)>(k);--(i)) #define debug(a) cout<<#…

你离涨薪只差一步,深入Linux内核架构与底层原理,让你薪资疯长

第一章linux总览 第二章Linux内核架构 第三章内核数据结构 第四章Linux系统的启动 第五章进程(重点) 第六章内存管理(重点) 第七章安全 第八章网络(重点) 自我介绍一下&#xff0c;小编13年上海交大毕业&#xff0c;曾经在小公司待过&#xff0c;也去过华为、OPPO等大厂&…

【每日刷题】Day3

【每日刷题】Day3 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;每日刷题&#x1f34d; 目录 1. 69. x 的平方根 - 力扣&#xff08;LeetCode&#xff09; 2. 70. 爬楼梯 - 力扣&#xff08;LeetCode&#xff09; 3. 118. 杨辉三…

苹果终止电车项目后大裁员,押注家用机器人,这会是Next Big Thing吗?

ChatGPT狂飙160天&#xff0c;世界已经不是之前的样子。 新建了免费的人工智能中文站https://ai.weoknow.com 新建了收费的人工智能中文站https://ai.hzytsoft.cn/ 更多资源欢迎关注 新的出路&#xff0c;苹果能让我们耳目一新吗&#xff1f; 苹果公司压力山大&#xff0c;何以…

关于Liunx下的进程概念

目录 基本概念 关于进程的描述 --- PCB task_struct-PCB的一种 task_ struct内容分类 如何查看进程 通过系统调用获取进程标识符 基本概念 书本概念&#xff1a;程序的一个执行实例&#xff0c;正在执行的程序等 内核观点&#xff1a;担当分配系统资源&#x…

【最新可用】Claude国内镜像,可上传图片,可用Claude3全系模型(包括Pro版本的Opus)!亲测比GPT好用!

亲测可用&#xff0c;镜像地址&#xff1a;Claude 3 镜像 使用方法 访问镜像&#xff1a;Claude 3 镜像 2. 点击设置&#xff0c;配置授权码&#xff0c;关闭设置。这里免费赠送一个体验版的授权码 sk-SZcJyvx3RXRID624E2D3795578Df44C7Af03F2909a8f5eA0 即可发起对话啦&…