作者: 八月未见 博客:
以下内容我仅尝试了firefox浏览器,其他浏览器效果未知。
尝试做一个 css 写的角标,因为不能把它移到角落去,所以只能用伪类把两边挡住,假装是一个梯形的角标。
<div id="mark"> <h1>未见八月</h1> </div> <style><!-- *{ margin: 0; padding: 0; } #mark{ width: 200px; height: 60px; color: white; text-shadow: 0 2px 1px black,2px 0 1px black; display: block; position: relative; top: 100px; left: 0; box-shadow: 0 0 5px rgba(0,0,0,0.5), inset 0 0 2px white; text-align: center; transform: rotate(-45deg); margin-bottom: 250px; } #mark::before { content: ""; position: absolute; display: block; width: 140px; height: 140px; border: 50px solid rgb(185, 183, 289); border-right-color: rgba(185, 183, 289, 0); border-bottom-color: rgba(185, 183, 289, 0); transform: translate(-20px,-59px) rotate(45deg); } #mark h1{ font: 20px "微软雅黑"; line-height: 60px; } --></style>
做一个纯css写的动画,试试看能不能放 css3 动画:
放一下动画的代码:
<div id="cover"> <div id="animation_play"> <h1>未见八月</h1> </div> </div> <style><!-- #animation_play h1{ display: block; position: relative; width: 250px; height: 60px; text-align: center; line-height: 0px; z-index: -1; animation: animation_mark 10s infinite; } @keyframes animation_mark { 0% { opacity: 0; box-shadow: 0 0 0 rgba(0,0,0,0.5), inset 0 0 0 white; } 10% { opacity: 1; color: black; line-height: 60px; text-shadow: 0 0 1px black, 0 0 1px black; box-shadow: 0 0 20px rgba(0,0,0,0.5), inset 0 0 10px white; } 20% { color: white; opacity: 1; line-height: 60px; text-shadow: 0 5px 5px black, 0 5px 5px black; box-shadow: 0 0 5px rgba(0,0,0,0.5), inset 0 0 2px white; } 30% { color: white; opacity: 1; line-height: 60px; text-shadow: 0 2px 1px black,2px 0 1px black; box-shadow: 0 0 5px rgba(0,0,0,0.5), inset 0 0 2px white; transform: rotate(0deg) translate(0,0); } 40% { color: white; opacity: 1; line-height: 60px; text-shadow: 0 2px 1px black,2px 0 1px black; box-shadow: 0 0 5px rgba(0,0,0,0.5), inset 0 0 2px white; transform: rotate(-45deg) translate(-61px,-27px); } 90%{ color: white; opacity: 1; line-height: 60px; text-shadow: 0 2px 1px black,2px 0 1px black; box-shadow: 0 0 5px rgba(0,0,0,0.5), inset 0 0 2px white; transform: rotate(-45deg) translate(-61px,-27px); } 100%{ opacity: 0; box-shadow: 0 0 0 rgba(0,0,0,0.5), inset 0 0 0 white; } } #cover{ position: relative; display: block; width: 250px; height: 250px; border: 50px solid rgb(185, 183, 289); border-right-color: rgba(185, 183, 289, 0); border-bottom-color: rgba(185, 183, 289, 0); } --></style>
如对本文有疑问, 点击进行留言回复!!
css深入剖析transform的translate和perspective
HCIE第四天总结(典型组网之一:CSS+Eth-Trunk+iStack)
了解下Apache Elasticsearch 和 Kibana
网友评论