随笔分类 -  html5/css3

transition实现的鼠标悬停淡入淡出的效果
摘要：transition 代表 过度/opacity 代表 透明度/transform 代表 旋转/1S代表1秒时间/这段代码的意思是 该元素的透明和旋转如果发生变化时会有1秒的过度效果。也就是渐隐渐显，和旋转的动画。 transition主要包含四个属性值：执行变换的属性transition-property，变换延续的时间transition-duration，在延续的时间段内，变换的速率变化transition-timing-function，变换延迟时间transition-delay。 阅读全文
posted @ 2020-04-02 19:20 鬼牛阿飞 阅读(3002) 评论(0) 推荐(0)
css3文字特效和浏览器兼容性
摘要：css3相较于css2.1增加了许多新的特性功能，目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了，需要注意的是css3样式在不同的浏览器可能需要不同的前缀（是浏览器的私有属性，兼容性），此外在代码展示css3浏览器前缀中border-spacing/*表格边框之间的距离*/border-collapse: collapse;/*表格边框是否合并*/，最后通过CSS3实现的文字特效代码，修改参数观察变化 阅读全文
posted @ 2020-03-18 13:05 鬼牛阿飞 阅读(609) 评论(0) 推荐(0)
css3新增边框、阴影、边框、背景、文本、字体
摘要：css3和css有什么区别？简单来讲css3是css的升级版本，css3新增样式有圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。下面是该节总结练习：边框border-radius:边框圆角,值为圆的直径；border-image:url('') x y round/repeat/stretch 实现边框图片环绕/平铺/拉伸，注意设置border:30px solid transparent；背景图background-size的比例乘容器设置盒子大小为背景图大小,通过background-origin调整背景图大小和位置； 阅读全文
posted @ 2020-02-23 16:08 鬼牛阿飞 阅读(843) 评论(1) 推荐(0)
translate移动坐标,rotate实现2D自动旋转,translate和rotate实现2D旋转
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>translate移动坐标,rotate实现2D自动旋转,translate和rotate实现2D旋转</title> 阅读全文
posted @ 2020-02-23 02:00 鬼牛阿飞 阅读(510) 评论(0) 推荐(0)
学习了解CSS3发展方向和CSS样式与优先级
摘要：通过学习CSS3游戏介绍、CSS样式和优先级章节，了解到html5+css3+js不光可以实现动画，其次可以往这个游戏与建模方向发展，更多css3特效访问Gerard Ferrandez on CodePen其次html嵌套css样式分为3种：内联、内部、外部、写法上推荐的是外部，便于代码复用性；样式表的写法是选择器{设置样式}；css中常见的注释为/**/；css的优先级：内联style>id选择器>class选择器>标签；在css中，文本默认字体大小16px，长度单位分为px像素与em倍数；除此之外，颜色写法形式如下：#ffff16进制、yellow英文单词、rgb(216, 17, 173)其中当#ff0000可以简写为#f00,闲话不多扯，直接代码展示： 阅读全文
posted @ 2020-02-21 03:16 鬼牛阿飞 阅读(458) 评论(0) 推荐(0)
简单了解css3样式表写法和优先级
摘要：css3和css有什么区别？首先css33是css（层叠样式表）技术的升级版本，而css是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。然后是内容上css3主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。而css不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。最后在特点上css3新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。css主要能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 阅读全文
posted @ 2020-02-18 23:59 鬼牛阿飞 阅读(585) 评论(0) 推荐(0)