经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
 CSS3
css和css3弹性盒模型实现元素宽度(高度)自适应_css3_CSS

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手指滑动切换图片的示例代码

怎样实现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

最近,我从 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 的线性、径向渐变、旋转、缩放以及动画。 图形解析 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

“抖音”,人气也是非常高,据说拥有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 属性

一: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

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 样式

::-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动画之DIY Loading动画

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

10分钟入门CSS3 Animation_css3_CSS

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

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实现浪漫流星雨动画

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

基础准备 对于这个实现,我们需要一个简单的 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

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

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

详解css3 mask遮罩实现一些特效

遮罩mask的功能就是使用透明的图片或渐变遮罩元素的背景。于是,遮罩mask与背景background非常类似,除了没有color子属性,背景background剩下的6个子属性,mask都有 遮罩mask是一个复合属性,包括mask-image、mask-mode、mask-repeat、mas...[2018/10/26]

了解CSS3的all属性的使用_CSS教程_CSS

一、兼容性 如下图: 兼容性还行, 除了IE不支持,其他浏览器基本上都绿油油,目前自娱自乐,内网项目什么的都是可以用用的。 二、all是干嘛用的 all属性实际上是所有CSS属性的缩写,表示,所有的CSS属性都怎样怎样,但是,不包括unicode-bidi和direction...[2018/10/20]

html5/css3响应式页面开发总结

一,自适应和响应式的区别     自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应。     响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的。 虽然响应式/自适应网页设计会带来兼容各...[2018/10/17]

纯css3实现宠物小鸡实例代码_css3_CSS

纯css3实现宠物小鸡实例代码_css3_CSS

最近看了很多关于c 3的知识和文章,觉得c 3用起来很方便,使用c 3的话,在页面布局上可以省去很多不必要的代码。所以最近用c 3仿写了我每天都照顾的宠物小鸡的模样,第一次写,有些细节处理的不够好。 先看最终效果图: 接下来是我书写的步骤: 首先是html,分别写出云朵,小鸡的身体,鸡冠,眼睛,...[2018/10/10]

使用纯 CSS 创作一个脉动 loader效果的源码_css3_CSS

效果预览 按下右侧的&ldquo;点击预览&rdquo;按钮可以在当前页面预览,点击链接可以全屏预览。 https: codepen.io/comehope/pen/wYvGwr  可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 请用 chro...[2018/10/8]

使用css3制作齿轮loading动画效果_CSS教程_CSS

这是一款基于c 3齿轮loading动画特效。该特效使用font-awesome字体图标的齿轮图标作为图案,通过CSS3 animation来制作三个齿轮的运动效果。 查看演示     下载源码 HTML 首先在页面中引入font-awesome文...[2018/9/27]

从零开始的全栈工程师——html篇1.7

position定位与表单一、position1、Position细说 Position:relative; Left:100px; Top:100px; Position:absolute; Left:100px; Top:100px; Position:relative;如果设置值了,相对原来的...[2018/9/26]

62
2
记录数:48 页数:1/11
加载更多