Home > Developer > Web Develop
Coolshow.js Plugin picture Rotation animation effect
<!DOCTYPE HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>Coolshow.js Plugin picture Rotation animation effect</title><Linkhref= "Css/coolshow.css"rel= "stylesheet"type= "Text/css" /><style>P{position:fixed;Top:50%; Left:0; Right:0;text-align:Center;Transform:Translatey ( -50%);font-size:40px;Font-weight: the;Color: White;Text-shadow:0 0 50px Black;Text-transform:Capitalize;font-family:' Roboto ', ' Helvetica ', ' Arial ', Sans-serif;letter-spacing:5px;}</style></Head><P>Gary</P><!--Code section begin -<Bodystyle= "background: #ecf0f1;"><Divclass= "Main"> <DivID= "Coolshow"></Div> <DivID= "Handbar"></Div></Div><Scriptsrc= "Js/jquery-1.7.2.min.js"></Script><Scriptsrc= "Js/coolshow.js"></Script><Script>/*define the pictures to be displayed and the time to display the pictures*/$ (document). Ready (function() { $('#coolShow'). Coolshow ({imgsrc:['Images/1.png','Images/2.png','Images/3.png'], Speed: + });});</Script><!--Code section end -</Body></HTML>index.html
@charset "Utf-8"; *{padding:0; margin:0;} body{width:100%;}. main{width:580px;height:600px;margin:0 Auto;} #coolShow {width:575px;height:400px;} #coolShow b{opacity:0; background-position:0 0; Width:100%;height:10px;display:block;} #handBar {margin-top:50px;position:relative;} #handBar span{opacity:0.6; width:100px; height:100px; Overflow:hidden; Display:inline-block; border:10px solid #217fbc; margin-left:65px; Cursor:pointer; border-radius:100px; -ms-border-radius:100px; -moz-border-radius:100px; -webkit-border-radius:100px; -o-border-radius:100px; Transition:all 0.5s ease-in-out; -ms-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; } #handBar span:hover{opacity:1; border:10px solid #1fcf6d; Transform:rotate (360DEG) scale (1.1); -ms-transition:all 0.5s ease-in-out; -moz-transform:rotaTE (360deg) scale (1.1); -wekit-transform:rotate (360DEG) scale (1.1); -o-transform:rotate (360DEG) scale (1.1);} #handBar span img{width:100%; height:100%;}. Waterfallbox img{width:100%; Height:auto;}Coolshow.css
Implementation process
jquery picture Rotation Click Fade out light in switch code
Coolshow.js: Fade picture rotate animation Toggle Effect Plugin
Css
Three round picture positions below
#handBar {margin-top:50px;position:relative;}The effect that appears on the circular picture below the mouse position
#handBar span:hover{ opacity:1; border:10px solid #1fcf6d; Transform:rotate (360DEG) scale (1.1); -ms-transition:all 0.5s ease-in-out; -moz-transform:rotate (360DEG) scale (1.1); -wekit-transform:rotate (360DEG) scale (1.1); -o-transform:rotate (360DEG) scale (1.1);}Opacity: Setting the opacity level of a DIV element
Border: Set style for 4 borders
Frame Length: 10px
All around are solid lines: solid
Border color: #1fcf6d
Transform:rotate (360DEG) scale (1.1)
Rotate (angle) defines 2D rotation
Scale (x, y) defines a 2D scaling transformation
transition: For setting four transition properties Portal
TRANSITION-PROPERTY Specifies the name of the CSS property that sets the transition effecttransition-duration specifies how many seconds or milliseconds to complete the transition effect
Ransition-timing-function speed curve with specified speed effect
Transition-delay define when the transition effect starts Picture Style below#handBar span{ opacity:0.6; width:100px; height:100px; Overflow:hidden; Display:inline-block; border:10px solid #217fbc; margin-left:65px; Cursor:pointer; border-radius:100px; -ms-border-radius:100px; -moz-border-radius:100px; -webkit-border-radius:100px; -o-border-radius:100px; Transition:all 0.5s ease-in-out; -ms-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; }Cursor : "Specifies the type (shape) of the cursor to display the portal
Default cursor (usually an arrow)
Auto Default. The cursor of the browser settings.
The crosshair cursor is rendered as a crosshair.
pointer cursor rendered as a pointer indicating the linkBorder-radius: Adding rounded borders to div elementsLength defines the shape of the fillet as a percentage of the shape of the rounded corners Click the image below to show the image above (coolshow plugin)#coolShow {width:575px;height:400px;} #coolShow b{opacity:0; background-position:0 0; Width:100%;height:10px;display:block;}Dom
Top source picture and bottom circle picture
class "main"> "coolshow"></div> "Handbar"></ div></div>
Define picture and picture animation time
<script>$ (document). Ready (function() { $ (' #coolShow '). Coolshow ({ imgsrc:[' images/1.png ',' images/2.png ',' images/3.png '), Speed :+}) ; </script>JS Frame _ (coolshow.js) Picture rotation animation effect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
