CSS
明致成
人生海海,山山而川,不过尔尔!
展开
-
Vue中使用类封装CSS3实现的序列图动画
考虑到大家现在更多的使用的是VUe,于是呢我考虑把之前发的这篇文章(https://blog.csdn.net/LiyangBai/article/details/105028359)用es6的类去封装,然后在vue中使用它。说干就干~AnimationUtil.jsimport ColorUtil from "./ColorUtil"/** * 生成动画css字符串,生成的动画字符...原创 2020-03-22 15:24:57 · 1411 阅读 · 0 评论 -
使用CSS3利用序列图实现帧动画
问题引出:这几天同事突然发消息问我说,UI给了140张序列图,分4个动画,每个动画有35张图片,问我如何实现。我这脑子,灵光以下,下意识反应就是CSS3实现啊。结果后来同事说她用js的setInterval修改image标签的src属性实现的,而且上传到服务器的时候会发现肉眼根本看不到图片在变化。因此,我想着要不我用JS去生成css的动画字符串,岂不是快哉!说干就干…<div id...原创 2020-03-22 15:13:06 · 2309 阅读 · 0 评论 -
css相关的一些小技巧
1、防止图片因为设定的宽高而变形,可以设置:.className{ object-fit: contain;}如果图片是放在背景图中的,可以设置:.className{ background-image: url(../img.png); background-repeat: norepeat; background-size: 100% 100...原创 2019-02-24 12:47:18 · 151 阅读 · 0 评论 -
css特效
//气泡三角形 利用 border 的 transparent 特性实现.bubbly { position: absolute; top:50%; left: 50%; transform:translate(-50%,-50%); background: #00aabb; border-radius: .4em; width: 260px; padding:...原创 2019-01-25 21:34:46 · 269 阅读 · 0 评论 -
CSS测验
1.CSS 指的是?正确答案:Cascading Style Sheets2.在以下的 HTML 中,哪个是正确引用外部样式表的方法?您的回答:<link rel="stylesheet" type="text/css" href="mystyle.css">3.在 HTML 文档中,引用外部样式表的正确位置是?您的回答:<head> 部分4.哪个 HTML 标...原创 2017-08-09 15:34:52 · 1012 阅读 · 0 评论 -
浅谈Flex布局【CSS】
一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局"。1、任何一个容器都可以指定为 Flex 布局。 display: flex;2、行内元素也可以使用 Flex 布局。display: inline-flex;3、Webkit 内核的浏览器,必须加上-webkit前缀。注意,设为 Flex 布局以后,子元素的float、clear和ve...转载 2017-08-15 19:19:21 · 376 阅读 · 0 评论 -
如何用css美化谷歌浏览器下的滚动条样式?
滚动条组成: ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条) ::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb) ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点...原创 2018-09-10 08:17:10 · 361 阅读 · 0 评论 -
CSS布局要点总结
滚动条的实现,overflow auto的使用注意事项 外部的容器给定宽高,内部的容器设置overflow:auto direction:ltr的具体情况 设置文字方向,ltr是从左到右,rtl是从右到左 两列布局: 左侧:占满整个高度,高度随着右侧的高度变化 position: absolute; top:...原创 2018-10-05 19:58:08 · 269 阅读 · 0 评论 -
CSS3实现水波扩散动画
HTML结构:<div class="water"> <div class="point point1"></div> <div class="point point2"></div> <div class="point point3"><原创 2018-12-20 22:18:03 · 3612 阅读 · 0 评论 -
css3新特性:图片过滤器
css3新特性:图片过滤器img{ -webkit-filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() ;}可以使用多个过滤器,用空格分开...原创 2018-12-20 22:26:08 · 540 阅读 · 0 评论