cSS3主题的文章列表，还有cSS3的技术要点_第17页

CSS3中的transition属性详解

一、语法transition:propertydurationtiming-functiondelay transition属性是个复合属性，她包括以下几个子属性：transition-property：规定设置过渡效果的css属性名称transition-duration：规定完成过渡效果需要多少秒或毫秒t...

代码星球 ·2020-06-27

CSS3的变形transform、过渡transition、动画animation学习

学习CSS3动画animation得先了解一些关于变形transform、过渡transition的知识这些新属性大多在新版浏览器得到了支持，有些需要添加浏览器前缀（-webkit-、-moz-、-ms-、-o-），本文为简化内容，直接使用了原版属性根据不同属性的支持度，在实际使用的时候需要添加相应的浏览器前缀支持目录...

代码星球 ·2020-06-16

一张图教会CSS3倒影

分享示例图片在CSS3之前，想要实现示例图片这样的一个倒影效果一般只能通过处理图片的方式，而CSS3问世之后，想要实现这样的效果变得非常简单，只需一个CSS3属性就可以轻松实现了。这就是今天所要提到的box-reflect属性。咱们先看看W3C给出的box-reflect语法：box-reflect：none|<...

代码星球 ·2020-06-14

css3动画详解

一.Keyframes介绍：Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。 @keyframescha...

代码星球 ·2020-06-14

用CSS3/JS绘制自己想要的按钮

我认为按钮的绘制分以下三个步骤第一步，绘制按钮的轮廓选择合适的html标签，设置轮廓的CSS/*html代码*/<ahref="#"class="buttonoff"></a>body{background-color:#E6C9B6;}/*CSS样式*//*按钮轮廓*/.button{disp...

代码星球 ·2020-06-14

css3 flex 布局

flex 布局是css3中使用最频繁也是最出色的功能，有点复杂，分为应用在容器上的属性和项目上的属性，即父元素上的与子元素上的属性。父元素上的属性display:flex<style>div{display:flex;background-color:yellow;}b{background-co...

代码星球 ·2020-06-14

用CSS3 & jQuery创建apple TV海报视差效果

用CSS和jQuery来实现它，尽量看起来和原效果一样。最终效果图本教程里，我将使用CSS,HTML和jQuery来创建一个近似AppleTV视差效果，如果你正在阅读，我假设你对上述三种技术都有基本的了解。废话不多说，开始第一部分。我们的页面结构像下面这样：<divclass="poster"><di...

代码星球 ·2020-06-14

css3 媒体查询常用适配

@media(max-width:1300px){}@media(max-width:1080px){}@media(max-width:799px){}@media(max-width:720px){}@media(max-width:460px){}@media(max-height:750px){}@media(...

代码星球 ·2020-06-13

css3不错的教程

<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="css/style.css"type="text/css"/><metacharset="utf-8"/><title>CSS3悬停放大图片两...

代码星球 ·2020-06-13

CSS3伪类与伪元素的区别及注意事项

CSS中伪类与伪元素的概念是很容易混淆的今天就来谈谈伪类与伪元素之间的区别首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的伪类：用于向某些选择器添加特殊的效果伪元素：用于将特殊的效果添加到某些选择器讲道理，可能我语文不好，我觉得这两句话是等价的:-) 根本不能看出有什么区别&...

代码星球 ·2020-05-25

原生JS+ CSS3创建loading加载动画；

效果图： js创建loadingshow=function(){//loadingdom元素varDiv=document.createElement("div");Div.setAttribute("class","ui-loading");varchidDiv=document.createElement...

代码星球 ·2020-05-24

javascript获取CSS3浏览器前缀

varprefix=(function(){varstyles=window.getComputedStyle(document.documentElement,''),pre=(Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/)...

代码星球 ·2020-05-24

CSS3四个自适应关键字——fill-available、max-content、min-content、fit-content

　　一般地，有两种自适应：撑满空闲空间与收缩到内容尺寸。CSS3将这两种情况分别定义为'fill-availabel'和'fit-content'。除此之外，还新增了更细粒度的'min-content'和'max-content'。这四个关键字可用于设置宽高属性。本文将详细介绍CSS3中的这四个自适应关键字...

代码星球 ·2020-05-24

css3之transform属性实现div不定宽高垂直水平居中

transform的作用transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。(w3cschool)transform的兼容性transform的兼容性还是比较乐观的。IE9以下不兼容，IE9支持代替的-ms-transform属性不过只支持2D转换。谷歌和Safari支持代替...

代码星球 ·2020-05-23

CSS3之word-wrap英文单词溢出强制换行

word-wrap:normal|break-word;所有主流浏览器都支持word-wrap属性。<divcolor:#800000;">"border:1px#f00solid;width:50px;word-wrap:break-word;">https://home.cnblogs.com/set/...

代码星球 ·2020-05-23