css3

css3实现动画的三种方式

这是一个考验面试者对css的基础知识。 css 实现动画主要有3种方式 第一种是: transition 实现渐变动画 第二种是: transform 转变动画 第三种是: animation 实现自定义动画 下面具体讲一下3种动画的实现方式。 transition渐变动画 我们先看一下 transition 的属性: property:填写需要变化的css属性如:width,line-heigh... »

详解css3 flex弹性盒自动铺满写法

本文主要介绍了详解css3 flex弹性盒自动铺满写法,分享给大家,具体如下: <style type="text/css"> .flexcontainer{ width:100%; height: 100%; position: absolute; left:0px; top:0px; display: flex; flex-direction: column; ... »

详解css3中dispaly的Grid布局与Flex布局

Gird布局与Flex布局有一定的相似性,都是对容器的内部项目进行划分。Flex布局是轴线布局,只能指定项目针对轴线的位置,可以看作成一维布局 Grid布局则是将容器划分成行和列,产生单元格,然后指定项目所在的单元格,可以将它看成二维布局。.content-box flex-wrap属性:定义换行情况默认情况下,都排在一条轴线上。.content-box flex-end:右对齐。.cont... »

js+css3实现简单时钟特效

本文实例为大家分享了js+css3实现简单时钟的具体代码,供大家参考,具体内容如下 1.实现了时钟的特效,可以转动,时间准确,画面美观大气; 2.用到了css3的transform: rotate,transform-origin:,伪元素,border-radius,定位,z-index等等 效果如图: 代码如下: <!DOCTYPE html> <html> <h... »

js+css3实现炫酷时钟

本文实例为大家分享了js+css3实现炫酷时钟的具体代码,供大家参考,具体内容如下 html <body> <ul id='box'></ul> </body> css <style> *{ margin: 0; padding: 0; } body{ background-color: #aaa; } ul{ width: 400px;... »

利用div+css3实现一个背景渐变的button按钮的示例代码

随着目前前端页面的需求不断提升,有些场景需要渐变背景的元素。本文利用div和css3新属性,实现了一个背景渐变的按钮,具体如下: 1.background: linear-gradient 背景为渐变色属性 2.利用css3中动画特性animation,实现背景从左至右变化(color_move) 3.为了实现渐变效果,将background的宽度拉长至400% 上代码: html: <di... »

css3实现小箭头各种图形效果

css实现各种图形真是太赞了,再也不用切图了,直接用css就可以实现。 最常用的就是用css实现的小三角了 #triangle-up{ display:inline-block; width:0; height:0; border-left:30px solid transparent; border-right: 30px solid transparent; border-bottom:50p... »

css3 flex布局实现平均分配元素的示例代码

本文主要介绍了css3 flex布局实现平均分配元素,给自己留个笔记,也分享给大家,具体如下: 例子一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex 布局</title> <s... »

如何使用css3实现一个类在线直播的队列动画的示例代码

之前在群里有个朋友问了这样一个问题, 就是如何在 小程序 中实现类似 直播平台 的用户上线时的 队列动画 ?styles.hidden : '')} key=>李老师上线 })}css代码如下:.hidden 通过以上步骤我们就实现了一个完整的类在线直播的队列动画, 动画完整 css 代码如下, 感兴趣的盆友可以学习参考一下:.animateWrap { position: abso... »

JS+css3实现幻灯片轮播图

本文实例为大家分享了JS+css3实现幻灯片轮播图的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; -webkit-tou... »

css3实现背景模糊的三种方式(小结)

一、普通背景模糊 代码: <Style> html, body { width: 100%; height: 100%; } * { margin: 0; padding: 0; } /*背景模糊*/ .bg { width: 100%; height: 100%; position: relative; background: url("./bg.jpg") no... »

css3遮罩层镂空效果的多种实现方法

本文介绍了的4种实现遮罩层镂空的方法,分享给大家,也给自己留个笔记,具体如下: 先看看效果 【 方法一:截图模拟实现 】 原理:先截一张相同位置的图片,创建一个遮罩层,然后把图片定位在相应的位置上。 优点:原理简单;兼容性好,可以兼容到IE6、IE7;可以同时实现镂空多个。 缺点:此方法只适合静止页面,不适合可以滚动的页面。也不适合页面内容会发生变换的页面。 代码如下: <div class... »

jquery+css3实现的经典弹出层效果示例

本文实例讲述了jquery+css3实现的弹出层效果。 »

利用css3实现进度条效果及动态添加百分比

项目过程中,开始使用了js的requestAnimationFrame方法实现进度条,但是在数据超级多的时候非常影响性能,如此改用css去实现,优化。 先贴代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta na... »

css3的focus-within选择器的使用

伪元素和伪类 说到这个,我们先回顾一下,伪类选择器和伪元素选择器,老版的浏览器没有严格区分下面 2 种写法。 a:after{} a::after{} 在新的标准中,单冒号(:)用于 CSS3 伪类,双冒号(::)用于 CSS3 伪元素,我们平时开发时可以注意一下,当然大多数浏览器两种写法都能识别。 常见伪元素和伪类 伪类 :link, :visited, :hover, :active, :fo... »

通过css3的filter滤镜改变png图片的颜色的示例代码

本方法是通过CSS3滤镜 filter 中的 drop-shadow 将png图片的非透明部分生成任意颜色的投影,然后将原始图片隐藏起来,从而达到改变图片颜色的目的 先看效果图 接下来是代码 <p><strong>原始图标</strong></p> <i class="icon icon-del"></i>... »

css3 实现元素弧线运动的示例代码

如何使用CSS控制元素弧线运动 我们都知道,CSS3的新属性transfrom过渡效果可以实现元素位移、旋转、缩放。结合animation属性,就可以实现元素的动画效果。但是如何通过css实现元素实现弧线运动呢: 如上图动画效果所示,圆球弧线运动,分析运动: 将小球的运动拆分成X轴和Y轴两个运动来看,此时X轴的小球是以 (慢—快) 这样的速度运动; 而Y轴的方向小球是以(快&mdash... »

css3中less实现文字长阴影(long shadow)

本文主要介绍了css3中less实现文字长阴影,分享给大家,具体如下: 问题 实现如下图效果 主要知识点 css中的字体阴影 text-shadowless 语法中的 loops 和 merge代码 <div class="long-shadow">屮艸芔茻</div> .loop(@counter) when (@counter > 0) { .... »

在这里插入图片描述

css3 手写正方体实现3D旋转

html: bg1 bg2 bg3 bg4 css:.container .back,.prev .prev .bg1,.bg2,.bg3... »

在这里插入图片描述

用css3的过渡动画效果简单做星空转换的效果

有时候,css3的过渡动画效果比js的计时器控制要好用,因为你不用去设计计时器,利用css3的过渡可以让元素很流畅的播放,接下来,我简单介绍一下一些css3的过渡属性并且用他们做一些星空转换的demo。css3的部分属性及描述transition 》》》简写属性,用于在一个属性中设置四个过渡属性。transition-timing-function 》》》规定过渡效果的时间曲线。 »

随手记——css3 2D转换(transform)

css3 2D转换(transform)位移(translate)旋转(rotate)转换中心点(transform-origin)缩放(scale)2D转换综合写法正文 __start:位移(translate)语法说明transform:translate(x,y)元素在x轴移动x像素,y轴移动y像素transform:translateX(n)元素在x »

css3 transform导致子元素固定定位变成绝对定位的方法

 本文介绍了css3 transform导致子元素固定定位变成绝对定位的方法,分享给大家,也给我自己留个笔记,方便查找。 <!DOCTYPE html> <html> <head> <style> body { background: #f60; // 橙色 } .parent { position: fixed; width: 300px... »

微信小程序实现可实时改变转速的css3旋转动画实例代码

前言本文主要介绍的是关于微信小程序实现可实时改变转速的css3旋转动画的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。实现可以实时修改转速微信小程序里涉及到实时数据就避免不了Page.data这个东西。答案是肯定的,但是不是去把动画时间改为0,而是采用了css3动画的一个属性。 »

css3媒体查询中device-width和width的区别详解

css3媒体查询中device-width和width的区别详解

1.device-width 定义:定义输出设备的屏幕可见宽度。 不管你的网页是在safari打开还是嵌在某个webview中,device-width都只跟你的设备有关,如果是同一个设备,那么他的值就不会变。 比如iphone6的device-width*device-height为375*667,而跟他的dpr等无关。 2.width 定义:定义输出设备中的页面可见区域宽度。 输出的是你的网页... »

css3 flex实现div内容水平垂直居中的几种方法

css3 flex实现div内容水平垂直居中的几种方法

一、flex-direction: ※ flex-direction:row ※ flex-direction:row-reverse ※ flex-direction:column ※ flex-direction:column-reverse 二、flex-wrap: ※flex-wrap:nowrap ※ flex-wrap:wrap ※flex-wrap:wrap-reverse三、jus... »

Page 1 of 15123»