×

css3

超详细 CSS动画-animation(css动画详解)

搬砖的菜鸟 搬砖的菜鸟 发表于2024-04-20 浏览24704 评论0
一、动画 动画( animation)是CSS3中具有颠覆性的特征之ー,可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果。 相比较过渡,动画可以实现更多变化,更多控制,连续自动插放等效果。 1.1 基本使用 制作动画分为两步: 定义动画 @keyframes 使用(调用) 1.2 @keyframes(关键帧) 定义动画 @keyframes animation{ 0%{ ... } 100%{ ... } } 0%是动画的开始,1

css3

CSS3 用动画实现无缝滚动图效果(css3动画图片滚动)

窜天猴 窜天猴 发表于2024-04-19 浏览5577 评论0
如何用CSS实现一串图片在一个固定的盒子里无缝连接的滚动效果: 如上图(想象它是一个无缝连接的滚动图), 那么怎么才能这个无缝滚动的效果呢? 1.首先准备一组长宽一样图片, 六七个就差不多了, 然后创建一个盒子,给这个盒子设置宽高(宽度尽量和图片一致,避免图片被拉伸, 宽度取决于你想让你个图片同时出现在视线内) 如上图, 我设置的是让这个盒子居于屏幕中心, 然后给了宽高和边框 2.在盒子里添加ul li标签(记得去除样式) 每个li标签里放入一张图片 然后让li标签浮起来(flo

css3

什么是盒子模型(什么是盒子模型?它的属性包括哪些?)

网站制作 网站制作 发表于2024-04-19 浏览19758 评论0
1.什么是盒子模型 CSS盒子模型(Box model)就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页中所有元素都具备以下四个属性 首先一个盒模型包含了padding(内边距)margin(外边距)border(边框)内容(content)也就是元素本身的width,height 2.盒模型能够给我们解决什么问题: 盒子模型主要是针对页面布局的时候来使用,他规范了我们页面的所有所有元素的一个布局规范是由外向内进行布局。 盒模型由外向内:margin(外边距)bord

css3

transform-origin属性详解

加载失败…… 加载失败…… 发表于2024-04-19 浏览8272 评论0
 transform-origin用于设置动画的基点(中心点) , 适用于所有块级元素及某些内联元素。         必须配合transform使用  默认情况下,元素的动作参考点为元素盒子的中心        可以设置九个位置的值:水平方向:  left    center      right                                                                     0       50%       1

css3

CSS入门学习笔记(案例+详解)(css教程笔记)

小小小 小小小 发表于2024-04-19 浏览3438 评论0
一、CSS简介 1、什么是CSS? CSS 指的是层叠样式表 (Cascading Style Sheets) CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素 2、为什么使用CSS? 层叠样式复用,便于后期维护和修改 可控制内容与样式的布局,让页面更精美 3、CSS的作用 对网页的布局、颜色、背景、宽度、高度、字体进行控制 用于布局和定位,设置页面的外观样式,让页面更精美 二、CSS语法 1、CSS基础语法 CSS由选择器和声明块组

css3

2022年前端面试题整理,持续更新中(前端面试题2020及答案)

dfgdg dfgdg 发表于2024-04-19 浏览49918 评论0
端面试题整理 已同步到掘金、CSDN 掘金地址: https://juejin.cn/post/7075332630417244173 CSDN 地址:https://blog.csdn.net/z1832729975/article/details/123431083 个人整理了很多网上常见的面试题,希望也能通过这来复习 内容有点多,可能 CSDN 上预览效果不好,想要 markdown 文档的可以私信我,推荐使用Typora看 比较好的面试题 2021 年我的前端面试准备2

css3

详解 CSS3中最好用的布局方式——flex弹性布局(看完就会)

Zni Zni 发表于2024-04-19 浏览4979 评论0
文章包含个人理解,错误请指出。 往期css3文章CSS3基础属性大全CSS3动画属性 animation详解(看完就会)CSS3 transform 2D转换之移动 旋转 缩放(详细讲解看完就会)CSS3 Z—Index 详解CSS3 positon定位详解(通俗易懂) 目录 介绍  flex布局的优点缺点以及布局原理   优点   缺点   布局原理 学习         父容器常见属性        

css3

【CSS3】 float浮动与position定位常见问题(个人笔记)

漠然、 漠然、 发表于2024-04-19 浏览4243 评论0
CSDN话题挑战赛第2期 参赛话题:前端技术分享    个人总结的一些知识点,都是以前我在学习float与positon中产生的一些疑问,解决之后把知识点进行了总结。文章包含个人理解,如果有错误,欢迎您来指正。 往期文章 如何完成响应式布局,有几种方法?看这个就够了 详解 CSS3中最好用的布局方式——flex弹性布局(看完就会) [前端CSS高频面试题]如何画0.5px的边框线(详解)CSS3基础属性大全CSS3动画属性 animation详解(看完就会)CSS3 tran

css3

Vue前端项目自适应布局(vue实现自适应布局)

咿呀? 咿呀? 发表于2024-04-19 浏览6993 评论0
一、单位尺寸 px % vw、vh: 窗口 em: 针对父元素的font-size rem:“root em”的缩写,是一个相对长度单位;rem单位作用于非根元素时,相对于根元素(html)字体大小,rem单位作用于根元素字体大小时,相对于其出初始字体大小。 说明: 谷歌浏览器,字体的默认大小是16px; 如果父元素item1的font-size=50px,那么子元素item2的1em=50px。 如果html的顶层font-size为20px; 那么子元素item2的1re

css3

网页设计实验三(超链接与多媒体文件应用)(超级链接可链接本演示文稿的某页网址文件)

xiaoyao xiaoyao 发表于2024-04-19 浏览7327 评论0
+++点击资源索引【查看其它实验】+++ 一 设计简易灯箱画廊 实训 3 超链接与多媒体文件应用 项目 1 设计简易灯箱画廊 使用 Dreamweaver 等软件编写符合以下要求的文档,完成后的效果如图 3-1 所示: (1)文件名:prj_3_1.html。 (2)页面标题:“简易灯箱画廊设计”。 (3)实验所需素材:在 trees 文件夹中提供一个 MP3 文件和 18 个 JPG 文件, 设计页面时可以使用。 (4)效果:鼠标单击任一个图像超链接,在底部浮动框架中显示大图像。 图