![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 83
暖夏随园
这个作者很懒,什么都没留下…
展开
-
css3制作下三角鼠标悬浮变正三角
其实制作这种三角非常简单,只需要设置透明的边即可,鼠标悬浮的时候旋转。 以下是制作的详细代码:html:<div class="triangle"> </div> css样式:.triangle { width:0; height:0; overflow:hidden; /*朝下的三角形*/ b原创 2017-07-04 11:47:18 · 841 阅读 · 0 评论 -
点击图片放大
html代码:<body> <h1>❤</h1> </body>css代码:h1{ font-size: 50px; color: pink; text-align: center;}h1.active{ -webkit-animation:a_z 1.2s linear forwards;}@-webkit-keyframes a_z原创 2017-09-26 18:06:45 · 435 阅读 · 0 评论 -
点赞+1效果
html代码:<body> <h1>❤<span>+1</span></h1></body>css代码: h1{ font-size: 50px; color: pink; text-align: center; position: relative; }原创 2017-09-26 18:00:40 · 2066 阅读 · 0 评论 -
文字和图片混合模式
首先我们先来看下,效果图:有木有,文字被水溅上的感觉。。。。代码如下: html代码: <body> <img src="img/timg (3).jpg" alt="" /> <h3>WATER</h3> </body>css代码: img { display: block; width: 100%;原创 2017-09-26 17:22:59 · 842 阅读 · 0 评论 -
css3缩放问题-文字居中显示
思路:将要居中的容器转换为block元素设置为absolute通过left:-50%居中;通过 transform: translate()来实现。例如:将small里面的字体缩小并居中显示small { position: absolute; left: 50%; display: block; white-space: nowrap; -webk原创 2017-07-03 14:57:22 · 2067 阅读 · 0 评论 -
纯css修改下拉列表select的默认样式
select的一些默认样式我们很难修改,比如图标的替换。接下来就说说如何修改这些默认样式:html代码:<div> <select name=""> <option value="芝士">芝士</option> <option value="奶油">奶油</option> </select></div>给select添加父元素div目的是为了,用di原创 2017-07-21 16:44:38 · 124421 阅读 · 2 评论 -
html5自定义属性data详解及使用方法
以下面的html作为案列:获取data-属性:<ul> <li class="first" data-animal-type="bird">Owl</li> <li data-animal-type="fish">Salmon</li> <li data-animal-type="spider">Tarantula</li> </ul>通过js的getAttribute(原创 2017-07-03 17:25:47 · 1566 阅读 · 0 评论 -
使用纯css实现tab切换
html页面<div class="tablist"> <ul class="tabmenu"> <li><a href="#tab1">tab1</a></li> <li><a href="#tab2">tab2</a></li> <li><a href="#tab3">tab3</a></li> </ul> <div原创 2017-07-03 18:45:24 · 599 阅读 · 0 评论 -
css3动画属性详解及用法
下面是一些经常用到的动画属性:animation-name:指定要绑定关键帧(动画)的名字animation-duration:指定动画多少毫秒或秒完成animation-timing-function:设置动画将如何完成(动画的速度)一个周期animation-delay:设置动画开始时的延迟时间animation-iteration-count:定义动画的播放次数animation-原创 2017-07-04 10:40:11 · 567 阅读 · 0 评论 -
一段html现在文字跑马灯实现
<!-- 1、滚动方式:behavior scroll 循环滚动(默认) alternate 来回交替滚动 slide 只滚动一次 2、滚动方向:direction up、down、left(默认)、right 3、滚动速度:scrollamount(滚动速原创 2017-11-30 14:36:44 · 5128 阅读 · 0 评论