一、Css3 实现扇形 实现原理说明 使用transform skew 扭曲实现扇形角度,使用rotate宣传,实现多角度。 原理图: 二、Css3 实现六扇形 实现案例 css代码: .circleBlock { width: 200px; height: 200px; border: 1px
转载 2020-10-19 17:43:00
1592阅读
2评论
简述在前面,我们分享过关于三的实现方式,主要根据border属性来设置,下面我们来实现上、下、左、右各种不同颜色的三。简述实现效果源码实现效果源码<!DOCTYPE html><html><head><style type='text/css'>/* 上三 */.arrow-up { width: 0; height: 0; border-left: 20px so
原创 2022-07-29 11:26:31
179阅读
CSS3边框实例:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS3边框</title> <style>  div{ text-align:center; border:2px&nbsp
原创 2015-10-15 14:25:33
786阅读
div+css3普通圆角代码示例<style type="text/css"> #round { width:200px; height:100px; margin:0px auto; border: 5px solid #000; border-radius:15px; } </style> <div id="round"></div> 以上代码可直接复制到HTML文件中运行。 运行后的效果图 div+css3普通无边框圆角代码示例 <style type="text/css"&
转载 2013-06-20 19:58:00
196阅读
2评论
CSS3position1、取值(1)absolute(2)fixed(3)inherit(4)relative(5)static(6)!important2、实现源码CSS3position 11111...
转载 2015-12-04 21:30:00
43阅读
2评论
-webkit-mask-box-image  实例代码: .mask{ -webkit-mask-box-image:url(../mask.png)} url                                遮盖图片地址-grad...
原创 2023-06-26 00:44:22
177阅读
          transition有以下4个属性: transition-propertytransition-durationtransition-ti
原创 2023-06-26 09:12:13
22阅读
CSS3新特性转换
原创 2017-09-07 23:48:54
426阅读
随着css3不断地发展,越来越多的页面特效可以被实现。 例如当我们鼠标悬浮在某个tab上的时候,给它以1s的渐进变化增加一个背景颜色。渐进的变化可以让css样式变化得不那么突兀,也显得交互更加柔和。 那么怎么实现这种效果呢? css3提供了transition属性,可以用来控制css属性变化的速度。 ...
转载 2021-10-31 22:19:00
271阅读
2评论
CSS3 resize
原创 2023-06-26 09:19:21
91阅读
columns column-width:[<length>|auto] 定义每栏的宽度 column-span:1|all 1:只在本栏中显示;all:横跨所有栏目并定位在栏目的Z轴之上。 column-rule column-rule-color:<color> 定义每栏之间边框的颜色 column-rule-width:<length>
原创 2011-03-23 12:24:31
3177阅读
CSS3动画
原创 2023-07-25 15:33:45
111阅读
不得不爱过渡(CSS3)案例过渡(CSS3)过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。过渡动画: 是从一个状态 渐渐的过渡到另外一个状态帧动画:通过一帧一帧的画面按照固定顺序和速度播放。
原创 2020-07-15 10:21:01
2202阅读
CSS3转换移位translate(CSS3)<!DOCTYPE html><html lang="en"><head> <meta ch\
原创 2022-10-20 10:06:09
57阅读
border-radius圆角圆形,border-radius制作圆角有两点技巧。-元素的宽度和高度相同。-圆角的半径值为元素宽度或宽度的一半或者直接设置圆角半径值为50%。2.半圆,border-radius制作半圆与制作圆形的方法是一样的,只是元素的宽度与圆角方位要配合一致,不同的宽度和高度比例,以及圆角方位,可以制作上半圆、下半圆、左半圆和右半圆效果。扇形,border-radius制作扇形
原创 2018-10-03 13:11:47
1268阅读
CSS3 RGBA colors G ----green(绿色) 正整数(0~255) 或 百分比 B ----blue(蓝色) 正整数(0~255) 或 百分比 A ----appha(透明度) 0~1  ...
原创 2023-06-26 09:19:27
193阅读
像手腕上散发的香水味CSS3盒模型案例CSS3盒模型CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。可以分成两种情况:1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值,
原创 2020-07-15 09:25:54
791阅读
  CSS3渐变色生成网站:http://gradients.glrzad.com/  本文参考:前端设计之用CSS3做线性渐变效果http://webskys.com/css3/10.html  在CSS3出来以前,想要显示一个渐变的效果,必须要专门制作一个图片。 CSS3的出现,使得渐变色得以简单的实现。由于不是所有的浏览器都支持CSS3,所以不是所有
原创 2011-03-23 22:51:25
10000+阅读
html css
原创 2021-08-05 15:28:09
1092阅读
CSS3动画序列(CSS3)<!DOCTYPE html><html lang="en"><head> <meta charset="UT\
原创 2022-10-20 10:05:58
5122阅读
  • 1
  • 2
  • 3
  • 4
  • 5