作者：LBM-痕迹 | 来源：互联网 | 2023-05-17 22:44
好久没写博客了，不管是路过的还是我的少得可怜坚挺的fans，我回来了。之前一段时间忙于工作，忙于自己的一个css3小网站，网盘里积累了很多想写的东西，但是了解得不深入，也就没什么好写。最近几天一直在关注w3cpluc列出的css3工具，里面列出了很多出色的css3属性生成方面的网站，和自己的小网站很类似，本想着借鉴别人的网站去修改自己的网站，在这过程中关注到了一个
好久没写博客了，不管是路过的还是我的少得可怜坚挺的fans，我回来了。
之前一段时间忙于工作，忙于自己的一个css3小网站，网盘里积累了很多想写的东西，但是了解得不深入，也就没什么好写。 最近几天一直在关注w3cpluc列出的css3工具，里面列出了很多出色的css3属性生成方面的网站，和自己的小网站很类似，本想着借鉴别人的网站去修改自己的网站，在这过程中关注到了一个css3动画网站，就开始用firebug搜刮其中的精髓。
以下是搜罗的一些觉得有技术含量的东西， 和那些刨根问底的大神自然没法比，凑活着看看呗。
1 将单选框做成两个按钮的形状
图中所看到的是两个正常按钮，用firebug 查看可以注意到是两个label标签，用css3（box-shadow:0.05em 0.05em 0.4em 0.1em rgba(0, 0, 0, 0.8) inset）渲染。如果光是这样，将会有两个裸露的,他是用clip:rect(0px, 0px, 0px, 0px) 进行隐藏。
clip属性详解
2 css3 animation
惭愧，今天第一次写用到animation。
先说说一点个人的看法，animation 执行效率高、使用方便，但是不够灵活，想要自定义丰富的页面效果还得使用js去修改DOM的属性。
想要实现css3定义的动画效果，两句话不可少，animation属性定义动画周期、渐变效果、延迟、循环次数，动画的前进后退。另外一个是keyFrame（关键帧），就是定义动画过程中几个关键位置的状态， 写作@keyFrames{},花括号中,0%表示开始位置，100%表示结束位置状态，其他的自己YY。
animation关键帧是不会显示到页面源码上面的，要是js能设置一个选项，让开发者决定是否显示源码，将会是一个不错的主意。
3 before,after, counter实现内容的显示.
稍加观察就可以发现，动画块中的那些序号和小标题都没有出现在HTML中。而是通过css实现的，我觉得这样的好处显而易见，降低维护成本以及减少代码量。想要使用其中的计数器（counter），有三个步骤，重置，修改，获取。
div{counter-reset : 计数器}//重置
a{counter-increment: 计数器}//i++; 修改， 在这里，a标签出现一次，计数器就会累加。
a:after{content :counter(计数器,decimal...)}//获取,写入。
4 合适的时间触发动画效果
一看到这个页面的时候，被这么多华丽丽的效果怔住了，心想要是现这么多效果，得多少js， 而且动画全开，网页一点都不卡，js执行效率处理得肯定很好，但是全都是用css实现的，所以用的全都是较为底层的代码，我们要做的只是调用，执行效率高很多。
实现其中的mouseover效果，大致有两种办法，一种是鼠标移上去的时候给他添加animation属性，另外一种就是网站中出现的css控制的。
#on-hover:checked ~ div[role="main"] > a[data-property]:not(:hover):not(:target){
animation: 0s ease 0s normal none 1 none !important;
}
看着有点瘆人，#on-hover:checked ~div[role="main"]，我还没搞清楚，但是我推测就是只有id为on-hover的单选框被选中的时候，自定义属性role为main的div中 含有data-property的a标签没有鼠标停留 并且不是被选中的情况下，会有一个（不能被覆盖的,最高权重，!important）无动画效果的animation属性。
换而言之，当id为on-hover的元素被选中的时候，或者鼠标停留到a标签上的时候，或者a标签被选中的时候，都会有其独特的，有意义的animation属性（每个a标签都有要执行的动画，但是被!important覆盖掉了）。
5 :not(:target)
:not(条件A)，not使用来筛选元素中的，不满足条件A的元素统统抛弃。
:target作为筛选的条件有特殊的意义。 当URL后面有#abc(hash)的时候，通常表示链接到当前页面的某个id为abc的元素上。当点击的时候，页面会滚动到#abc的offsetTop处，URL也会发生相应的改变，这个时候#abc就满足了:target的条件。
参考http://www.certifiedchinesetranslation.com/openaccess/CSS/target.html,在这片文章的最后我注意到这片文章是基于老外2003年的想法，让人好伤心啊...
虽老早听说css3的强大，但是工作中真正用到css3的地方还是不多，点到为止。没什么文采，凑活下；不足的地方，指点下；小站，关注下。8
![]()
DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>css3-animation-transition-transformtitle>
<meta name="author" content="Chan">
<meta name="description" content="Come on baby!">
<meta name="viewport" content=">
<link rel="shortcut icon" href="">
<link rel="stylesheet" href="">
<style style="text/css">
a{text-decoration: none;}
/*======================*/
#wrapper{counter-reset: counter}
a{position:relative; float: left; height: 150px; width: 150px; counter-increment: counter; color: #FFFFFF; line-height: 150px; text-align: center; background-color:slategray; margin: 0 20px 20px;}
a:before{content : counter(counter,decimal); font-size: 60px}
a:after{content: attr(data-property);position: absolute; left: 0; right: 0; top: 100px; color: red; color: #8880A2;}
a:not(:hover):not(:target){ animation: 0s ease 0s normal none 1 none !important}
#test1{animation: 1s ease 0s alternate none infinite background-color;background-color: slategray;}
#test2{animation: 1s ease 0s alternate none infinite transform-1; transform: perspective(400px) rotateY(0deg);}
@keyframes background-color{
0% {background-color: slategray}
100% {background-color: black}
}
@keyframes transform-1{
0% {transform: perspective(400px) rotateY(0deg)}
100% {transform: perspective(400px) translateZ(150px) rotateY(180deg);}
}
style>
head>
<body>
<div id="wrapper">
<a id="test1" href="#test1" data-property = "AAA123213">a>
<a id="test2" href="#test2" data-property = "B213BB">a>
div>
body>
html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/Javascript">script>
<script type="text/Javascript">
window.onkeydown = function(e){
e = e? e:window.event;
if(e.keyCode == 27){
location.hash = '#';
}
}
script>
View Code
京公网安备 11010802041100号