个人分类:css(5)

CSS3写轮眼。。。(超逼真)

html代码效果预览<!doctypehtml><html><head><metacharset="utf-8"><title>纯CSS3实现眨眼</title><style>*{margin:0;padding:0;}.container{width:800px;height:200px;margin:30pxauto;overflow:hidden;background:#000;position:relative;}.eyesBoxs{width:130px;height:70px;position:absolute;top:50px;}.pullLeft{left:100px;}.pullRight{right:100px;}.profile{width:130px;height:70px;background:#fff;position:absolute;top:0;left:0;overflow:hidden;border-radius:070px050px;}.shadow{display:block;width:130px;height:70px;position:absol

发表于 2017-01-09 23:01:28

CSS3实现的开关(非常逼真)

html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>开关</title><styletype="text/css"media="screen">html,body{width:100%;height:100%;margin:0;padding:0;background:#ca9f6a;background:-webkit-radial-gradient(ellipseatcenter,#ca9f6a0%,#ad7846100%);background:radial-gradient(ellipseatcenter,#ca9f6a0%,#ad7846100%);font-family:"OpenSans";}.canvas{padding:20px;text-align:center;}.switch{margin:50px;d

10种实用的CSS鼠标滑过按钮特效(值得收藏)

分别插入html和css没弄明白,只好一起插入了,代码可能有点长html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>login</title><styletype="text/css"media="screen">/*公用样式*/body{margin:0;height:0;background-color:#F1F1F1;}.warp{width:250px;height:150px;background-color:#5e7c87;float:left;margin:15px15px;box-shadow:10px10px5px#888888;}.sim-button{lin

一颗跳动的心(css3)

html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>一颗跳动的心</title><styletype="text/css">*{margin:0;padding:0;}body{background:#1a1c24;}/*盒子*/#heart,#echo{position:fixed;width:300px;height:300px;top:100px;left:250px;text-align:center;-webkit-transform:scale(0.95);-moz-transform:scale(0.95);-ms-transform:scale(0.95);-o-transform:scale(0.95);transform:s

发表于 2016-11-29 08:56:11

原来css的border还可以这样玩

html代码效果预览<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>五角星</title><styletype="text/css">#star{width:0px;height:0px;margin:100pxauto;color:red;position:relative;display:block;border-bottom:70pxsolidred;border-left:100pxsolidtransparent;border-right:100pxsolidtransparent;-webkit-transform:rotate(35deg);-moz-transform:rotate(

发表于 2016-11-28 20:54:39