css
帆酱
这个作者很懒,什么都没留下…
展开
-
CSS技巧收集——毛玻璃效果
毛玻璃的模糊效果技术使用 css 的filter中的blur属性。即:filter: blur(20px)线上demo:https://my.weblf.cn/alone_page/pages/filter_blur.html代码:<html><head> <meta http-equiv="pragma" content="no-ca...原创 2020-04-14 18:31:59 · 502 阅读 · 0 评论 -
h5 css 瀑布流图片展示
在H5的图片布局中,我们经常遇到容器盒子一致但图片大小不一的情况,如果仅仅展示一列的话,则可以通过调整图片宽度100%来布局,但是如果有二列呢,我们使用css3的column-count属性分列demo查看:https://my.weblf.cn/alone_page/pages/falls_img.html全部代码:<!DOCTYPE html><html la...原创 2020-04-14 16:39:20 · 1008 阅读 · 0 评论 -
H5在浏览器端使用mint-ui
H5在浏览器端使用mint-ui框架,直接通过cdn引入<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"><script src="https://unpkg.com/mint-ui/lib/index.js"></script>线上demo:https://m...原创 2020-03-03 14:59:43 · 1420 阅读 · 0 评论 -
浏览器端使用less
官网地址http://lesscss.cn/1、通过在官网或者GitHub下载less.min.js文件,也可通过官网的cdn引入2、编辑一个less文件test.less(注意,只能用link方式引入,style标签不支持).ccc{ color: red;}3、编辑html页面<!DOCTYPE html><html> ...原创 2020-03-02 22:03:05 · 378 阅读 · 0 评论 -
H5横幅,旗帜飘动动画
核心思路是将已有的图片通过背景图片定位设置在不同的元素上,给元素添加动画,使之看起来有飘动的感觉。如果米有现有图片,则使用截图工具生成图片。参考博文:https://my.oschina.net/codingDog/blog/1839097一、有现成图片线上demo:https://my.weblf.cn/alone_page/css_ani/flag2.html代码:<...原创 2020-02-05 11:56:36 · 2984 阅读 · 0 评论 -
css3使用clip-path裁剪元素
简介clip-pathCSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径,或者作为一个形状。clip-path属性代替了现在已经弃用的剪切clip属性。基本语法clip-source|basic-shape|geometry-box|none一、...原创 2019-12-01 12:18:53 · 1103 阅读 · 0 评论 -
css3改变纯色png图片的颜色
如果本文帮助到你,本人不胜荣幸,如果浪费了你的时间,本人深感抱歉。希望用最简单的大白话来帮助那些像我一样的人。如果有什么错误,请一定指出,以免误导大家、也误导我。本文介绍利用css3的属性:drop-shadow来制造阴影效果来达到改变元素背景色的效果。点击此处查看demo基本语法:filter:drop-shadow(5px 5px 10px black);filter: ...原创 2019-10-16 14:59:46 · 5688 阅读 · 0 评论 -
css弹性布局(flex)
本文转自筑释科长,原文链接:https://blog.csdn.net/ZhushiKezhang/article/details/818390181:概念解读:传统的布局解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。但对于一些特殊的布局方式(如垂直居中),传统盒模型显得有点力不从心,而对弹性布局(flex)来说却很容易实现。200...转载 2019-02-12 15:16:33 · 262 阅读 · 0 评论 -
Vue爬坑之旅(七):给v-html元素添加样式
<template> <div class="box"> <div class="con" v-html="cont"> </div></template>当我们使用v-html渲染页面,使用下面这种方式去修改样式并没有效果,<style scoped lan原创 2019-01-08 23:07:17 · 1056 阅读 · 0 评论 -
css3几种常见的翻页特效
翻页特效线上demo:https://my.weblf.cn/xly/demo/book_hand_back2.htmlhtml:<div class="book preserve-3d"> <div class="now_page point"> <div class="book-page"> <p>第三页...原创 2018-09-11 10:55:08 · 25779 阅读 · 6 评论 -
css3一行或多行文字垂直居中
文字容器高度固定,但容器内部文字个数不知,但要求文字部分垂直居中,利用css3的flex弹性盒子属性可以解决。核心代码:.align-center-vertical{display: flex;align-items: left;justify-content: space-around;flex-direction: column;}示例:<style> .bo...原创 2018-07-24 09:45:21 · 8229 阅读 · 1 评论 -
移动端转盘指针触摸旋转
如果想让一个元素一端固定,然后绕固定的点自动旋转比较容易,但是如果想要用手指控制旋转则就需要考虑偏转这角度的问题了。线上demo:https://my.weblf.cn/xly/demo/time_pal_rote.html话不多说,先上代码:<!DOCTYPE html><html> <head> <meta charset="UT...原创 2018-06-27 14:14:47 · 3681 阅读 · 0 评论 -
使用字蛛压缩字体文件
现在的web页面多多少少会用到特殊字体。在pc一般没什么感觉。但是在手机上打开就会发现由于字体文件太大,不仅影响页面加载速度,也浪费了不少流量。这样,字蛛就诞生了。使用前要先安装字蛛,前提要先安装npm噢: npm install font-spider -g 然后在我们的html文件里面引入font文件:@font-face { font-family:'...原创 2018-05-31 16:59:13 · 3787 阅读 · 5 评论 -
使用css3制作一个简易的环形进度条
话不说,直接上代码:css:section{width:2rem;height:2rem;position: relative;margin:2rem;}.wrap,.circle,.percent{position: absolute; width: 2rem; height: 2rem; border-radius: 50%;}.wrap{top:0; left:0; background...原创 2018-05-31 15:38:56 · 8162 阅读 · 0 评论 -
html中字体在移动端居中方法
一般在pc中我们不论用rem或者px,都可以使文字很好的垂直或水平居中。但是在移动端中,文字的垂直居中会出现差异。本文主要测试的手机是Android,因为ios对于px和rem变现都比较好,所以不做测试。首先我们使用rem来测试,在此已经清除所有默认样式,并且设定行高和父框高度都是1.2rem。仅改变文字的大小。pc中效果:可以看到pc中rem表现良好。Android手机中:android手机中可...原创 2018-05-31 15:28:10 · 14504 阅读 · 0 评论 -
监听CSS动画开始与结束状态
在做前端页面时,如果一个页面有多套动画特效依次播放。我们一般才用动画延时播放,延时时间为前面所有动画播放的总和。不过这样做的话有一些弊端:1、如果动画很多的话会让人感觉很累,因为每个动画动摇计算前方动画所运行的时间。2、如果中间某个动画的运行时间进行修改的话,后面所有的动画都需要修改。所以,如果能监听动画结束事件,就可以完美解决。代码如下:<!DOCTYPE html><htm...原创 2018-05-24 10:04:40 · 5941 阅读 · 0 评论 -
一个简单的双转盘抽奖demo
今天遇到朋友要我给他写个双转盘抽奖功能,需要要两个转盘联动。不好推却得我只能开始动手了,图片什么的都是在网上找的。首先抽奖这玩意的奖品控制当然是在后台啦,不然安全性就太低了。所以我选择先有抽奖结果,再转动转盘。线上demo:https://my.weblf.cn/xly/demo/choujiang/zhuanpan.html废话不多说,先上代码css:*{ ...原创 2018-06-04 15:52:30 · 1917 阅读 · 0 评论