前端三剑客 —— 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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++设计模式:策略模式(二)

1、定义与动机 定义一系列算法&#xff0c;把它们一个个封装起来&#xff0c;并且使它们可互相替换&#xff08;变化&#xff09;&#xff0c;该模式使得算法可独立于使用它的客户程序&#xff08;稳定&#xff09;而变化&#xff08;扩展&#xff0c;子类化&#xff09; 在软…

【QT入门】 Qt代码创建布局综合运用:仿写腾讯会议登陆界面

往期回顾&#xff1a; 【QT入门】 Qt代码创建布局之水平布局、竖直布局详解-CSDN博客 【QT入门】 Qt代码创建布局之栅格布局详解-CSDN博客 【QT入门】 Qt代码创建布局之分裂器布局详解-CSDN博客 【QT入门】 Qt代码创建布局综合运用&#xff1a;仿写腾讯会议登陆界面 一、界面分…

YOLO V8-Detection 【单张图片】 推理详解及部署实现

前言 在实际处理过程中&#xff0c;我们使用YOLO V8进行推理时&#xff0c;通常会针对一张图片进行推理。如果需要对多张图片进行推理&#xff0c;则可以通过一个循环来实现对图片逐张进行推理。 单张图片推理时&#xff0c;需要注意图片的尺寸必须是32的倍数&#xff0c;否则…

【氮化镓】缓冲层结构对GaN HEMT射频性能的影响

【Effect of different layer structures on the RF performance of GaN HEMT devices】 研究总结&#xff1a; 本研究探讨了不同缓冲层结构对氮化镓高电子迁移率晶体管&#xff08;GaN HEMT&#xff09;射频性能的影响。通过对比三种不同缓冲层结构的GaN HEMT设备&#xff0…

海外问卷调查项目拆解(操作全流程演示)保姆级攻略具体操作

海外问卷调查是怎么做的&#xff1f;好做吗&#xff1f; 关于这个问题&#xff0c;不管我说好做、或者不好做&#xff0c;都并不能解决问题&#xff1b; 所以&#xff0c;这篇文章直接把做题的全过程展现给你看&#xff0c;你自己去真实地感受一下&#xff0c;这个玩意儿到底…

【电商API数据采集接口接入】如何搭建电商数据指标体系?

01 什么是好的数据指标&#xff1f; 电商商品数据采集API接口接入 01 前言 做数据分析的工作已经将近6年了&#xff0c;形形色色的业务方也合作了不少。大部分业务方都给我一个感觉就是我什么数据指标都要看&#xff0c;越多越多好&#xff0c;即使看了这些指标之后什么事…

智慧开发平台免!费!申请试用

原创 F学社 F学社 2024-04-01 17:13 江苏 扫描二维码即可申请试用 01 智慧开发平台简介 F1 WIFI智慧教育平台是可支持线上线下联动的基于FPGA的口袋式数字系统学习平台。其采用了AMD、Altera、安路、高云等国外国内主流公司的FPGA进行数字系统方向的教学实验设计&#xff0c…

【力扣刷题日记】1421.净现值查询

前言 练习sql语句&#xff0c;所有题目来自于力扣&#xff08;https://leetcode.cn/problemset/database/&#xff09;的免费数据库练习题。 今日题目&#xff1a; 1421.净现值查询 表&#xff1a;NPV 列名类型idintyearintnpvint (id, year) 是该表主键(具有唯一值的列的…

策略模式图

策略模式 小小的图解 主要的三个角色 Strategy—抽象策略角色ConcreateStrategy—具体策略角色Context—上下文角色 封装了对具体策略的调用可以使用set的依赖注入也可以使用构造方法 核心是上下文角色 只要调用上下文角色就行&#xff0c;实现解耦 策略 工厂 将上下文角…

【滑动窗口】Leetcode 最小覆盖子串

题目解析 76. 最小覆盖子串 本题将意思转换一下&#xff1a;寻找最小可重复字符的字串 算法讲解 使用滑动窗口哈希表&#xff0c;进行入窗口->判断哈希表中的元素是否符合最小可重复子串的条件->出窗口 class Solution { public://检查两个hash表中的字符bool check…

