css3
关注
分享
扫一扫
想要飞翔的小猪
这个作者很懒，什么都没留下…
展开
-
前端动画实现的常见方法
前端动画实现的常见方法SVGALottie的json动画css3动画SVGA地址：http://svga.io/intro.htmlSVGA 是一种跨平台的开源动画格式，同时兼容 iOS / Android / Web。SVGA 除了使用简单，性能卓越，同时让动画开发分工明确，各自专注各自的领域，大大减少动画交互的沟通成本，提升开发效率。动画设计师专注动画设计，通过工具输出 svga 动画文件，提供给开发工程师在集成 svga player 之后直接使用。动画开发从未如此简单！SVGA 除了使用简单原创 2021-05-08 11:02:45 · 274 阅读 · 0 评论 -
css3 3D立方体
先看下效果图：直接看代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.原创 2018-10-16 22:26:31 · 429 阅读 · 0 评论 -
CSS3 mix-blend-mode的使用
CSS3 新增了一个很有意思的属性 -- mix-blend-mode ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。 -->mix-blend-mode 用于多个不同标签间的混合模式mix-blend-mode 描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。我们将 PS ...原创 2018-11-27 10:08:04 · 14609 阅读 · 2 评论 -
CSS3 background-blend-mode的使用
除了 mix-blend-mode ，CSS 还提供一个 background-blend-mode 。也就是背景的混合模式。可以是背景图片与背景图片的混合，也可以是背景图片和背景色的之间的混合。background-blend-mode 的可用取值与 mix-blend-mode一样，不重复介绍，下面直接进入应用阶段。 案例一： 对于 background-blend-mo...原创 2018-11-27 11:53:23 · 2694 阅读 · 0 评论 -
一些css常用的简单样式描述
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-12-08 10:45:42 · 351 阅读 · 0 评论 -
css实现页面底部固定在屏幕最下方,内容占满屏后紧跟其后的两种方法
1.只针对底部高度固定的情况，不能解决底部高度不固定的情况，原理：主要内容放在page-main里面，page-container最小高度100%（注意这里html，body高度也要设为100%），position为relative。footer的position为absolute，相对于page-container居于底部。page-main有个padding-bottom为footer的高...原创 2019-01-18 15:21:17 · 24869 阅读 · 1 评论 -
css3 filter 简单实用 与background-blend-mode结合实用
这个两个属性就不多说了，直接上代码，看效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"...原创 2019-05-16 15:55:08 · 1265 阅读 · 0 评论 -
CSS3水平抛物线动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <style> * { pa...原创 2019-08-12 09:53:13 · 1114 阅读 · 0 评论 -
简单的css3d柱状图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2019-08-26 13:45:50 · 1177 阅读 · 0 评论 -
CSS object-fit属性
首先了解下object-fit的几个属性： object-fit: fill; object-fit: contain; object-fit: cover; object-fit: none; object-fit: scale-down;解释：fill: 中文解析“填充”。...原创 2018-10-19 11:32:44 · 3085 阅读 · 0 评论 -
perspective和tramsform-style
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。提示：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。 tramsform-style:使被转换的子元素保留其 3D 转换...原创 2018-10-16 17:55:29 · 418 阅读 · 0 评论 -
左右点击滚动
index.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"&a原创 2018-07-15 17:18:17 · 380 阅读 · 0 评论 -
css 瀑布流样式的三种方法
可以有多列,每一个item(单元格)的高度可以不相同,但是宽度必须一样.排列的方式是,从左往右排列,哪一列现在的总高度最小,就优先排序把item(单元格)放在这一列.这样排完所有的单元格后,可以保证每一列的总高度都相差不大,不至于,有的列很矮,有的列很高.这样就很难看了 一、1、column-count 把div中的文本分为多少列2、column-width 规定列宽3、colum...转载 2018-08-20 16:02:51 · 3167 阅读 · 0 评论 -
验证码
这个验证码不是短信验证码，具体情况看代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0原创 2018-09-17 11:45:10 · 140 阅读 · 0 评论 -
vue 移动端城市搜索列表，实现左右两边联级滚动
页面效果：1.在网上找到了一个已经包含的城市数据，这个可以自己在网上找，根据数据格式对应的渲染add.jsmodule.exports = {"A":{"key":"A","item":[{"city":"\u5b89\u5e86","N":"30.31","E":"117.02","firststr":"A"},{"city":"\u6fb3\u95e8\u5e02","N":"2...原创 2018-09-10 16:17:49 · 2750 阅读 · 8 评论 -
vue 简单弹出框
<template><div class="storeList"><transition name="fade"><div class="imgMask" v-if="showBigImg" @click.stop="showBigImg=!showBigImg"> &a原创 2018-08-01 11:29:50 · 6028 阅读 · 0 评论 -
css3卡片3D翻转翻面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-09-26 17:21:35 · 600 阅读 · 0 评论 -
css3 3D相册
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>旋转相册</title> <style type="text/css">原创 2018-09-27 10:58:29 · 702 阅读 · 0 评论 -
css3 clip-path属性
1.clip-path 属性可以通过定义裁剪区域来决定目标元素哪个区域可见，哪个区域不可见，也就是只有在闭合路径内的部分才显示，区域以外的部分就不显示。可以通过url 引入内嵌的或者外置的SVG，又或者是直接用自带的形状为clip-path 属性指定路径。 Clip-path 属性是clip属性的替代者，也可以说是click 属性的升级版。2.基本语法：/* Keyword values...原创 2018-10-18 09:35:53 · 3307 阅读 · 1 评论 -
css强制换行和超出隐藏实现(单行和多行)
<!--white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;white-space:设置如何处理元素内的空白；word-break: normal|break-all|keep-all;word-break：用来标明怎么样进行单词内的断句word-wrap: normal|break-word;word-w...原创 2018-07-17 14:12:34 · 1226 阅读 · 0 评论