经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
 CSS3
Vue+CSS3实现转盘抽奖的示例代码_CSS教程_CSS

Vue+CSS3实现转盘抽奖的示例代码_CSS教程_CSS

最近有个转盘抽奖的需求,搜了一下现有的轮子,有的是用jQuery的动画函数实现的,有的是用canvas绘图然后再用高频率的setTimeout调用旋转方法,前者太老了没法简单移植到vue项目,后者感觉性能表现可能不会太好。也有一些用CSS动画的方案,设计了加速-匀速-减速三个动画,再计算偏转角度让...[2019/6/26]

em与rem有什么区别?移动设备中的适配方案

em与rem有什么区别?移动设备中的适配方案

em与rem之间的区别: 共同点: 它们都是像素单位 它们都是相对单位 不同点: em大小是基于父元素的字体大小 rem大小是基于根元素(html)的字体的大小 实例: <!DOCTYPE html> <html lang="...[2019/6/26]

css3实现蒙版弹幕功能_css3_CSS

最近在b站上看到一种弹幕效果叫做智能防挡弹幕,也就是传说中的蒙版弹幕, 打开之后效果大概是这样的 再也不用担心男神女神的绝世容颜被花里胡哨的弹幕挡住啦,是不是感觉很神奇。 实现原理其实就是类似于ps的蒙版,也就是说将图像的一部分 “隐藏”。这里我们需要用到的是...[2019/6/19]

CSS3中媒体查询结合rem布局适配手机屏幕_css3_CSS

