一个纯CSS实现的卡片翻转效果

先上代码 <div id="box"> <div class="front">正面</div> <div class="back">反面</div> </div> #box{ width:200px; height:200px; position:relative; perspective:; -webkit-perspective:; } #box div{ positio…

1. 元素的 width/height/padding/margin 的百分比基准设置一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举个栗子: .parent { width: 200px; height: 100px; } .child { width: 80%; height: 80%; } .childchild { width: 50%; height: 50%; padding: 2%; margin: 5%; } <d…

纯CSS实现3D正方体动画效果

前言纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移效果图 …

[刘阳Java]_纯CSS代码实现内容过滤效果

继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图实现思路上面的四个按钮是利用 radio + label 组合方式实现下面的图片全部都通过左浮动方式排列外层有一个最大的div,它来包含按钮+图片当点击按钮的时候,我们通过 CSS3 的属性选择器 + 兄弟选择器来实现过滤效果,且也具备点击事件效果(牛逼) 完整的代码如下 <!DOCTYPE html&g…

一个纯CSS DIV天气动画图标【转扒的】

<p> </p> <style><!-- /* SUNNY */ .sunny { -webkit-animation: sunny 15s linear infinite; animation: sunny 15s linear infinite; background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255…

纯CSS实现的风车转动效果特效演示

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>纯CSS实现的风车转动效果特效演示</title> <style> body{ background:#a5cad6; } h1{ display:block; margin:…

一个标签的72变，打造一个纯CSS图标库

每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不甚满意. 终于下定心思来改造一个可缩放的图标库.github先上:https://github.com/qieguo2016/iconoo,目前提供下载link标签引入和npm+webpack的引入方式,详见项目的readme.(喂,来个star!).上图: 关于改造,一开始的想法就是使用百分比尺寸…

纯CSS实现轮播图效果，你不知道的CSS3黑科技

前言轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的.不过就是有些繁琐,今天这篇文章我们来看看如何不用Javascript,而使用纯CSS代码去实现轮播图吧. 这篇文章的所有代码我都放在了群文件了,感兴趣的同学可以去下载看看. CSS 实现效果首先我们来看看只使用CSS实现的轮播图效果. 实现效果图具体分析看到上述的实现效果后,我们来具体分析下页…

大神写的一个纯CSS圆角框，膜拜！（支持IE9一下的低版本）

留着提醒自己,底层才是最重要的,不要一直傻瓜的编程下去! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m…

手把手教你打造一个纯CSS图标库

来,干了这碗安利写这篇文章的目的其实就是为了安利一下我的图标库:iconoo,所以,开门见山,star吧少年少妇们!(这样的我是不是应该要加个github互粉的团伙了?) 主题说完了,下面进入正题. 在web开发中,我们经常要用到一些小图标(加减勾叉等).通常做法就两种: 直接使用图片: 使用css/svg直接在浏览器中绘制图标. 方案1:由于图标图片比较多,而且体积很小,为了减少请求所以很多时候我们会用雪碧图这种技术来将图标拼凑在同一张图片里面.你也能想到,一堆图标的雪碧图,修改维护会相当麻…

纯CSS 实现tooltip 内容提示信息效果

Tooltip 也就是内容的提示信息,合理使用可以给用户比较好的体验. 实现方法有很多种,有很多JS 插件,我这里介绍的是纯CSS实现的方法,兼容性也比较靠谱,IE8+均可正常显示.实现方法也非常简单. html结构 <a class="css-tooltip" href="http://fatesinger.com/73887" data-tooltip="137 likes with 3.43k reads">WordPress…

纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能,非常简单实用,

HTML代码如下 <div id="nav"><dl class="sy"><dt><a class="first" href="#" >首页</a></dt><dd class="line">|</dd><dd class="triangle"…

33.纯 CSS 创作牛奶文字变换效果

原文地址:https://segmentfault.com/a/1190000015037234 感想:transform: translateY(50% & -50%); animation-direction: normal & reverse; HTML code: <div class="container"> <p>Explorer</p> <p>Discovery</p> </div>…

分享一个纯css制作的动画化，在网页（手机）载入等的时候能够引用！

CSS代码例如以下: /* Custom Stylesheet */ body, html { margin: 0; -webkit-font-smoothing: antialiased; background: #68ABAD; text-align: center; } /* DEMO 1 */ .loader1 { margin: 0 auto; height: 20px; width: 20px; position:relative; -webkit-animation:spin 1.…

纯CSS实现内容放大缩小效果

先搭架子再实现第一个内容填充更多内容拆掉border,查看最终效果 html代码  <div class="service"> <div class="service-title"> 创新服务 </div> <div class="service-container"> <div class="service-item">…

纯CSS仿windows系统loading效果

今天分享的css3案例模仿了window系统下的loading效果里面最关键的地方使用了css3 animation的delay属性以及贝塞尔曲线(cubic-bezier)的过渡效果,如下所示 span[class*="l-"] { height: 8px; width: 8px; background: #fff; display: inline-block; margin: 12px 2px; border-radius: 100%; -webkit-border-radius:…

[原创]一个纯css实现兼容各种主流移动pc浏览器的时间轴

废话不多说 Demo 高度完全的自适应中心思想是table 和第二列行高的50%的上下绝对定位竖线第一次用codepen less完全不能用啊连node png之类的都是关键词会被去掉... 马克一个介绍Codepen简介我总在想无论是画画还是写代码思考这个东西的本身的结构组成原理(无论是时间轴还是人体) 比照着葫芦画瓢或者死记硬背一些东西重要的多嗯! 私心表达一下,桐谷健太赛高~\(≧▽≦)/~…

纯css实现弹窗左右垂直居中效果

1.HTML <div class="container"> <div class="dialog"> <div class="content">内容占位</div> </div> </div> 2.CSS .container { position: fixed; top:;;;; /* for IE8 */ background: url(data:image/png;b…

纯css打造凹进与突出效果

1.凹进效果 background:#f2f2f2 center repeat; border-bottom: 1px solid #e9e9e9;border-top: 1px solid #f9f9f9; 2.突出效果 background:#f2f2f2 center repeat; border-top: 1px solid #e9e9e9;border-bottom: 1px solid #f9f9f9;…

纯css导航下划线跟随效果【转载】

css: ul { display: flex; position: absolute; width: 800px; top: 50%; left: 50%; transform: translate(-50%, -50%); list-style: none; } li { position: relative; padding: 20px; font-size: 24px; color: #000; line-height: 1; transition: 0.2s all linear; c…