css3
关注
分享
扫一扫
文章平均质量分 70
snow_finland
这个作者很懒，什么都没留下…
展开
-
【css】Dark-mode 在web的处理方案
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="x5-fullscreen" content="true" /> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">.原创 2020-10-13 14:42:06 · 397 阅读 · 0 评论 -
【css3】js条件下多次触发同一个css3动画的解决方案
本文适用于非循环播放动画，而是条件下触发播放动画的解决方案通常，我们会写一个css3的动画作为一个样式，在需要播放动画的时候把样式加到元素上播放一次如果需要多次触发播放动画，如果是使用将样式先去掉再马上加上的办法，将无法多次播放动画这里介绍一下解决方案 Animation Test html,body,div,p{ marg原创 2017-09-18 17:15:58 · 4544 阅读 · 1 评论 -
【css】css文本换行与溢出显示为省略号
1 强制换行word-wrap: break-word;2 单行文本溢出时显示为省略号text-overflow: ellipsis;white-space: nowrap;overflow: hidden;+width,height根据需要设定3 多行文本溢出时显示为省略号（仅webkit内核支持，手机端可尝试，android和ios默认浏览器都为we原创 2017-08-29 17:29:15 · 512 阅读 · 0 评论 -
【整理】web前端相关知识文档手册整理
中文文档合集印象中文https://www.docschina.org/综合类W3CSchoolhttp://www.w3school.com.cn/MDN Web 文档英文版（Mozilla）https://developer.mozilla.org/en-US/MDN Web 文档中文版（Mozilla）https:/原创 2017-08-23 15:21:59 · 392 阅读 · 0 评论 -
【css 效果】边沿打孔的优惠券
项目中用到了这个边沿打孔的效果，尝试下来使用纯css写的这个样式，在这里分享一下：效果大致如图分步实现思路：1，先画两个带圆角的框，A和B（A、B分别需要加投影效果，图上没有做）2，在B的左右两条缝隙的地方分别画一排圆（其实是正方形用了50%的圆角），圆填充色和背景色相同（此处背景色是白色，所以圆的填充是白色）3，给圆原创 2016-06-23 14:30:05 · 7743 阅读 · 0 评论 -
【连载】实用小demo连载 4 —— css3+js 大转盘 demo
小demo连载系列4经常在手机上看到大转盘的游戏，今天研究了一下，自己用css3+js的方式实现了（由于只考虑手机，所以不用考虑ie9- 不支持css3的问题），demo下载地址（所有连载的demo都是免费）：http://download.csdn.net/detail/snow_finland/8991885具体代码（由于写demo的时候，写原创 2015-08-11 17:35:22 · 823 阅读 · 0 评论 -
【web移动端】划屏上下翻页效果
需要调用到改写过的jquery touchswipe（原来插件监听的是左右滑动，这里改写为上下滑动）/** * jQuery Plugin to obtain touch gestures from iPhone, iPod Touch and iPad, should also work with Android mobile phones (not tested yet!) *原创 2015-03-20 16:33:32 · 1413 阅读 · 0 评论 -
彩色网页 1秒 变黑白
很多时候一有突发事件，需要哀悼的时候，就会把彩色网页变为黑白首先你要有一个彩色网页，然后在css中增加以下：html{ filter:grayscale(100%); -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:转载 2015-01-16 17:58:18 · 1498 阅读 · 2 评论 -
css3 animation 动画应用2 —— 打字效果
来源：http://www.smashingmagazine.com/2014/04/15/understanding-css-timing-functions/上面的这篇文章中介绍了很多css3的动画效果，这里节选其中的打字转载 2014-11-04 16:00:13 · 2768 阅读 · 0 评论 -
html5 css3 将长方形图片 切成 直角梯形显示
效果图如上skew testhtml,body,div,img{ margin:0; padding:0;}img{ border:0 none;}.pic1{ width:220px; height:300px; padding-left:180px; margin-left:-160px; float:left; transform:skew(-5原创 2014-09-30 13:40:05 · 10101 阅读 · 0 评论 -
css3 animation 动画应用
用css编写动画，对于浏览器的压力较小，所以针对原创 2014-08-12 13:21:05 · 827 阅读 · 0 评论 -
css 照片模糊效果（毛玻璃效果）
css中：转载 2014-04-08 10:14:33 · 4368 阅读 · 0 评论 -
css3 线性渐变和径向渐变样式
线性渐变：ie6以下不兼容径向渐变：只支持firefox、Chrome和SafariBackground Color* { marigin:0; padding:0;}div{ margin-bottom:20px; width:300px; height:100px;}.linear{/*线性渐变样式*/ background-color: #1F原创 2014-02-12 15:19:40 · 1458 阅读 · 0 评论 -
css3 模拟 mac 的 菜单图标列表（兼容ie，但ie8及以下效果有差异）
由于ie8及以下不支持scale属性，所以ie8及以下的图标不会有缩放效果由于ie9不支持transition属性，所以ie9不会有缓慢的动画式变化效果由于只有Chrome和Safari支持倒影的属性（-webkit-box-reflect），所以只有Chrome和Safari有这个效果Recreating the OS X Dock | Playground from转载 2014-02-12 14:21:25 · 1792 阅读 · 0 评论 -
css3可折叠式/手风琴式面板（ie8及以下不兼容）
原demo地址：http://www.thecssninja.com/demo/css_accordion/ie9由于不支持css3的transition，所以面板下拉和收起的时候不是缓慢的动画效果 Accordion effect using CSS | The CSS Ninja Section 1 Lorem转载 2014-02-12 11:14:38 · 1803 阅读 · 0 评论 -
css3书签风格按钮列表（兼容ie，ff，chrome，safari和opera）
比原文增加了对于ie，Firefox，Opera的兼容效果CSS3 jQuery style menu* { margin:0; padding:0;}html {height: 100%;}body{ position: relative; height: 100%; background-color: #cccccc; /* Old browser转载 2014-02-12 10:30:02 · 2268 阅读 · 0 评论 -
css3糖果风格按钮（ie8及以下不兼容）
Button Call Stars Blog candy.css/* BonBon Buttons 1.1 by simurai.com1.1 Added unprefixed attributes, :focus style, support1.0 ReleasedUsage:转载 2014-02-11 17:35:21 · 2125 阅读 · 0 评论 -
利用 css3 的图形3d翻转效果应用demo
css3 3d rotatebody,div,ul,li{ padding:0; margin:0;}.container ul li { height: 180px; width: 180px; margin-right: 20px; margin-bottom: 20px; display: inline; -webkit-perspective: 1000px; -原创 2014-01-27 16:44:25 · 1296 阅读 · 0 评论