c 3语法: (750px设计图的1rem = 100px) @media only screen and (min-width: 320px) and (max-width: 479px){ html { font-size: 42.67px !impor...[2019/6/11]

详解CSS3 弹性布局快速入门_css3_CSS

前言 弹性布局是新一代的布局方式,传统布局中使用浮动布局会给我们带来不少弊端,如CSS代码高度依赖于HTML代码结构等等,下面我将用几个例子让大家快速学会弹性布局。 PS:弹性布局适用于较简单的场景,过于复杂的场景可以尝试着使用CSS3的Grid布局,弹性布局在PC端中还存在兼容性问题,移...[2019/6/10]

纯CSS3制作页面切换效果的实例代码_css3_CSS

纯CSS3制作页面切换效果的实例代码_css3_CSS

此前写的那个太复杂了,来点简单的核心 <html> <head> <title></title> <style type="text/c "> * { marg...[2019/5/31]

CSS3 分类菜单效果_css3_CSS

CSS3 分类菜单效果_css3_CSS

CSS3 分类菜单效果如下所述: HTML <html> <head> <title></title> <style type="text/c "> #bg...[2019/5/28]

CSS3实现炫酷的切片式图片轮播效果_CSS教程_CSS

今天我们学习如何使用CSS创建一个炫酷的图片轮播组件。它的原理简单的说就是通过单击标签元素(label)来切换背景图像和动画效果。核心是使用与标签关联的单选按钮和使用通用兄弟选择器来定位每张图片。 我们要实现的最终效果是这样的: 轮播的构成 HTML由三个主要部分组成:单选按钮和...[2019/5/27]

css3实现六边形边框的实例代码_css3_CSS

最外层boxF旋转120度、第二层boxS旋转-60度、第三层boxT再旋转-60度,此时刚好回正,然后把图片就放在第3层的div背景中。因为前两层div中没有东西,纯粹就是用来旋转得到6边形的,所以对1,2层div设置 visibility: hidden ; 而第3层div是放图片的,需要显示...[2019/5/27]

css和css3弹性盒模型实现元素宽度(高度)自适应_css3_CSS

一、c 实现左侧宽度固定右侧宽度自适应 1、定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...[2019/5/16]

使用 css3 transform 属性来变换背景图的方法_css3_CSS

使用 css3 transform 属性来变换背景图的方法_css3_CSS

使用 c 3 transform 属性可以轻易的旋转,倾斜,缩放任何元素。目前即使没有任何前缀也可以在绝大部分浏览器上很好的使用。 #myelement { -webkit-transform: rotate(30deg); transform: rotate(30deg); }...[2019/5/8]

css3实现可拖动的魔方3d效果 _css3_CSS

css3实现可拖动的魔方3d效果 _css3_CSS

主要用到知识点: •c 3 3d转换 •原生js鼠标拖动事件 •display:grid 布局 实现的功能 •3d魔方 可点击,可拖动 •直接看效果 html:   <div cla =&q...[2019/5/7]

怎样实现H5+CSS3手指滑动切换图片的示例代码

包含3个文件:html、slider-H5.js、jquery.js。在html中可配置滑动参数。具体代码如下: HTML代码: <!DOCTYPE HTML> <html> <head> <met...[2019/5/6]

CSS3 实现童年的纸飞机 _css3_CSS

今天我们来折纸飞机(可以飞出去的那种哦) 基本全用c 来实现,只有一小部分的js 首先看一下飞机的构造 灰色区域为可折叠区域 白色区域为机身 三角形由border画出来的再经过各种平移翻转变成上图 写之前再补充个知识点: 我们颜色的设置不用rgba, 用hsl...[2019/5/6]

使用CSS变量实现炫酷惊人的悬浮效果_css3_CSS

使用CSS变量实现炫酷惊人的悬浮效果_css3_CSS

最近,我从 Grover网站上发现以一个好玩儿的悬停动画,也有了些自己的灵感。这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变。这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了,增加了点击的概率。 怎样才能达到这个效果,使我们的网站脱颖而出呢?其实,它并不像...[2019/4/28]

css3 中实现炫酷的loading效果 _css3_CSS

css3 中实现炫酷的loading效果 _css3_CSS

•今天实现了一个炫酷的loading效果,基本全用c 来实现,主要练习一下c 3的熟练运用 •js需要引入jquery 只用到了一点点js •先看效果图 html: <div cla ="box"> ...[2019/4/28]

css3中用animation的steps属性制作帧动画 _css3_CSS

  昨天火急火燎地接到一个任务,说是要做一个掷骰子的游戏,关于掷骰子期间的过渡动画,我本来是想用c 3d制作一个立体的骰子,然后叫UI给6张平面图贴上去。再用translate3d来操作。然而UI考虑得十分周到,直接就给了我一个雪碧图,并告诉我在photoshop中可以用帧动画来播放几张图片,达...[2019/4/26]

CSS3 之 童年的纸飞机

今天我们来折纸飞机(可以飞出去的那种哦) 基本全用c 来实现,只有一小部分的js 首先看一下飞机的构造 灰色区域为可折叠区域 白色区域为机身 三角形由border画出来的再经过各种平移翻转变成上图 写之前再补充个知识点: 我们颜色的设置不用rgba, 用hsl...[2019/4/25]

详解CSS3中的box-sizing(content-box与border-box)_css3_CSS

CSS3中的box-sizing(content-box与border-box) CSS3中的box-sizing 属性允许以特定的方式来指定盒模型,有两种方式: content-box:标准盒模型,又叫做 W3C盒模型,一般在现代浏览器中使用的都是这个盒模型 border-box:怪...[2019/4/22]

用css画一个哆啦A梦

原图: 效果图: 虽然说没用啥什么高级的技巧,但这让我感受到了CSS的乐趣! 好好学习,天天向上! <!DOCTYPE html> <html> <head>     <title></t...[2019/4/17]

CSS3实现王者荣耀匹配人员加载页面的方法_css3_CSS

CSS3实现王者荣耀匹配人员加载页面的方法_css3_CSS

玩过王者的应该都熟悉,这个页面的效果。为什么要实现这个效果了? 第一:王者这么火,电竞这么火。 第二:主要还是来学习 CSS3 的线性、径向渐变、旋转、缩放以及动画。 图形解析 1、背景(径向渐变) 2、玩家(player)加载动画(线性渐变) 3、背景镂空旋转正方形...[2019/4/17]

CSS3 transforms应用于背景图像的解决方法_css3_CSS

CSS transformations虽然很酷,但还没有应用于背景图像。这篇文章提供了一个很好的解决方法,当您确实想要旋转背景图像时,或者在容器元素旋转时保持背景图像不变。 使用c 3转换属性可以缩放、倾斜和旋转任何元素。它在所有没有厂商前缀的现代浏览器中都得到支持。(我已经添加了-webki...[2019/4/17]

CSS3实现王者匹配时的粒子动画效果_css3_CSS

在码代码的时候会发现,很多东西都是殊途同归的,方法千千万,能解决问题的都是好办法,不一定非要把代码写的特别高深,这样反而后来的人看不懂,维护根据头疼。 所以用最简单通俗的代码,更能利于后期的维护开发。 先来看看背景粒子动画效果预览图:   按钮点击粒子动画 &...[2019/4/15]

CSS3解析抖音LOGO制作的方法步骤_css3_CSS

CSS3解析抖音LOGO制作的方法步骤_css3_CSS

“抖音”,人气也是非常高,据说拥有7亿用户。 今天我们就来研究研究抖音的logo,蹭蹭热度。 效果预览: 主要用c 3新增属性 mix-blend-mode ,”组成,然后有3种颜色,白色、红色、和天蓝色。 ok,我们先来完成一个&ldqu...[2019/4/12]

浅谈CSS3 box-sizing 属性 有趣的盒模型 _css3_CSS

盒模型的组成大家肯定都懂,由里向外content,padding,border,margin. 盒模型是有两种标准的,一个是标准模型,一个是IE模型。 从上面两图不难看出在标准模型中,盒模型的宽高只是内容(content)的宽高, 而在IE模型中盒模型的宽高是内容(cont...[2019/4/3]

CSS3 3D酷炫立方体变换动画的实现_css3_CSS

我爱撸码,撸码使我感到快乐! 大家好,我是Counter,本章微博主要利用了CSS3的一些新特性, 主要用到关键帧来使3D图形运动起来,涉及到了一些抽象的思想,立体的想象。 先给大家看看完成的效果,代码也不是很难,每行代码都给到了详细注释,纯CSS,没有用到JS,CSS3不错。 效...[2019/3/27]

使用CSS3的clip-path实现剪贴区域的显示

clip-path介绍 clip-path 直译过来就是裁剪路径,使用SVG或形状定义一个HTML元素的可见区域的方法。想象一下你在Photoshop中勾勒路径的场景。MDN上是这样介绍 clip-path的: clip-path属性可以防止部分元素通过定义的剪切区域来显示,仅通过显示的特殊区域。剪...[2019/3/19]

CSS3之2D与3D变换的实现方法_css3_CSS

c 3实现了对元素执行2D平面变换,以及视觉上的3D空间变换,2D变换平时可能用的较多,3D效果也能锦上添花; 关于坐标轴 初中数学的几何学里我们便开始接触坐标轴,最基本的是平面直角坐标系 XoY ,然后延伸出空间直角坐标系 XYZ ,现在我们来说一下c 中的坐标系; c 甚至一下设备...[2019/1/31]

CSS3移动端vw+rem不依赖JS实现响应式布局的方法_css3_CSS

1、前言 (1)vw/vh介绍 在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是c 3出现的一个新单位,它是“view width”缩写,定义为把当前屏幕分成一百份,1vw即为屏幕的1%,与之对应的是vh,把高分成一百份,1vh即为屏幕高的1%...[2019/1/25]

css 中的 display:flex 属性

css 中的 display:flex 属性

一:display:flex 布局 display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。 Flex是Flexible Box的缩写,意为"弹性布局&q...[2019/1/22]

css3实现3D文本悬停改变效果的示例代码_css3_CSS

本文介绍了c 3实现3D文本悬停改变效果的示例代码,分享给大家,具体如下: html <h1 cla ="hover-text-3d" data-text="w3cbest.com">W3CBEST.COM</h1> ...[2019/1/18]

简单几步用纯CSS3实现3D翻转效果_css3_CSS

作为前端开发人员的必修课,CSS3能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform属性 : 本示例均使用Sa 语法 .block { width: 200p...[2019/1/18]

用CSS3和table标签实现一个圆形轨迹的动画的示例代码_css3_CSS

用CSS3和table标签实现一个圆形轨迹的动画的示例代码_css3_CSS

html:其实就是根据table标签把几个实心圆div进行等边六角形的排布,并放入一个div容器中,然后利用CSS3的循环旋转的动画效果对最外层的div容器进行自转实现,当然不要忘了把div容器的外边框设置圆形弧度的。 <div cla ="animation_div&...[2019/1/18]

css3实现元素环绕中心点布局的方法示例_css3_CSS

本文介绍了c 3实现元素环绕中心点布局的方法示例,分享给大家,具体如下: 效果如图:   代码实现: <style> *{ margin: 0; padding: 0; box-siz...[2019/1/16]

偏门却又实用的 CSS 样式

偏门却又实用的 CSS 样式

::-Webkit-Input-Placeholder input 的 H5 placeholder 属性,很好用,但不能直接改这个文字颜色,所以目前的解决方法就是用::input-placeholder属性来改。 配合 opacity 属性使用效果更好 <!DOCTYPE...[2019/1/10]

浅谈CSS3 动画卡顿解决方案_css3_CSS

为什么会卡顿? 有一个前提必须要提,前端开发者们都知道,浏览器是单线程运行的。但是我们要明确以下几个概念:单线程,主线程和合成线程。 虽然说浏览器执行js是单线程执行(注意,是执行,并不是说浏览器只有1个线程,而是运行时,runing),但实际上浏览器的2个重要的执行线程,这 2 个线程协...[2019/1/7]

CSS3动画效果transition

1.transition的浏览器支持情况 IE10+支持,IE6\7\8\9都不支持!目前,其他浏览器最新版本都支持,不需要再加前缀 -webkit- 之类的了2. 还是一步一步说说怎么用transition吧 页面只有一个div,其c 如下:  1  &nb...[2019/1/2]

纯CSS3实现漂亮的input输入框动画样式库(Text input love)_css3_CSS

分享一个用纯 CSS3 实现的,漂亮的 input 输入框动画样式库-Text input love。 点击每个输入框都用不同的动画效果,始终显示标签label,并显示 placeholder(占位符)文本。 演示地址:https: codepen.io/MichaelArestad...[2019/1/2]

CSS3动画之DIY Loading动画

首先要知道什么是CSS3动画?然后才能做出自己想要的动画效果。下面会通过3个简单的Loading动画效果来对CSS3 animation动画做一个简单介绍,希望对你有用。 动画是使元素从一种样式逐渐变化为另一种样式的效果。 您可以改变任意多的样式任意多的次数。 使用百分比来规定变化发生的时间,或用...[2018/12/29]

10分钟入门CSS3 Animation_css3_CSS

10分钟入门CSS3 Animation_css3_CSS

简介 Animation可以让你不用依赖javascript或jquery,用纯CSS在网页中轻松实现各种动画效果。 兼容性 animation在绝大部分主流浏览器都得到了很好的支持!还在兼容IE9的同学要谨慎使用。 CSS 坐标系 在了解animtion之前,我们有必要...[2018/12/27]

10分钟理解CSS3 Grid布局_css3_CSS

10分钟理解CSS3 Grid布局_css3_CSS

基本介绍 上一篇文章我们介绍了c 3 flexbox,今天我们再来说说c 3的另外一个强大的功能:Grid。 Grid做前端的同学应该都很熟悉了,翻译成中文为“栅格”,用过bootstrap、semantic ui、ant design的同学肯定都了解grid la...[2018/12/24]

详解如何在css3打包后自动追加前缀插件:autoprefixer _css3_CSS

用vue-cli构建的项目脚手架已经帮你把autoprefixer的配置做好了,自己不需要做什么改动就会自动加前缀: 下面一起看看涉及到autoprefixer这个插件的一些配置: 1,postc 配置写在.postc rc.js, 2,浏览器规则则写在package.js...[2018/12/20]

css3实现信纸/同学录效果的示例代码_css3_CSS

本文介绍了c 3实现信纸/同学录效果的示例代码,分享给大家,具体如下: 实现思路: 网格背景,由c 3的线性渐变来实现。 纸上的打孔,由圆和圆柱组成,多个打孔,可以由box-shadow的平铺来实现。 实际代码: <div cla ="bg-gri...[2018/12/12]

CSS3田字格列表的样式编写方法_css3_CSS

在很多项目中,需要实现分格展示的功能,中间有灰色分割线,两侧没有。 如图: 按照一般的思路,设置好li的宽度,通过nth-of-type(n){}的方式给li标签添加样式。 设置每个li 33.33%的宽度,但当我们添加1px边框时,最右边的内容就被挤了下来。 这时可以通过给...[2018/11/25]

CSS 、JS实现浪漫流星雨动画

CSS 、JS实现浪漫流星雨动画

1,效果图 2,源码 HTML < body >      < div  cla  = "container" >&nb...[2018/11/12]

纯css3实现思维导图样式示例_css3_CSS

思维导图又称之为脑图 他大概是这个样子滴: 网上大部分实现有用d3.js实现,有手动用svg实现,最近工作需要,本人很懒,在琢磨看看用c 3能不能实现呢? 答案是肯定的 下面上代码 html代码 <div cla ="mainBody" ...[2018/11/3]

CSS3 创建网页动画实现弹跳球动效果_css3_CSS

CSS3 创建网页动画实现弹跳球动效果_css3_CSS

基础准备 对于这个实现,我们需要一个简单的 div ,并且样式类名为 ball : HTML 代码: <div cla ="ball"></div> 我们将使用 Flexbox 布局,把球放到页面中间,尺寸为 100px...[2018/11/1]

详解rem 适配布局

当今手机种类繁多 且不说iphone系列,安卓手机的种类已经数不胜数了,所以不可能每一款手机都要写一套布局样式,这也是不可能做到的,但是对于越来越精益求精的前端来说 ,当然要找到一个合理的解决方案。rem 就是用来自适应布局的。 适配要达到的效果,如下图(简单的示范一下) 两个div...[2018/11/1]

涨姿势了!纯css3绘制百度的小度熊

涨姿势了!纯css3绘制百度的小度熊

前几天看到一篇文章是写用c 3绘制腾讯企鹅的。趁着今天有空,就用c 3来写一个百度的小度熊。话不多说,开始上码。 爆照 先来一张呆萌小度熊的成果照。   在绘制小度熊之前,首先要对小度熊布局上进行一个分解,便于我们组织代码结构。 从整体结构上主要分成耳朵,头部和身体。我们统一对将胳膊,...[2018/10/30]

css3实现椭圆轨迹旋转的示例代码_css3_CSS

最近需要实现如下效果 最开始用c 3D旋转写,只能实现如下效果 没办法把所有的圆转向正面,不知道是我的操作不对,还是3d旋转无法实现,有知道的大佬还请赐教啊 没法用3d实现只能转向2d了,只要实现按椭圆旋转就ok了 X轴Y轴在一个矩形内移动 路径为斜线 ...[2018/10/30]

62
2
记录数:57 页数:1/212下一页尾页
加载更多