【快捷部署】011_PostgreSQL(16)

&#x1f4e3;【快捷部署系列】011期信息 编号选型版本操作系统部署形式部署模式复检时间011PostgreSQL16Ubuntu 20.04Docker单机2024-03-28 一、快捷部署 #!/bin/bash ################################################################################# # 作者&#xff1…

leetcode代码记录(买卖股票的最佳时机

目录 1. 题目&#xff1a;2. 我的代码&#xff1a;小结&#xff1a; 1. 题目&#xff1a; 给定一个数组 prices &#xff0c;它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票&#xff0c;并选择在 未来的某一个不同的日子 卖出该股…

动物造句子

动物造句子 附小看重家校互动&#xff0c;有时候会邀请各行各业的家长到班里讲课。德德上小学二年级时&#xff0c;有一次&#xff0c;班主任提出邀请我去讲课。 我那时候只给研究生讲一门课《信息论》&#xff0c;这是一门对于研究生来说都比较抽象的课。我怎么把信息论的内…

让ECC升级S/4HANA一步到位的“全面升级方案包”

SAP最新一代商务套件S/4HANA比ECC系统拥有更高性能的存储数据库HANA、更个性化的Fiori用户界面设计系统&#xff0c;能够大大提升系统效率&#xff0c;带来便捷、高效、良好的用户体验。但企业原先使用的ECC系统里面保存了积累多年的关键流程和数据&#xff0c;让企业面对系统升…

力扣爆刷第111天之CodeTop100五连刷41-45

力扣爆刷第111天之CodeTop100五连刷41-45 文章目录 力扣爆刷第111天之CodeTop100五连刷41-45一、232. 用栈实现队列二、4. 寻找两个正序数组的中位数三、31. 下一个排列四、69. x 的平方根五、8. 字符串转换整数 (atoi) 一、232. 用栈实现队列 题目链接&#xff1a;https://le…

Android 代码自定义drawble文件实现View圆角背景

简介 相信大多数Android开发都会遇到一个场景&#xff0c;给TextView或Button添加背景颜色&#xff0c;修改圆角&#xff0c;描边等需求。一看到这样的实现效果&#xff0c;自然就是创建drawble文件&#xff0c;设置相关属性shap&#xff0c;color&#xff0c;radius等。然后将…

观察者模式 C++

&#x1f442; Honey Honey - 孙燕姿 - 单曲 - 网易云音乐 目录 &#x1f33c;前言 &#x1f33c;描述 &#x1f382;问题 &#x1f4aa;解决方案 &#x1f232;现实场景 代码 场景1 -- 报纸发行 场景 解释 代码 场景2 -- 气象资料发布 场景3 -- 过红绿灯 &#x…

渗透测试:数据库UDF提权(linux)

目录 开头: 1.UDF提权简介&#xff1a; 1.1共享库文件(UDF文件)指定目录&#xff1a; 版本特征&#xff1a; 操作系统版本&#xff1a; 2.靶场UDF提权复现 提权前提 1.要有一个高权限的MySQL的账号 ​编辑 2.MySQL的权限配置secure_file_priv为空 3.必须有存放UDF文件的…

nginx详细配置,高可用

Nginx是一款高性能的Web服务器和反向代理服务器&#xff0c;通常用来进行负载均衡&#xff0c;提供高可用的服务。而Keepalived是一款开源的高可用性解决方案&#xff0c;可以提高系统的可靠性和稳定性。使用Nginx和Keepalived来配置高可用服务的具体步骤如下&#xff1a;1. 安…

题库管理系统-基于Springboot实现JAVA+SQL离散数学题库管理系统(完整源码+LW+翻译)

基于Springboot实现JAVASQL离散数学题库管理系统(完整源码LW翻译) 概述&#xff1a; 本系统具体完成的功能如下&#xff1a; 1题库的管理与维护&#xff1a;新题的录入&#xff0c;修改&#xff0c;删除等功能。 2生成试卷&#xff1a;包括自动生成与手工改动&#xff0c;要…