每天学点CSS

最新推荐文章于 2024-08-18 11:36:34 发布
最新推荐文章于 2024-08-18 11:36:34 发布
阅读量132 收藏
点赞数 1
文章标签： html css

精灵图

1.什么是CSS精灵图
CSS精灵图是一种图像合成技术
2.CSS精灵图作用
可以减少请求的次数, 以及可以降低服务器处理压力
3.如何使用CSS精灵图
CSS的精灵图需要配合背景图片和背景定位来使用
4.案例展示代码：` 精灵图

  <style>
        body {
            background-color: #000000;
        }

        div {
            float: left;
           
        }

        .box {
            width: 128px;
            height: 167px;
            background-image: url("../img/timg.jpg");
            background-color: red;

            border: 1px solid;
            background-position: -335px -83px;

        }

        .box1 {
            width: 128px;
            height: 167px;
            background-image: url("../img/timg.jpg");
            background-color: red;

            border: 1px solid;
            background-position: -1068px -82px;


        }

        .box3 {
            width: 128px;
            height: 167px;
            background-image: url("../img/timg.jpg");
            background-color: red;

            border: 1px solid;
            background-position: -1409px -259px;
            }

        .box4 {
            width: 128px;
            height: 167px;
            background-image: url("../img/timg.jpg");
            background-color: red;
            border: 1px solid;
            background-position: -1587px -81px;
            }
    </style>

效果图：在这里插入图片描述

过渡（ transition ）

1.功能：实现元素不同状态之间的平滑过渡。
之前：元素->hover状态 直接切换，从开始状态到结束状态，瞬间完成，中间过程几乎无法查看。
2. 格式：
transition：过渡的属性 完成时间（s） 运动曲线 延迟时间
注： 数值型的属性才可以设置过渡： width,height,color,font-size
3. transition-property 过渡属性：发生变化时，想要有过渡效果的属性。all，全属性。
transition-duration 完成时间：单位是s/ms。
4. transition-timing-function 运动曲线：
a: linear 匀速
b: ease 减速
c:ease-in 加速
d: ease-in-out 先加速后减
5. transition-delay 延迟时间：单位是s 默认为0 过渡多久后生效。 从结束状态返回到开始状态时，也会生效。
6. 代码：

`style>
    .box{
      width: 200px;
      height: 200px;
      background-color: rosybrown;
      transition-property: all;
      transition-duration: 2s;
      transition-timing-function: ease-in;
      transition-delay: 1s;
    }
    .box:hover{
      width: 800px;
      background-color: royalblue;
    }
  </style>
