<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>纯CSS弹出层效果</title> <meta ht
转载
2017-04-20 19:50:00
230阅读
2评论
如果能避免使用JavaScript就实现DOM元素动画效果,那我非常乐于不用JS去实现。 因为更高效，而且不需要JS框架来一步步处理，代码更美观优雅。 用纯CSS来实现很难确定的一个特效是 上下滑动——当向上滑的时候内容渐变隐藏，向下滑动内容渐变显示。 之所以难以实现的原因是你可能不能获得内容的高度。 在经历了多种多样的CSS属性之后，我发现了一种利用纯CSS来实现滑动特效的方法。HTML部分
转载
2013-08-27 19:17:00
2082阅读
2评论
纯CSS圆角效果
纯CSS圆角效果
纯CSS圆角效果
1 <html> 2 <head> 3 <title>纯CSS圆角效果</title> 4 <meta http-equiv="content-type" content="text/html; charset=gb2312"> 5 <
转载
2010-04-09 09:26:00
230阅读
2评论
原文日期： 2013年08月26日 翻译日期： 2013年08月27日 如果能避免使用JavaScript就实现DOM元素动画效果,那我非常乐于不用JS去实现。 因为更...
转载
2013-08-27 16:30:00
1225阅读
2评论
一直以来，使用纯 CSS 实现波浪效果都是十分困难的。 因为实现波浪的曲线需要借助贝塞尔曲线。 而使用纯 CSS 的方式，实现贝塞尔曲线，额，暂时是没有很好的方法。 当然，借助其他力量（SVG、CANVAS），是可以很轻松的完成所谓的波浪效果的，先看看，非 CSS 方式实现的波浪效果。 使用 SVG
原创
2022-04-30 22:18:35
1386阅读
纯css制作loading效果 Loading...
原创
2021-07-27 20:50:33
394阅读
写在前面使用纯 CSS 实现波浪效果不再困难，CSS 奇技淫巧。一直以来，使用纯 CSS 实现波浪效果都是十分困难的。因为实现波浪的曲线需要借助贝塞尔曲线。而使用纯 CSS 的方式，实现贝塞尔曲线，额，暂时是没有很好的方法。当然，借助其他力量（SVG、CANVAS），是可以很轻松的完成所谓的波浪效果的。先看看，非 CSS 方式实现的波浪效果：2非CSS实现方式使用 SVG 实现波浪效果借助 SVG
原创
2021-01-09 22:01:44
1922阅读
纯css闪烁
效果demo具体速度和颜色自己可以自己调<div class="father-box"> <div class="header-box"> </div> </div>@keyframes test { from { opacity: 1.0; } 50% {
原创
2022-07-17 18:16:32
1267阅读
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>纯css制作loading效果</title> <style type="text/css"&am
原创
2022-06-30 17:25:41
178阅读
之前，我们实现鼠标移动，图片切换的效果，大多使用js实现。但最近工作需要，发现用css直接实现也是不错的。 说明：通过ul li span插入图片，一个span包含一个图片，一个图片隐藏，一个图片显示。通过li:hover,li:active,来切换2个图片的显示。因为项目中img是动态提取js生成的html，个数也不一定，这样子整体不固定，方便了框架的管理
原创
2014-03-12 10:04:10
3816阅读
效果 效果图如下，
纯css实现超酷炫的星级评分动画
效果 实现思路 5个类型为radio的input，label标签修改样式背景图为星星 label标签给每个星星鼠标停留时加注名字 点击星星有放大旋转的动画 dom结构 用form实现 <form> <div class="star"> <input
转载
2020-10-19 12:45:00
1137阅读
2评论
演示效果：CSS代码：<style type="text/css"> div.RoundedCorner{background: #9BD1FA} b.rtop, b.rbottom{display:block;background: #FFF} b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA} b.r1{margin: 0 5px} b.r2{margin: 0 3px} b.r3{margin: 0 2px} b.rtop b.r4,
转载
2013-04-01 11:13:00
123阅读
2评论
效果： 代码实现：<!DOCTYPE html><html>
原创
2021-08-27 15:03:12
365阅读
效果： 代码实现：<!DOCTYPE html><...
原创
2022-01-27 13:51:10
432阅读
利用CSS3 选择器和 配合实现tab切换 效果： 代码： 原理就是点击label的时候就会选中input标签，然后通过CSS让当前选中的那个元素的对应内容显示就好了。 利用:target实现遮罩层效果 单击按钮的时候会弹出遮罩层，如果再点遮罩层的话就会把遮罩层给隐藏。 代码： 长期更新...
原创
2021-08-04 11:05:43
138阅读
纯DIV+CSS简单实现简单的Tab选项卡左右切换效果
转载
精选
2014-01-22 10:05:25
9998阅读
开门见山，有这样一种非常常见的情况，对于一些可滚动的元素而言。通常在滚动的时候会给垂直于滚动的一侧添加一个阴影，用于表明当前有元素被滚动给该滚出了可视区域，类似这样：可以看到，在滚动的过程中，会出现一条阴影：对于两侧的列在滚动的过程中，静止不动，吸附在边界的问题，通常 CSS 使用 position: sticky 即可解决。但是对于滚动过程中才出现的阴影（滚动容器内的内容没有贴边，则阴影出现，贴
转载
2021-01-24 21:02:11
391阅读
2评论
下雪效果只是一类效果的名称，可以是红包雨等一些自由落体的运动效果，本文就是用纯css模拟下雪的效果，更多效果大家可以自行发挥。 1、前言由于公司产品的活动，需要模拟类似下雪的效果。浏览器实现动画无非css3和canvas（还有gif），对比下css3和canvas的优缺点：动画自由度：canvas胜；复杂度：canvas胜；兼容性：canvas胜；性能：css3胜（requestAnim
原创
2022-11-08 12:22:35
162阅读
