随笔分类 -  css3

css3
页面缩放scale
摘要：coverScale() { const scaleWidth = window.innerWidth / 1920; const scaleHeight = window.innerHeight / 1080; const trueWidth = 1920* scaleWidth; const t 阅读全文
posted @ 2020-07-13 14:39 简单就好zyx 阅读(691) 评论(0) 推荐(0)
文字溢出加省略号
摘要：text-overflow:ellipsis;兼容性：所有主流浏览器都支持。 text-overflow: clip|ellipsis|string; clip(修剪文本) ellipsis（添加省略号） string（使用给定的字符串来代表被修剪的文本） 阅读全文
posted @ 2018-11-16 09:37 简单就好zyx 阅读(140) 评论(0) 推荐(0)
报警（闪烁点）动画
摘要：html <div class="circle"> <div class="wave"></div> </div> css <style>.circle { position: relative;} .wave { width: 5px; height: 5px; border-radius: 50 阅读全文
posted @ 2018-07-23 10:45 简单就好zyx 阅读(916) 评论(0) 推荐(0)
兼容ie10及以上css3加载进度动画
摘要：html <div class="spinner"> <div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div> <div class="rect4"></div> <div class="rect5"> 阅读全文
posted @ 2017-01-13 11:26 简单就好zyx 阅读(2176) 评论(0) 推荐(0)
图片经过时悬停动画
摘要：js方式兼容性到ie9 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="js/jquery-1.8.3.m 阅读全文
posted @ 2016-05-24 10:32 简单就好zyx 阅读(209) 评论(0) 推荐(0)
弹性布局
摘要：<div class="box"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div></div> css <style type="text/css"> *{margin: 0px;paddin 阅读全文
posted @ 2016-04-27 14:00 简单就好zyx 阅读(121) 评论(0) 推荐(0)
分页
摘要：<!--page--> <ul class="pagnation" style="margin: 20px 0px; font-size: 12px;"> <a class="page-prev" id="propage">上一页</a><a class="current" value="1">1< 阅读全文
posted @ 2016-03-29 15:44 简单就好zyx 阅读(157) 评论(0) 推荐(0)
ie8兼容border-radius方法
摘要：<!doctype html><html> <head> <meta charset="utf-8" /> </head> <title></title> <style> .border{width: 100px; height: 100px; border-radius: 50%; backgro 阅读全文
posted @ 2016-03-23 11:59 简单就好zyx 阅读(1078) 评论(0) 推荐(0)
瀑布流
摘要：瀑布流 阅读全文
posted @ 2015-10-08 10:10 简单就好zyx 阅读(118) 评论(0) 推荐(0)
css3常用属性
摘要：1.transform:2D 3D转换 （旋转(rotate)、缩放(scale)、移动(translate)、倾斜(skew)）2.transition:过渡(transition-property(名称)、 transition-duration(完成时间)、transition-timing-... 阅读全文
posted @ 2015-09-14 09:25 简单就好zyx 阅读(206) 评论(0) 推荐(0)
css3背景色渐变
摘要： 阅读全文
posted @ 2015-09-09 13:46 简单就好zyx 阅读(106) 评论(0) 推荐(0)
鼠标悬停动画
摘要：Examples 我是标题 我是标题1 我是标题2 我是标题3 我是标题 我是文字 阅读全文
posted @ 2015-09-07 17:05 简单就好zyx 阅读(160) 评论(0) 推荐(0)
纯css3加载动画
摘要：纯css3加载动画 阅读全文
posted @ 2015-09-01 13:34 简单就好zyx 阅读(184) 评论(0) 推荐(0)
旋转
摘要：css3 你好，这是一个div元素 你好，这是一个div元素 在这里，图片铺满整个边框。 在这里，图片被拉伸以填充该区域。 这是我们使用的图片： 注释： Internet Explorer 不支持 border-image... 阅读全文
posted @ 2015-07-21 10:32 简单就好zyx 阅读(217) 评论(0) 推荐(0)
渐变
摘要： 阅读全文
posted @ 2015-07-13 10:14 简单就好zyx 阅读(98) 评论(0) 推荐(0)
css3写等腰三角形
摘要： 阅读全文
posted @ 2015-06-05 15:55 简单就好zyx 阅读(1625) 评论(0) 推荐(0)