</head>
<body>`

2D转换缩放

1.格式：
transform:scale(水平方向的缩放倍数,垂直方向的缩放倍数)
取值：大于1表示放大，小于1缩小。
2.代码：

`<style>
    .box{
      width: 100px;
      height: 100px;
      margin: 100px auto;
      background-color: saddlebrown;
      transition: all 1s;
    }
    .box:hover{
      transform: scale(0.5);
    }
  </style>`

2D位移

1.格式：
transform:translate(水平偏移量，垂直偏移量)
参数：
正值：向右和向下 负值：反方向。
百分比;盒子本身的宽高*百分比
2.代码：

`<style>
    .box{
      width: 370px;
      height: 452px;
      margin: 100px auto;
      background: url("../img/hb.jpg") no-repeat;
      transition: all 1s;
    }
    .box:hover{
      transform: translate(100%,100%);`

绝对定位居中

1.代码

：`<style>
    .father{
      width: 600px;
      height: 600px;
      position: relative;
      background-color: seagreen;
      margin: 100px auto;
    }
    .son{
      width: 200px;
      height: 200px;
      position: absolute;
      left: 50%;
      top: 50%;
      background-color: steelblue;
      /* margin-left: -100px;
      margin-top: -100px; */
      transform: translate(-50%,-50%);
    }
  </style>`

效果图：在这里插入图片描述

小火箭的制作

1.代码：

<style>
          body {
            background-color:steelblue;
        }

        .box {
            height: 1000px;
            position: relative;
        }

        .huojian {
            width: 100px;
            height: 190px;
            background-image: url("第12天/img/rocket.png");
            position: absolute;
            bottom: 1px;
            left: 500px;
        transition:all 2s ease-in;
        background-color:steelblue;
        


        }
        .huojian:hover{
      transform: translate(0,-800px);  
    }
       

    </style>
</head>

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

</body>

倾斜

  1. transform:skew(水平倾斜角度，垂直倾斜角度)
    单位：deg 角度
    正值：顺时针，负值：逆时针。
    2.代码：
<style>
    .box{
      width: 484px;
      height: 300px;
      margin: 100px auto;
      background: url("../img/zwz.jpg");
    }
    .box:hover{
    transform: skew(0,10deg);
    }

旋转

1.设置旋转的中心点
属性值：px 英文（left center right top bottom） 百分比
百分比是按照自身宽高*百分比计算的。
只写一个值，第二值默认为center。
2.盒子进行旋转
格式：
transform: rotate(角度);
单位：deg 正值为顺时针，负值为逆时针。transform 可以书写多个2D转换，中间用空格隔开。
当rotate和translate在一起的时候，注意书写顺序。 rotate在前，先旋转自身，再按照旋转的角度，进行位移。translate在前，先进行位移，再旋转自身。
3.代码：

.box{
      width: 350px;
      height: 350px;
      margin: 100px auto;
      background-image: url("../img/hb.png");
   transition: all 3s;transform-origin: 10%;
   }

扑克牌

1.代码：

<style>
    .box{
      width: 900px;
      height: 500px;
      position: relative;
      margin: 100px auto;
    }
    .box img{
      width: 250px;
      position: absolute;
      left: 50%;
      top: 0;
      margin-left: -125px;
      transition: all 1s;
      transform-origin: center bottom;
    }
    .box:hover img:nth-child(7){
      transform: rotate(0);
    }
    .box:hover img:nth-child(1){
      transform: rotate(-60deg);
    }
    .box:hover img:nth-child(13){
      transform: rotate(60deg);
    }
    .box:hover img:nth-child(2){
      transform: rotate(-50deg);
    }
    .box:hover img:nth-child(12){
      transform: rotate(50deg);
    }
    .box:hover img:nth-child(3){
      transform: rotate(-40deg);
    }
    .box:hover img:nth-child(11){
      transform: rotate(40deg);
    }
    .box:hover img:nth-child(4){
      transform: rotate(-30deg);
    }
    .box:hover img:nth-child(10){
      transform: rotate(30deg);
    }
    .box:hover img:nth-child(5){
      transform: rotate(-20deg);
    }
    .box:hover img:nth-child(9){
      transform: rotate(20deg);
    }
    .box:hover img:nth-child(6){
      transform: rotate(-10deg);
    }
    .box:hover img:nth-child(8){
      transform: rotate(10deg);
    }
    
  </style>
</head>
<body>
  <div class="box">
    <img src="../img/red.jpg" alt="">
    <img src="../img/red.jpg" alt="">
    <img src="../img/red.jpg" alt="">
    <img src="../img/red.jpg" alt="">
    <img src="../img/red.jpg" alt="">
    <img src="../img/red.jpg" alt="">
    <img src="../img/red.jpg" alt="">
    <img src="../img/red.jpg" alt="">
    <img src="../img/red.jpg" alt="">
    <img src="../img/red.jpg" alt="">
    <img src="../img/red.jpg" alt="">
    <img src="../img/red.jpg" alt="">
    <img src="../img/red.jpg" alt="">
  </div>

效果：设置效果前在这里插入图片描述
设置效果后：在这里插入图片描述

3D转换

1.透视：加给变换盒子的父盒子
设置的用户的眼睛与平面的距离。
透视只是视觉上的呈现，不是真正的3D。

2.代码：

`<style>
    .box{
      width: 500px;
      height: 500px;
      margin: 100px auto;
        perspective: 110px;
        }
         img{
      width: 500px;
      transition: all 2s;
    }
    .box:hover img{
      transform: rotate3d(0.5,0,0,130deg);
      }`

百度钱包旋转

1.代码：

<style>
    body{
      background-color: cornflowerblue;
    }
    .box{
      width: 300px;
      height: 300px;
      border: 1px solid;
      margin: 100px auto;
      position: relative;
    }
    .box>div{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 50%;
      transition: all 2s;
      /* 当盒子旋转过背面时，隐藏 */
      backface-visibility: hidden;
    }
    .box1{
      background: url("../img/bdqb.png") left 0 no-repeat;
    }
    .box2{
      background: url("../img/bdqb.png") right 0 no-repeat;
      transform: rotateY(180deg);
    }
    .box:hover .box1{
      transform: rotateY(180deg);
    }
    .box:hover .box2{
      transform: rotateY(0);
    }

效果图：

在这里插入图片描述

你很易烊千玺
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css 实现类似长纸条折叠的效果
qq_41046662的博客
10-15 559
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"...
css学习
weixin_39111384的博客
04-16 1179
课程目标: 学会使用CSS选择器 熟记CSS样式和外观属性 熟练掌握CSS各种选择器 熟练掌握CSS各种选择器 熟练掌握CSS三种显示模式 熟练掌握CSS背景属性 熟练掌握CSS三大特性 熟练掌握CSS盒子模型 熟练掌握CSS浮动 10.熟练掌握CSS定位 11.熟练掌握CSS高级技巧强化CSS typora-copy-images-to: media CSS的发展历程 从HTML被发明开...
html5——3D案例（音乐盒子、百度钱包）
weixin_30340617的博客
12-21 344
1、音乐盒子：触碰盒子，盖子会打开 2、百度钱包：触碰钱包，钱包，会180度旋转 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ...
2020-11-05
Zqqqs的博客
11-05 220
今日所学CSS基础 cascadingstylesheets层叠样式表。 规定了HTML标签在网页上的显示方式。 HTML：规定网页上有什么内容 css：规定网页上这些内容的样式。 使用HTML写样式的痛点： 1.代码比较臃肿。 2.可读性比较差。 3.不便于维护。 4.对搜索引擎不友好，搜索引擎更关心内容。 使用css的优点： 1.代码比较简洁 2.可读性比较强 3.便于维护 4.更关心内容，对搜索引擎比较友好...
css的日常小知识
qq_48315915的博客
11-09 170
CSS的日常 关于字体 字体字号以及大小 一：字体字号 1.网页中，中文主要使用的字体：微软雅黑，宋体，黑体；英文：Arial，Consolas，英文在前，中文在后。中文常用字体：微软雅黑：Microsoft Yahei宋体：SimSun黑体：SimHei。 2.取值方式：数字，单注（注意：数字：100-900，单词：lighter normal,bold,bolder） 3。特殊用法：.fwb:font-weight: bold; fw:font-weight: normal; （注：必须写的两个值;字号
用HTML和CSS3做个鱼,CSS3实现阴阳鱼
weixin_42136837的博客
06-18 549
直接上代码：阴阳鱼body { background: #F0DFAD; }.yin-yang { position: fixed; top: 50%; left: 50%; margin: -5rem 0 0 -5rem; height: 10rem; width: 10rem; border-radius: 50%; background: -webkit-linear-gradient(to...
CSS学习
qq_43310689的博客
12-10 433
文章目录CSS1、CSS语法规则1.1、书写位置1.2、选择器2、CSS的常用属性2.1、background-image、background-color2.2、font字体2.3、text文本2.4、无序列表样式2.5、table2.6、超级链接伪类3、盒子模型3.1、padding内边距3.2、margin外边距3.3、width、height4、定位5、CSS+DIV6、filter过滤器 CSS 层叠样式表(Cascading Style Sheets, CSS)是一种样式表语言，用于描述用标记语
CSS学习中的瓶颈期深入分析
09-25
瓶颈期的表现通常是虽然每天都在学习，积累经验，但感觉进步缓慢，无法突破现有的技术水平。学习者可能会发现自己在工作中遇到的问题依然无法解决，或者对于新的CSS特性理解不透彻。这种状态就像瓶子的颈部，虽然...
每日CSS
02-13
"每日CSS"这个主题，就是针对这一目标，每天分享一个或多个CSS相关的知识点，逐步积累，最终形成丰富的CSS技能库。 1. **选择器**: CSS的选择器是其核心部分，通过选择器我们可以指定要应用样式的元素。例如，通用...
100天CSS
03-04
这个项目通常会包含一系列的实践练习、教程和挑战，每天一个主题，逐步深入，从基础到高级，全方位提升用户的CSS技能。 1. **CSS基础知识**：在开始阶段，学习者会接触到CSS的基本概念，如选择器（类选择器、ID选择...
CSS教程合集.zip
01-29
这是一个快速学习CSS的教程，可能按照每天的学习主题进行安排，例如第一天可能介绍基础概念和选择器，第二天讲解盒模型和布局，第三天涉及CSS动画和过渡，第四天探讨响应式设计，最后一天可能是实践项目或案例分析。...
学DIV CSS技术,如何入门?
09-27
同时，设定明确的学习目标和计划，如每天学习一定量的新概念或完成一个小项目。 最后，不要忽视与其他学习者的交流。参加在线社区、讨论组或线下活动，与同行交流经验，共同进步。通过持续的学习和实践，你会发现，...
HTML静态网页成品作业(HTML+CSS)——自行车介绍网页设计制作(1个页面)
2301_78945238的博客
08-15 374
HTML静态网页成品作业(HTML+CSS)——自行车介绍网页设计制作(1个页面)
HTML知识点——CSS中几种常用的选择器
qq_62859013的博客
08-15 287
CSS中的几种常用的选择器
使用HTML和cgi控制I.MX6ULL开发板上的LED
kaneki_lh的博客
08-14 243
在led.html网页中输入设备号为1，操作指令为1则可开灯，操作指令为0则关灯。
JS（三）——更改html内数据
初叙
08-15 265
JavaScript更改html内数据
响应式Web设计：纯HTML和CSS的实现技巧
vvvae1234的博客
08-18 492
互联网已经成为人们日常生活中不可或缺的一部分，随着移动设备的普及，用户访问网站的方式也发生了巨大变化。因此，响应式Web设计（Responsive Web Design, RWD）应运而生。它的目标是使Web页面能够根据不同设备屏幕的大小和分辨率自动调整布局，以提供最佳的用户体验。本文将深入探讨响应式Web设计的基本概念、实现技巧，并通过实际操作案例来展示如何使用纯HTML和CSS构建一个响应式网页。
HTML常用标签和CSS的运用，以及使用HTML做一个简历
最新发布
FHY26828的博客
08-18 871
HTML（超文本标记语言）是一种用于创建网页的标准标记语言，以及使用html做一份简历
HTML补充——表格&表单
Fan_web的博客
08-14 1506
本文补充了HTML中的一些表格和表单的标签，下文继续分享CSS中的动画知识内容。
web 全栈学习计划细化每天
03-12
我可以回答这个问题。对于 web 全栈学习计划，你可以按照以下步骤进行细化： 1. 确定学习目标：你想成为一名前端工程师、后端工程师还是全栈工程师？ 2. 学习前端知识：HTML、CSS、JavaScript、jQuery、Vue.js、React 等。 3. 学习后端知识：Node.js、Express、MongoDB、MySQL、Redis 等。 4. 学习全栈知识：前后端的整合、RESTful API、WebSocket 等。 5. 制定学习计划：根据自己的时间和能力，制定每天的学习计划，包括学习内容、学习时间和学习方法。 6. 实践项目：通过实践项目来巩固所学知识，提高自己的技能。 希望这些步骤可以帮助你制定出一份有效的 web 全栈学习计划。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值